react16.3+生命周期使用建议，更简洁的react生命周期

关于react的生命周期，已经是老生常谈，但是react经过不同的版本生命周期变迁，会有一些变化，经过项目经验沉淀我觉得还是有必要拿出来总结一下，以下内容只针对class组件，不涉及hook组件范围。

主要大致讲以下两点：

1. 更简洁的生命周期；
2. 常用的componentWillReceiveProps声明周期移除了用什么代替；

一、更简洁的生命周期（新的生命周期）

16.3版本react生命周期以后在移除了一些生命周期后显得非常简洁，如果你是新手也一下就能看懂，似乎如下三个生命周期就够支持我们业务代码了。 我们展开图看下不常用的生命周期，里面有个getDerivedStateFromProps是新加的一个新的生命周期方法。

它的用法（一般在子组件上），用于返回一个新的值到state当中，

  state = {
    data: 1,
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    // 判断props和state是否一样，否则返回一个新的state中中的值
    if (nextProps.data !== prevState.data) {  
      return {
        data: nextProps.data,
      };
    }
    return null;  // 必须返回一个null
  }

react官方并不推荐你使用它，除非你一定要让你的state和props保持一致的情况

• 它总是在render之前调用，并且任何副作用出发时候都会调用（state、props变化）这非常不好！
• 它是一个静态方法，静态方法获取不到this，这是es6的语法，也就是说你这样写是无效的

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log('this.state',this.state)  // 无效
    return null;  // 必须返回一个null
  }

二、预废弃的生命周期用什么替代

我们知道react在 16 版本后预废弃了这几个生命周期： componentWillReceiveProps、componentWillMount、componentWillUpdate，官方并不推荐你使用它们。

其中常用的componentWillReceiveProps废弃我们要用什么来替代？

错误姿势❌：getDerivedStateFromProps

因为getDerivedStateFromProps的缺点实在太多，所以非常不推荐使用它替代componentWillReceiveProps。

正确姿势✔：使用componentDidUpdate替代componentWillReceiveProps

我们知道componentWillReceiveProps的使用场景都是在子组件当中，子组件接收新的props时候触发这个生命周期进而做一些操作，我们也可以利用componentDidUpdate中的参数做对比做一个操作，例如：

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.data !== this.props.data) {
      // do something
    }
  }

需要注意的是，componentDidUpdate接收的props是前一个而componentWillReceiveProps是下一个。

如果你非得使用componentWillReceiveProps，需用在它前面加上UNSAFE_来标识，即替换为UNSAFE_componentWillReceiveProps