react生命周期

React生命周期

16.4 之前

1. 加载阶段：

   constructor()

   加载的时候调用一次，可以初始化

   render()

   react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

   componentDidMount()

   组件渲染之后调用，只调用一次

2. 更新阶段：

   componentWillReceiveProps(nextProps)

   在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

   shouldComponentUpdate(nextProps, nextState)

   返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。

   componentWillUpdate(nextProps, nextState)

   组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

   componentDidUpdate()

   在组件完成更新后立即调用。在初始化时不会被调用。

3. 卸载阶段：

   componentWillUnmount()

   在组件从 DOM 中移除之前立刻被调用。

16.4 之后

1. 加载阶段：

   constructor()

   加载的时候调用一次，可以初始化

   static getDerivedStateFromProps(props, state)

   组件每次被render的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法

   render()

   react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

   componentDidMount()

   组件渲染之后调用，只调用一次

2. 更新阶段：

   static getDerivedStateFromProps(props, state)

   组件每次被render的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法

   shouldComponentUpdate(nextProps, nextState)

   返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。

   render()

   react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

   getSnapshotBeforeUpdate(prevProps, prevState)

   触发时间：updata发生的时候，在render之后，在组件dom渲染之前；返回一个值，作为componentDidUpdate的第三个参数；配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法

   componentDidUpdate()

   在组件完成更新后立即调用。在初始化时不会被调用。
   // 注意: getSnapshotBeforeUpdate getDerivedStateFromProps 都必须有返回值

3. 卸载阶段：

   Unmounting()

   组件渲染之后调用，只调用一次
   

   componentDidCatch(error, info)

   任何一处的javascript报错会触发
   

   总结

---

• React16新的生命周期弃用了componentWillMount、componentWillReceiveProps，componentWillUpdate

• 新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数（componentWillMount、componentWillReceiveProps，componentWillUpdate）

• React16并没有删除这三个钩子函数，但是不能和新增的钩子函数（getDerivedStateFromProps、getSnapshotBeforeUpdate）混用，React17将会删除componentWillMount、componentWillReceiveProps，componentWillUpdate

• 新增了对错误的处理（componentDidCatch）

  参考

  React.Component

  第一篇博客，如有不足，请多多指教。