绿色的React16❤生命周期❤之实践出真知测试这个流程，我们把所有的生命周期罗列起来并打印所有的生命周期。

之前面试过一些大厂，面试官对react的生命周期的知识点问来问去，问的都不知道react还是自己心里的那个react了吗？在使用过程中还要这么多套路吗？

首先看下官方给出React16.4生命周期图

官方地址链接：生命周期

看完这个图，脑子有没有清楚些？可以看下面来加深印象

一、准备react运行环境

我选择的是使用create-react-app创建的项目，大家也可以使用codesandbox，地址：codesandbox.io/s/wizardly-…

成功创建项目启动后开始实践吧！

插播广告：是不是感觉这个项目的绿色和之前的蓝色不一样了，可以使用
npx create-react-app project创建最新的项目试一试哦！

插播知识点：
getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。
每个生命周期详细介绍：
react.docschina.org/docs/react-…

二、开始实践

根据理解的思路我们分为几个假设来进行

假设一：一个组件的生命周期无修改流程

测试这个流程，我们把所有的生命周期罗列起来并打印所有的生命周期。

然后发现报了一堆警告⚠️从上到下说下第一个

还是这三个生命周期的警告⚠️由于即将删除这三个生命周期我们在使用的过程中需要在生命周期前加UNSAFE_ 例如：UNSAFE_componentWillMount

为了正常进行，我们需要注释先注释掉getDerivedStateFromProps getSnapshotBeforeUpdate

并给三个即将废弃的生命周期加上UNSAFE_在运行

得真理，无修改的情况下，旧的生命周期执行顺序为

constructor ->UNSAFE_componentWillMount-> render -> componentDidMount

得真理，无修改的情况下，React16.4的生命周期执行顺序为

constructor -> getDerivedStateFromProps -> render -> componentDidMount

假设二：一个组件的修改了state，生命周期执行顺序

测试流程：声明一个newState默认值为0

  this.state = {
      newState: 0
    };
changeState = () => {
    this.setState({
      newState: 1
    })
  }

通过按钮改变newState值

<button onClick={this.changeState}>修改state</button>

得真理，修改state的情况下，旧的生命周期执行顺序为

创建一个组件Unmount在App中引用

//app组件 
<Unmount newState={this.state.newState} />


class Unmount extends Component {
  //此处用componentDidMount做代表，测试销毁组件是否执行这个生命周期
  componentDidMount() {
    console.log("Unmount -> componentDidMount")
  }
  componentWillUnmount() {
    console.log("Unmount -> componentWillUnmount")
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    console.log("Unmount -> UNSAFE_componentWillReceiveProps", nextProps)
  }
  render() {
    return (
      <div>Unmount</div>
    );
  }
}

得真理，修改state的情况下，React16.4的生命周期执行顺序为

插播广告：如果shouldComponentUpdate的结果return false
则生命周期只执行 getDerivedStateFromProps -> shouldComponentUpdate ->❌（结束）

假设三：组件销毁时的生命周期执行顺序

测试流程：当App中state<2时销毁组件Unmount

//App组件

changeState = () => {
    this.setState({
      newState: this.state.newState + 1
    })
}

{this.state.newState < 2 ? <Unmount /> : null}

得真理，组件销毁时，旧的生命周期只执行componentWillUnmount

得真理，组件销毁时，React16.4的生命周期只执行componentWillUnmount

三、最后总结

根据实践返回到我们刚开始看到的声明周期执行顺序对比一下,有木有更清晰

绿色的React16❤生命周期❤之实践出真知