废弃掉了三个生命周期： componentWillMount，componentWillReceiveProps，componentWillUpdate
新增了两个生命周期：static getDerivedStateFromProps，getSnapshotBeforeUpdate
getDerivedStateFromProps相当于原来的componentWillMount和componentWillReceiveProps
getDerivedStateFromProps的有时候需要配合componentDidUpdate使用。

1.代码

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve("获取ajax数据");
    }, 2000);
  });
}

class Welcome extends Component {
  constructor(props) {
    console.log("constructor", props);
    super(props);
    this.state = {
      color: props.color
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log("getDerivedStateFromProps", nextProps, prevState);
    if (nextProps.color !== prevState.color) {
      return {
        color: nextProps.color
      };
    }
    return null; // 1 
    // return {color: "orange"};   //2. 相对于componenentWillMount中的直接同步setState
  }

  componentDidMount() {
    console.log("componentDidMount");
    //3. this.setState({ color: "yellow" });
  }

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

  getSnapshotBeforeUpdate() {
    console.log("getSnapshotBeforeUpdate");
    return null
  }
  componentDidUpdate(prevProps, prevState) {
    console.log("componentDidUpdate", prevProps, prevState);
  }

  componentWillUnmount() {
    console.log("componentWillUnmount");
  }

  changeColor = () => {
    this.setState({ color: "#ddd" });
  };
  render() {
    console.log("render", this.state.color);
    return (
      <div style={{ background: this.state.color }}>
        <h1>react 旧的生命周期</h1>
        <p>{this.state.color}</p>
        <button onClick={this.changeColor}>内部change color</button>
      </div>
    );
  }
}

class App extends Component {
  state = {
    currentColor: "red",
    colorIndex: 0
  };

  changeColor = () => {
    let colors = ["red", "yellow", "blue", "green", "pink"];
    let { colorIndex } = this.state;
    colorIndex = ++colorIndex % 5;
    console.log(colorIndex);
    this.setState({
      currentColor: colors[colorIndex],
      colorIndex
    });
  };

  render() {
    let { currentColor } = this.state;
    return (
      <div className="App">
        <Welcome color={currentColor} />
        <hr />
        <button onClick={this.changeColor}>外部change color</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

2. 输出结果

1.直接输出

constructor {color: "red"}
getDerivedStateFromProps {color: "red"} {color: "red"}
render red
componentDidMount

2.componentDidMount中改变state

①在componentDidMount中改变state，即将代码注释3处打开，可见componentDidMount会重新触发一次render，注意这里没有ajax的异步请求，直接setState就会重新渲染！！！

constructor {color: "red"}
getDerivedStateFromProps {color: "red"} {color: "red"}
render red
componentDidMount
getDerivedStateFromProps {color: "red"} {color: "yellow"}
shouldComponentUpdate {color: "red"} {color: "red"}
render red
getSnapshotBeforeUpdate
componentDidUpdate {color: "red"} {color: "red"}

☆☆☆☆☆注意☆☆☆☆☆
上面在componentDidMount中setState想将子组件color变成yellow，但是最后还是渲染的red，是应为componentDidMount之后又调用了getDerivedStateFromProps ，导致下面这段代码再次执行，从而又把父组件的颜色渲染给了子组件，应为父组件颜色没变，仍然是一开始的red，所以子组件color又变成red了，第4点中改变子组件state值，一样会导致这个问题，即子组件设置setState
不变化。解决方案目前知道的有两种，一种是getDerivedStateFromProps 配合componentDidUpdate 使用。另一种是别在子组件中setState，全在父组件中来控制变量（或者在redux中管理）

if (nextProps.color !== prevState.color) {
  return {
    color: nextProps.color
  };
}

3.改变父组件传入值，从而改变子组件state

点击父组件改变颜色按钮，改变父组件传入的props的值，查看结果
getDerivedStateFromProps => shouldComponentUpdate => render => getSnapshotBeforeUpdate => componentDidUpdate

getDerivedStateFromProps {color: "yellow"} {color: "red"}
shouldComponentUpdate {color: "yellow"} {color: "yellow"}
render yellow
getSnapshotBeforeUpdate
componentDidUpdate {color: "red"} {color: "red"}

4.改变子组件state值

点击子组件改变颜色按钮，改变子组件state值，查看结果
getDerivedStateFromProps => shouldComponentUpdate => render => getSnapshotBeforeUpdate => componentDidUpdate

getDerivedStateFromProps {color: "red"} {color: "yellow"}
shouldComponentUpdate {color: "red"} {color: "red"}
render red
getSnapshotBeforeUpdate
componentDidUpdate {color: "red"} {color: "red"}

☆☆☆☆☆注意☆☆☆☆☆
问题和上面第2点注意处一样，子组件改变state不变。

react生命周期（新）