react16之前的生命周期

组件初始化阶段

    constructor() { ... }

组件挂载阶段

    componentWillMount() { ... }
    render() { ... }
    componentDidMount() { ... }

组件更新阶段

props变化触发的更新

    componentWillReceiveProps(nextProps) { ... }
    shouldComponentUpdate(nextProps, nextState) { ... }
    componentWillUpdate(nextProps, nextState) { ... }
    componentDidUpdate(prevProps, prevState) { ... }

state变化触发的更新

    shouldComponentUpdate(nextProps, nextState) { ... }
    componentWillUpdate(nextProps, nextState) { ... }
    componentDidUpdate(prevProps, prevState) { ... }

组件卸载阶段

    componentWillUnmount() { ... }

react16之后的生命周期

    static getDerivedStateFromProps(props, state)

• getDerivedStateFromProps 是一个静态方法。静态方法不依赖组件实例而存在，因此你在这个方法内部是访问不到this的。若你偏要尝试这样做，必定报错。
• 该方法可以接收两个参数：props 和 state，它们分别代表当前组件接收到的来自父组件的 props 和当前组件自身的 state。
• getDerivedStateFromProps 需要一个对象格式的返回值。如果你没有指定这个返回值，那么大概率会被 React 警告一番；getDerivedStateFromProps 的返回值之所以不可或缺，是因为 React 需要用这个返回值来更新（派生）组件的 state。否则一定记得给它 return 一个 null。getDerivedStateFromProps 方法对 state 的更新动作并非“覆盖”式的更新，而是针对某个属性的定向更新。getDerivedStateFromProps只是更新state中的某一个属性，并不是直接覆盖原来的state对象，state中有这个属性就更新属性值，没有就直接新增该属性；state中其他属性和值不会发生改变。

    getSnapshotBeforeUpdate(prevProps, prevState) {
      // ...
    }

• getSnapshotBeforeUpdate 的返回值会作为第三个参数给到 componentDidUpdate。它的执行时机是在 render 方法之后，真实 DOM 更新之前。在这个阶段里，我们可以同时获取到更新前的真实 DOM 和更新前后的 state&props 信息。