生命周期 - 图2
生命周期 - 图3

  • Scheduler（调度器）—— 调度任务的优先级，高优任务优先进入Reconciler
  • Reconciler（协调器）—— 负责找出变化的组件
  • Renderer（渲染器）—— 负责将变化的组件渲染到页面上

<React16

image.png

挂载阶段

单一组件挂载

  1. constructor
  3. componentWillMount
  5. render
  7. componentDidMount

image.png
有嵌套情况
image.png

更新阶段

state更新

  1. * 1. shouldComponentUpdate
  2.     //返回Boolean 类型的值，判断是否需要更新渲染组件，优化 react 应用的主要手段之一
  3.     // 当返回 false 就不会再向下执行生命周期了
  4.     // 在这个阶段不可以 setState()，会导致循环调用。
  6. * 2. componentWillUpdate
  7.     //这个生命周期主要提供一个时机能够处理一些在 Dom 发生更新之前的事情，
  8.     //如获得 Dom 更新前某些元素的坐标、大小等，在这个阶段不可以 setState()，会导致循环调用。
  10. ************截止至此, this.props 和 this.state 都还未发生更新******
  12. * 3. render
  13. * 4. componentDidUpdate
  14.     //在此时已经完成渲染，Dom 已经发生变化，State 已经发生更新，
  15.     //prevProps、prevState 均为上一个状态的值。

image.png

props更新

  1. * 1. componentWillReceiveProps(nextProps,nextState)
  2.   //生命周期主要为我们提供对 props 发生改变的监听，
  3.   //如果你需要在 props 发生改变后，相应改变组件的一些 state。
  4.   // 在这个方法中改变 state 不会二次渲染，而是直接合并 state。
  6. * 2. shouldComponentUpdate(nextProps, nextState)
  7.     //返回Boolean 类型的值，判断是否需要更新渲染组件，优化 react 应用的主要手段之一
  8.     // 当返回 false 就不会再向下执行生命周期了
  9.     // 在这个阶段不可以 setState()，会导致循环调用。
  10. * 3. componentWillUpdate
  11.     //这个生命周期主要提供一个时机能够处理一些在 Dom 发生更新之前的事情，
  12.     //如获得 Dom 更新前某些元素的坐标、大小等，在这个阶段不可以 setState()，会导致循环调用。
  14. ************截止至此, this.props 和 this.state 都还未发生更新******
  16. * 4. render
  17. * 5. componentDidUpdate(prevProps, prevState) 
  18.     //在此时已经完成渲染，Dom 已经发生变化，State 已经发生更新，
  19.     //prevProps、prevState 均为上一个状态的值。

image.png卸载阶段

  1. * componentWillUnmount
  2.    //此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount  中创建的订阅等。
  3.    //componentWillUnmount 中不应调用 setState，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。
  1. import React from 'react';
  2. import './style.css';
  4. class Son extends React.Component {
  5.   constructor(props) {
  6.     super(props);
  7.     console.log('子组件子组件constructor ======>');
  8.     this.state = {
  9.       number: 1
  10.     };
  11.   }
  12.   // static getDerivedStateFromProps(props, state) {
  13.   //   console.log('getDerivedStateFromProps =======>');
  14.   //   return props;
  15.   // }
  16.   componentWillMount() {
  17.     console.log('子组件componentWillMount =====>');
  18.   }
  19.   componentWillReceiveProps(nextProps, nextState) {
  20.     //主要提供对 props 发生改变的监听，如果需要在 props 发生改变后，相应改变组件的一些 state。
  21.     //在这个方法中改变 state 不会二次渲染，而是直接合并 state。
  22.     console.log(
  23.       '子组件componentWillReceiveProps ===>',
  24.       'nextProps',
  25.       nextProps,
  26.       'nextState',
  27.       nextState
  28.     );
  29.   }
  31.   componentDidMount() {
  32.     console.log('子组件componentDidMount ======>');
  33.   }
  34.   shouldComponentUpdate(nextProps, nextState) {
  35.     //返回Boolean 类型的值，判断是否需要更新渲染组件，优化 react 应用的主要手段之一
  36.     // 当返回 false 就不会再向下执行生命周期了
  37.     // 在这个阶段不可以 setState()，会导致循环调用。
  38.     console.log(
  39.       '子组件shouldComponentUpdate ====>',
  40.       'nextProps',
  41.       nextProps,
  42.       'nextState',
  43.       nextState,
  44.       'this.state',
  45.       this.state
  46.     );
  47.     return true;
  48.   }
  49.   componentWillUpdate() {
  50.     console.log('子组件componentWillUpdate =====>', 'this.state', this.state);
  51.   }
  52.   componentDidUpdate(prevProps, prevState) {
  53.     console.log(
  54.       '子组件componentDidUpdate =====>',
  55.       'prevProps',
  56.       prevProps,
  57.       'prevState',
  58.       prevState,
  59.       'this.state',
  60.       this.state
  61.     );
  62.   }
  64.   componentWillUnmount() {
  65.     console.log('子组件componentWillUnmount=====>');
  66.   }
  68.   render() {
  69.     console.log('子组件render ========>');
  70.     return (
  71.       <>
  72.         <h1>父组件props{this.props.count}</h1>
  73.         <button onClick={() => this.setState({ count: this.state.number + 1 })}>
  74.           点击子组件更新状态{this.state.number}
  75.         </button>
  76.       </>
  77.     );
  78.   }
  79. }
  81. class Parent extends React.Component {
  82.   constructor(props) {
  83.     super(props);
  84.     console.log('constructor ======>');
  85.     this.state = {
  86.       count: 1
  87.     };
  88.   }
  89.   // static getDerivedStateFromProps(props, state) {
  90.   //   console.log('getDerivedStateFromProps =======>');
  91.   //   return props;
  92.   // }
  93.   componentWillMount() {
  94.     console.log('componentWillMount =====>');
  95.   }
  96.   componentWillReceiveProps(nextProps, nextState) {
  97.     //主要提供对 props 发生改变的监听，如果需要在 props 发生改变后，相应改变组件的一些 state。
  98.     //在这个方法中改变 state 不会二次渲染，而是直接合并 state。
  99.     console.log('componentWillReceiveProps ===>', nextProps, nextState);
  100.   }
  102.   componentDidMount() {
  103.     console.log('componentDidMount ======>');
  104.   }
  105.   shouldComponentUpdate(nextProps, nextState) {
  106.     //返回Boolean 类型的值，判断是否需要更新渲染组件，优化 react 应用的主要手段之一
  107.     // 当返回 false 就不会再向下执行生命周期了
  108.     // 在这个阶段不可以 setState()，会导致循环调用。
  109.     console.log(
  110.       'shouldComponentUpdate ====>',
  111.       // 'nextProps',
  112.       // nextProps,
  113.       // 'nextState',
  114.       // nextState,
  115.       'this.state',
  116.       this.state
  117.     );
  118.     return true;
  119.   }
  120.   componentWillUpdate() {
  121.     console.log('componentWillUpdate =====>', 'this.state', this.state.count);
  122.   }
  123.   componentDidUpdate(prevProps, prevState) {
  124.     console.log(
  125.       'componentDidUpdate =====>',
  126.       'prevProps',
  127.       prevProps,
  128.       'prevState',
  129.       prevState,
  130.       'this.state',
  131.       this.state
  132.     );
  133.   }
  135.   componentWillUnmount() {
  136.     console.log('componentWillUnmount=====>');
  137.   }
  139.   render() {
  140.     console.log('render ========>', this.state.count);
  141.     return (
  142.       <>
  143.         <h1>生命周期测试</h1>
  144.         <button onClick={() => this.setState({ count: this.state.count + 1 })}>
  145.           点击更新状态{this.state.count}
  146.         </button>
  147.         <Son count={this.state.count} />
  148.       </>
  149.     );
  150.   }
  151. }
  153. export default function App() {
  154.   return (
  155.     <div>
  156.       <h1>Hello StackBlitz!</h1>
  157.       <p>Start editing to see some magic happen :)</p>
  158.       <Parent />
  159.     </div>
  160.   );
  161. }

React16+

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
image.png

组件在挂载dom上的时候，会经历 render和commit阶段

Stack Reconciler重构为Fiber Reconciler后，render阶段的任务可能中断/重新开始，对应的组件在render阶段的生命周期钩子（即componentWillXXX）可能触发多次。这种行为和Reactv15不一致，所以标记为UNSAFE。更详细的解释参照这里(opens new window)为此，React提供了替代的生命周期钩子getSnapshotBeforeUpdate。`
Stack Reconciler重构为Fiber Reconciler后，render阶段的任务可能中断/重新开始，对应的组件在render阶段的生命周期钩子（即componentWillXXX）可能触发多次。这种行为和Reactv15不一致，所以标记为UNSAFE。更详细的解释参照这里(opens new window)为此，React提供了替代的生命周期钩子getSnapshotBeforeUpdate。`

render阶段

没有副作用，可能被中断
包含 constructor 、getDerivedStateFromProps 、shouldComponentUpdate、render
componentWillRecieveProps/componentWillUpdate/componentWillMount被废弃，由getDerivedStateFromProps代替

commit阶段

有副作用，可以操作dom
包含componentDidMount、componentDidUpdate、componentWilUnmount

React 16 中删除了如下三个生命周期。

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

组件挂载流程

调用ReactDom.render
进入render阶段
采用深度优先遍历算法创建fiber树
进入commit阶段

初始进入页面

  1. constructor
  2. getDerivedStateFromProps
  3. render
  4. componentDidMount

image.png

状态更新

  1. getSnapshotBeforeUpdate(prevProps, prevState) =>
  3. shouldComponentUpdate
  6. render
  9. getSnapshotBeforeUpdate =>
  10. // 必须有返回值  返回值作为 componentDidUpdate的第三个参数可以获取
  12. componentDidUpdate(prevProps, prevState, valueFromSnapShot) =>

image.png
有嵌套情况
image.png

  1. import React from 'react';
  2. import './style.css';
  4. class Son extends React.Component {
  5.   constructor(props) {
  6.     super(props);
  7.     console.log('子组件子组件constructor ======>');
  8.     this.state = {
  9.       number: 1
  10.     };
  11.     this.sonRef = React.createRef(null);
  12.   }
  14.   static getDerivedStateFromProps(props, state) {
  15.     console.log('子组件getDerivedStateFromProps =======>', props, state);
  16.     return props;
  17.   }
  19.   componentDidMount() {
  20.     console.log('子组件componentDidMount ======>');
  21.   }
  22.   shouldComponentUpdate(nextProps, nextState) {
  23.     console.log(
  24.       '子组件shouldComponentUpdate ====>',
  25.       'nextProps',
  26.       nextProps,
  27.       'nextState',
  28.       nextState,
  29.       'this.state',
  30.       this.state
  31.     );
  32.     return true;
  33.   }
  35.   getSnapshotBeforeUpdate(prevProps, prevState) {
  36.     // ...
  37.     console.log('子组件getSnapshotBeforeUpdate===>', prevProps, prevState);
  38.     return this.sonRef;
  39.   }
  41.   componentDidUpdate(prevProps, prevState, valueFromSnapShot) {
  42.     console.log(
  43.       '子组件componentDidUpdate =====>',
  44.       'prevProps',
  45.       prevProps,
  46.       'prevState',
  47.       prevState,
  48.       'valueFromSnapShot',
  49.       valueFromSnapShot,
  50.       'this.state',
  51.       this.state
  52.     );
  53.   }
  55.   componentWillUnmount() {
  56.     console.log('子组件componentWillUnmount=====>');
  57.   }
  59.   render() {
  60.     console.log('子组件render ========>');
  61.     return (
  62.       <div ref={this.sonRef}>
  63.         <h1>父组件props{this.props.count}</h1>
  64.         <button onClick={() => this.setState({ count: this.state.number + 1 })}>
  65.           点击子组件更新状态{this.state.number}
  66.         </button>
  67.       </div>
  68.     );
  69.   }
  70. }
  72. class Parent extends React.Component {
  73.   constructor(props) {
  74.     super(props);
  75.     console.log('constructor ======>');
  76.     this.state = {
  77.       count: 1
  78.     };
  79.   }
  80.   static getDerivedStateFromProps(props, state) {
  81.     console.log('getDerivedStateFromProps =======>', props, state);
  82.     return props;
  83.   }
  85.   componentDidMount() {
  86.     console.log('componentDidMount ======>');
  87.   }
  88.   shouldComponentUpdate(nextProps, nextState) {
  89.     console.log(
  90.       'shouldComponentUpdate ====>',
  91.       // 'nextProps',
  92.       // nextProps,
  93.       // 'nextState',
  94.       // nextState,
  95.       'this.state',
  96.       this.state
  97.     );
  98.     return true;
  99.   }
  101.   getSnapshotBeforeUpdate(prevProps, prevState) {
  102.     // ...
  103.     console.log('getSnapshotBeforeUpdate===>', prevProps, prevState);
  104.   }
  106.   componentDidUpdate(prevProps, prevState) {
  107.     console.log(
  108.       'componentDidUpdate =====>',
  109.       'prevProps',
  110.       prevProps,
  111.       'prevState',
  112.       prevState,
  113.       'this.state',
  114.       this.state
  115.     );
  116.   }
  118.   componentWillUnmount() {
  119.     console.log('componentWillUnmount=====>');
  120.   }
  122.   render() {
  123.     console.log('render ========>', this.state);
  124.     return (
  125.       <>
  126.         <h1>生命周期测试</h1>
  127.         <button onClick={() => this.setState({ count: this.state.count + 1 })}>
  128.           点击更新状态{this.state.count}
  129.         </button>
  130.         <Son count={this.state.count} />
  131.       </>
  132.     );
  133.   }
  134. }
  136. export default function App() {
  137.   return (
  138.     <div>
  139.       <h1>Hello StackBlitz!</h1>
  140.       <p>Start editing to see some magic happen :)</p>
  141.       <Parent />
  142.     </div>
  143.   );
  144. }

getDerivedStateFromProps

getDerivedStateFromProps exists for only one purpose. It enables a component to update its internal state as the result of changes in props.

  1. static getDerivedStateFromProps(nextprops, prestate)
  • 在 React 16.3.0 版本中：在组件实例化、接收到新的 props 时会被调用
  • 在 React 16.4.0 版本中：在组件实例化、接收到新的 props 、组件状态更新时会被调用

注意

  • 静态方法。不属于任何实例，内部的this并不指向组件本身，this. 的任何属性和方法都不能用。

为什么getDerivedStatefromProps是静态的？
隔离组件实例访问，不能用this.setState()等一些方法，保持该方法的纯粹，它就是用来定义派生state的，除此之外不能进行任何操作
保持它是纯函数，不要产生副作用。

  • 返回一个对象来更新 state，如果返回 null 则不更新任何内容
  • 由上图可以知道，props更新，setState，forceUpdate会触发getDerivedStateFromProps
  1. forceUpdate(callback)

默认情况下，当组件的 state 或 props 发生变化时，组件将重新渲染。如果 render() 方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。

调用 **forceUpdate()** 将致使组件调用 **render()** 方法，此操作会跳过该组件的 **shouldComponentUpdate()**。但其子组件会触发正常的生命周期方法，包括 **shouldComponentUpdate()** 方法。

getSnapshotBeforeUpdate

  1. getSnapshotBeforeUpdate(prevProps, prevState)

替换之前的willX的生命周期，强制用户在mount阶段获取dom

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

References

https://mp.weixin.qq.com/s/G0xcaQ1KQ9cBgO3yybhDpA
https://github.com/sisterAn/blog/issues/34