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數(shù)據(jù)');
    }, 2000);
  });
}

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

  componentWillMount() {
    console.log("componentWillMount");
    // this.setState({color: "yellow"}); 1.在componentWillMount中setState

    // setTimeout(() => {                       /***************************************************/
    //   this.setState({ color: "green" });     /******2.在componentWillMount中延時(shí)setState**********/
    // }, 1000);                                /***************************************************/
  }

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

  componentWillReceiveProps(nextProps, nextState) {
    console.log("componentWillReceiveProps", nextProps, nextState);
    if (nextProps.color !== this.state.color) {
      this.setState({ color: nextProps.color });
    }
  }

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

  componentWillUpdate(nextProps, nextState) {
    console.log("componentWillUpdate", nextProps, nextState);
  }

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

  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}>內(nèi)部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;
    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. 輸出結(jié)果

1.直接輸出

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

2.componentWillMount中改變state

• ①在componentWillMount中改變state，即將代碼注釋1處打開，setState先執(zhí)行，改變完了state，然后才執(zhí)行render，可見在這方法里同步地設(shè)置狀態(tài)將不會(huì)觸發(fā)重渲。

constructor {color: "red"}
componentWillMount
render yellow
componentDidMount

• ②在componentWillMount中延時(shí)改變state，即將代碼注釋2處打開， 因?yàn)檠訒r(shí)，render在setState之前執(zhí)行，執(zhí)行完了，會(huì)觸發(fā)一次重新渲染（render）?？梢娫谶@方法里異步地設(shè)置狀態(tài)會(huì)觸發(fā)重渲。

constructor {color: "red"}
componentWillMount
render red
componentDidMount
shouldComponentUpdate {color: "red"} {color: "green"}
componentWillUpdate {color: "red"} {color: "green"}
render green
componentDidUpdate {color: "red"} {color: "red"}

• ③在componentWillMount中使用async，await（發(fā)送ajax），將componentWillMount改成如下形式

  async componentWillMount() {
    console.log("componentWillMount");
    let result = await delay()
    this.setState({ color: "green" });
  }

輸出結(jié)果如下，也會(huì)觸發(fā)一次重新渲染（render），what the Fuck?。。?/strong>
我一直以為不會(huì)重新渲染，那為什么ajax請(qǐng)求不建議放在componentWillMount中，網(wǎng)上搜了一大堆，都說不能觸發(fā)重新render，莫不是智障？？？？？

constructor {color: "red"}
componentWillMount
render red
componentDidMount
result 獲取ajax數(shù)據(jù)
shouldComponentUpdate {color: "red"} {color: "green"}
componentWillUpdate {color: "red"} {color: "green"}
render green
componentDidUpdate {color: "red"} {color: "red"}

constructor {color: "red"}
componentWillMount
render red
componentDidMount
shouldComponentUpdate {color: "red"} {color: "yellow"}
componentWillUpdate {color: "red"} {color: "yellow"}
render yellow
componentDidUpdate {color: "red"} {color: "red"}

componentWillReceiveProps {color: "yellow"} {}
shouldComponentUpdate {color: "yellow"} {color: "yellow"}
componentWillUpdate {color: "yellow"} {color: "yellow"}
render yellow
componentDidUpdate {color: "red"} {color: "yellow"}

shouldComponentUpdate {color: "red"} {color: "#ddd"}
componentWillUpdate {color: "red"} {color: "#ddd"}
render #ddd
componentDidUpdate {color: "red"} {color: "yellow"}