02_React组件基础

YCL_
105 阅读3分钟

组件化概念

组件化是一种（分而治之）的思想，组件是独立可复用的代码片段（功能块），开发一个个组件构造整个应用（组件树）。

组件化可以让代码更加方便组织、管理、具有更强的扩展性。

React中定义组件的方式有两种： 类组件(Class Component) 和 函数组件(Functional Component)。

类组件

概念：使用ES6的 class 创建的组件，叫做类组件

类组件的要求：

  1. 组件的名称必须是大写字母开头
  2. 必须继承(extends) React.Component父类，从而使用父类中提供的方法或属性
  3. 必须实现 render 函数，render方法必须有返回值，表示该组件的UI结构
  4. 使用类名称作为组件标签名称，可以成对出现 也可以自闭合
import React from 'react'

// 定义类组件
class YComp extends React.Component {
  render () {
    return <div>这是一个类组件!</div>
  }
}

function App () {
  return (
    <div className="App">
      {/* 渲染类组件 */}
      <YComp />
      <YComp></YComp>
    </div>
  )
}
export default App

函数组件

概念：使用JS的function（或者箭头函数）定义的函数，这个函数返回组件的UI结构

函数组件的特点：

  1. 没有生命周期，会被更新、挂载、卸载，但是没有生命周期函数
  2. this 关键字不能指向组件实例（因为没有组件实例）

约定说明：

  1. 组件的名称必须首字母大写，react内部会根据这个来判断是组建还是普通的HTML标签
  2. 函数组件必须有返回值，表示该组件的UI结构；如果不需要渲染任何内容，则返回null
  3. 使用函数名称作为组件标签名称，可以成对出现 也可以自闭合
// 定义函数组件
function YFunComp () {
  return <div>这是我的第一个函数组件!</div>
}

// 定义类组件
function App () {
  return (
    <div className="App">
      {/* 渲染函数组件 */}
      <YFunComp />
      <YFunComp></YFunComp>
    </div>
  )
}
export default App

生命周期

组件的生命周期是指组件从被创建到挂载到页面中运行起来，再到组件不用时卸载的过程，注意，只有类组件才有生命周期（类组件 实例化 函数组件 不需要实例化）

projects.wojtekmaj.pl/react-lifec…

常用生命周期

constructor：创建组件时，最先执行，初始化的时候只执行一次

  1. 初始化state
  2. 创建 Ref
  3. 使用 bind 解决 this 指向问题等

注意：如果不做前三点，组件可以不用实现构造函数

render：每次组件渲染都会触发

注意： 不能在里面调用setState()

componentDidMount：在组件挂载（完成DOM渲染）后执行，初始化的时候执行一次

  1. 发送网络请求  
  2. DOM操作
  3. 添加一些订阅（在componentWillUnmount取消订阅）

componentDidUpdate：组件更新后（DOM渲染完毕），首次渲染不会执行

  1. DOM操作，可以获取到更新后的DOM内容，不要直接调用setState
  2. 如果对更新前后的 props 进行了比较，可以选择在此处进行网络请求；（例如，当 props 未发生变化时，则不会执行网络请求）。

componentWillUnmount：组件卸载、销毁之前调用

  1. 执行清理工作（比如：清理定时器等）
  2. 例如：清除timer，取消网络请求或清除componentDidMount()创建的订阅等

不常用的生命周期

static getDerivedStateFromProps：state的值在任何时候都依赖于props时使用；该方法返回一个对象来更新state

showComponentUpdate：

getSnapshotsBeforeUpdate：在React更新DOM之前回调一个函数，可以获取DOM更新之前的一些信息（比如滚动位置）

avatar
文章
阅读
粉丝