React的生命周期分为四个部分，分别是挂载时、更新时、卸载时、错误处理。他们的生命周期调用顺序如下：

挂载：当组件实例被创建并插入 DOM 中时

1. constructor()

• 执行时间：在 React 组件挂载之前，会调用它的构造函数

• 应用场景：
  1.通过给 this.state 赋值对象来初始化内部 state；
  2.为事件处理函数绑定实例。

• 注意事项：
  1.避免将 props 的值复制给 state
  2.在 constructor() 函数中不要调用 setState() 方法

constructor(props) {
  super(props);
  this.state = {
    text:"初始值"
  };
}

2. static getDerivedStateFromProps(props, state)

• 执行时间：在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用

• 应用场景：此方法适用于罕见的用例，让组件在 props 变化时更新 state时使用

• 注意事项：它应返回一个对象来更新 state，如果返回 null 则不更新任何内容

state = {
    color: '',
    prevPropsColor: ''
  }
  // 因为这个生命周期是静态方法，同时要保持它是纯函数，不要产生副作用。
  // 纯函数：输入一定，输出一定确定，不能使用随机数
static getDerivedStateFromProps (props, state) {
    console.log(props)
    console.log(state)
    // 把传入的 prop 值和之前传入的 prop 进行比较。
    if (props.color !== state.prevPropsColor) { 
      return {
        color: props.color,
        prevPropsColor: props.color
      }
    }
    return null
  }
}

3. render()

render()方法是必需的。当他被调用时，他将计算this.props和this.state，并返回以下一种类型：

• React元素。通过jsx创建，既可以是dom元素，也可以是用户自定义的组件。
• 字符串或数字。他们将会以文本节点形式渲染到dom中。
• Portals。react 16版本中提出的新的解决方案，可以使组件脱离父组件层级直接挂载在DOM树的任何位置。
• null，什么也不渲染
• 布尔值。也是什么都不渲染。

当返回null,false,ReactDOM.findDOMNode(this)将会返回null，什么都不会渲染。

4. componentDidMount()

• 执行时间：会在组件挂载后（插入 DOM 树中）立即调用

• 应用场景：通常在这里进行ajax请求

更新：当组件的 props 或 state 发生变化时

1. static getDerivedStateFromProps()

2. shouldComponentUpdate(nextProps, nextState)

• 执行时间：当 props 或 state 发生变化时，会在渲染执行之前被调用

shouldComponentUpdate (nextProps, nextState) {
  // 默认值为true
  return false // 组件不会触发更新函数，也就是不会触发render以及以后的生命周期钩子
  }
  componentDidUpdate () {
    console.log('father', 'componentDidUpdate')
  }

3. render()

4. getSnapshotBeforeUpdate(prevProps, prevState)

• 执行时间：在最近一次渲染输出（提交到 DOM 节点）之前调用
• 应用场景：此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等

5. componentDidUpdate()

• 执行时间：会在更新后会被立即调用。首次渲染不会执行此方法

componentDidUpdate(prevProps) {
  // 典型用法（不要忘记比较 props）：
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

卸载:当组件从 DOM 中移除时

componentWillUnmount()

• 执行时间：会在组件卸载及销毁之前直接调用
• 应用场景：在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等
• 注意事项：不应调用 setState()，因为该组件将永远不会重新渲染

错误处理：当渲染过程，生命周期，或子组件的构造函数中抛出错误时

1.static getDerivedStateFromError(error)

会在渲染阶段调用

static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染可以显降级 UI
    return { hasError: true };
  }

2.componentDidCatch(error, info)

会在“提交”阶段被调用

componentDidCatch(error, info) {
    // "组件堆栈" 例子:
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logComponentStackToMyService(info.componentStack);
  }

你可以使用此生命周期图谱作为速查表。在下述列表中，常用的生命周期方法会被加粗。其余生命周期函数的使用则相对罕见

生命周期图谱.png