【React】React组件生命周期以及触发顺序（部分与vue做比较）

最近在学习React，发现其中的生命周期跟Vue有一些共同点，但也有比较明显的区别，并且执行顺序也值得讨论一下，于是总结了一些资料在这里，作为学习记录。

v17.0.1后生命周期图片

初始化阶段

由ReactDOM.render()触发 —— 初次渲染

1. constructor() —— 类组件中的构造函数
2. static getDerivedStateFromProps(props, state) 从props得到一个派生的状态【新增】
3. render() —— 挂载组件
4. componentDidMount() —— 组件挂载完成 比较常用
   总结：
   constructor 对标 Vue中的beforeCreate/created
   componentDidMount 对标 Vue中的 Mounted
   在一个完整的生命周期中，constructor 与 componentDidMount 只会执行一次。
   在一个完整的生命周期中，render会执行多次
   注意：
   在React中，我们在componentDidMount 中发请求，绝对不在constructor 中发请求。

---

更新阶段

由组件内部this.setSate()或父组件重新render触发或强制更新forceUpdate()

1. getDerivedStateFromProps() —— 从props得到一个派生的状态 【新增】
2. shouldComponentUpdate() —— 组件是否应该被更新（默认返回true）
3. render() —— 挂载组件
4. getSnapshotBeforeUpdate() —— 在更新之前获取快照【新增】
5. componentDidUpdate(prevProps, prevState, snapshotValue) —— 组件完成更新。
   总结：
   触发组件更新的方式（常用），两种：
   1. props 值的改变
   2. setState() 改变state
      更新阶段触发的钩子函数，有两个
      1. render
      2. componentDidUpdate
         render与componentsDidUpdate 都可以拿到更新后的值。
         render与componentsDidUpdate 中都不能调用setState ，会造成死循环。
         注意：
         不论DOM中有没有使用数据，钩子函数都会被触发。（与vue不同）
         react中的更新，指的是数据更新，而非视图更新。（与vue不同）

---

卸载组件

由ReactDOM.unmountComponentAtNode()触发

1. componentWillUnmount() —— 组件即将卸载

---

重要的勾子

1. render：初始化渲染或更新渲染调用
2. componentDidMount：开启监听, 发送ajax请求
3. componentWillUnmount：做一些收尾工作, 如: 清理定时器

---

即将废弃的勾子

1. componentWillMount
2. componentWillReceiveProps
3. componentWillUpdate
   现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

---

代码案例

效果

代码展示

父组件：Parent.js

import React, { Component } from 'react';
import { Button } from 'antd';
import Child from './child';

const parentStyle = {
  padding: 40,
  margin: 20,
  backgroundColor: 'LightCyan',
};

const NAME = 'Parent 组件：';

export default class Parent extends Component {
  constructor() {
    super();
    console.log(NAME, 'constructor');
    this.state = {
      count: 0,
      mountChild: true,
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log(NAME, 'getDerivedStateFromProps');
    return null;
  }

  componentDidMount() {
    console.log(NAME, 'componentDidMount');
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log(NAME, 'shouldComponentUpdate');
    return true;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log(NAME, 'getSnapshotBeforeUpdate');
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(NAME, 'componentDidUpdate');
  }

  componentWillUnmount() {
    console.log(NAME, 'componentWillUnmount');
  }

  /**
   * 修改传给子组件属性 count 的方法
   */
  changeNum = () => {
    let { count } = this.state;
    this.setState({
      count: ++count,
    });
  };

  /**
   * 切换子组件挂载和卸载的方法
   */
  toggleMountChild = () => {
    const { mountChild } = this.state;
    this.setState({
      mountChild: !mountChild,
    });
  };

  render() {
    console.log(NAME, 'render');
    const { count, mountChild } = this.state;
    return (
      <div style={parentStyle}>
        <div>
          <h3>父组件</h3>
          <Button onClick={this.changeNum}>改变传给子组件的属性 count</Button>
          <br />
          <br />
          <Button onClick={this.toggleMountChild}>卸载 / 挂载子组件</Button>
        </div>
        {mountChild ? <Child count={count} /> : null}
      </div>
    );
  }
}

子组件： Child.js

import React, { Component } from 'react';
import { Button } from 'antd';

const childStyle = {
  padding: 20,
  margin: 20,
  backgroundColor: 'LightSkyBlue',
};

const NAME = 'Child 组件：';

export default class Child extends Component {
  constructor() {
    super();
    console.log(NAME, 'constructor');
    this.state = {
      counter: 0,
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log(NAME, 'getDerivedStateFromProps');
    return null;
  }

  componentDidMount() {
    console.log(NAME, 'componentDidMount');
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log(NAME, 'shouldComponentUpdate');
    return true;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log(NAME, 'getSnapshotBeforeUpdate');
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(NAME, 'componentDidUpdate');
  }

  componentWillUnmount() {
    console.log(NAME, 'componentWillUnmount');
  }

  changeCounter = () => {
    let { counter } = this.state;
    this.setState({
      counter: ++counter,
    });
  };

  render() {
    console.log(NAME, 'render');
    const { count } = this.props;
    const { counter } = this.state;
    return (
      <div style={childStyle}>
        <h3>子组件</h3>
        <p>父组件传过来的属性 count ： {count}</p>
        <p>子组件自身状态 counter ： {counter}</p>
        <Button onClick={this.changeCounter}>改变自身状态 counter</Button>
      </div>
    );
  }
}

从五种组件状态改变的时机来探究生命周期的执行顺序

一、父子组件初始化

父子组件第一次进行渲染加载时：
控制台的打印顺序为：

• Parent 组件： constructor()
• Parent 组件： getDerivedStateFromProps()
• Parent 组件： render()
• Child 组件： constructor()
• Child 组件： getDerivedStateFromProps()
• Child 组件： render()
• Child 组件： componentDidMount()
• Parent 组件： componentDidMount()

二、子组件修改自身状态 state

点击子组件 [改变自身状态counter] 按钮，其 [自身状态counter] 值会 +1, 此时控制台的打印顺序为：

• Child 组件： getDerivedStateFromProps()
• Child 组件： shouldComponentUpdate()
• Child 组件： render()
• Child 组件： getSnapshotBeforeUpdate()
• Child 组件： componentDidUpdate()

三、修改父组件中传入子组件的 props

点击父组件中的 [改变传给子组件的属性 count] 按钮，则界面上 [父组件传过来的属性 count] 的值会 + 1，控制台的打印顺序为：

• Parent 组件： getDerivedStateFromProps()
• Parent 组件： shouldComponentUpdate()
• Parent 组件： render()
• Child 组件： getDerivedStateFromProps()
• Child 组件： shouldComponentUpdate()
• Child 组件： render()
• Child 组件： getSnapshotBeforeUpdate()
• Parent 组件： getSnapshotBeforeUpdate()
• Child 组件： componentDidUpdate()
• Parent 组件： componentDidUpdate()

四、卸载子组件

点击父组件中的 [卸载 / 挂载子组件] 按钮，则界面上子组件会消失，控制台的打印顺序为：

• Parent 组件： getDerivedStateFromProps()
• Parent 组件： shouldComponentUpdate()
• Parent 组件： render()
• Parent 组件： getSnapshotBeforeUpdate()
• Child 组件： componentWillUnmount()
• Parent 组件： componentDidUpdate()

五、重新挂载子组件

再次点击父组件中的 [卸载 / 挂载子组件] 按钮，则界面上子组件会重新渲染出来，控制台的打印顺序为：

• Parent 组件： getDerivedStateFromProps()
• Parent 组件： shouldComponentUpdate()
• Parent 组件： render()
• Child 组件： constructor()
• Child 组件： getDerivedStateFromProps()
• Child 组件： render()
• Parent 组件： getSnapshotBeforeUpdate()
• Child 组件： componentDidMount()
• Parent 组件： componentDidUpdate()

父子组件生命周期执行顺序总结：

• 当子组件自身状态改变时，不会对父组件产生副作用的情况下，父组件不会进行更新，即不会触发父组件的生命周期
• 当父组件中状态发生变化（包括子组件的挂载以及卸载）时，会触发自身对应的生命周期以及子组件的更新
  • render 以及 render 之前的生命周期，则 父组件先执行
  • render之后的生命周期，子组件先执行，并且与父组件交替执行
• 当子组件进行卸载时，只会执行自身的 componentWillUnmount 生命周期，不会再触发别的生命周期