React16.3.0之後的生命週期(一) - 組件加載

組件加載

當組件被實例化而且插入Dom時所執行的方法，也會按照下的順序依次執行。

• constructor()

  構造方法。

  這個方法有兩個目的：

  • 初始化一個本地state。

    this.state = {color: 'red'};

    要避免將 props參數直接賦值給 state, this.state = {color: props.color}是不容許 的

  • 綁定方法。

    咱們知道React Class中是不會繼承this的，若是在class的方法中使用this，那麼咱們須要將this綁定到方法中。

    this.clickHandler = this.clickHandler.bind(this);

    綁定 this，將須要 super(props),不然會提示找不到 this.

    示例：

    constructor(props) {
      super(props);
      this.state = {color: 'red'};
      this.clickHandler = this.clickHandler.bind(this);
    }

• static getDerivedStateFromProps()

  當本地state須要根據props來改變的時候可調用此方法。

  這個方法是在render()前會被執行，只要執行render()都會被在以前被觸發。

  該方法有兩個參數props和state; 返回值爲state對象, 不須要返回總體state，把須要改變的state返回便可。

  示例：

  static getDerivedStateFromProps(props, state) {
    if(props.color !== state.color) {
      return {color: props.color};
    }
  }

• render()

  這個方法是React組件中必需要提供的方法。當state或者props任一數據有更新時都會執行。

  須要注意當繼承 PureComponent時，不會對對象進行深度比較，也就是，不會根據對象內的對象變化時執行 render().

  render()是一個純函數，也就是不能在這個方法中有相似setState()這樣的行爲。

  返回的數據類型能夠有：

  • null、String、Number、Array、Boolean。
  • React elements
  • Fragment
  • Portal

  注意：不能返回 undefined.

當shouldComponentUpdate()返回false時，不管state和props有沒有變化，這個方法都不執行。

示例：

render() {
  return (
    <div>{this.state.color}</div>
  );
}

• componentDidMount()

  componentDidMount()方法是在組件加載完後當即執行，也就是當該組件相關的dom節點插入到dom樹中時。該方法在組件生命中只執行一次。

  通常狀況，咱們會在這裏setState()根據props的值，也能夠從這裏調用接口，獲取服務端的數據，也能夠在這裏監聽websocket、setInterval等操做。

  注意：一些監聽須要在組件卸載時清理掉，不然會引發異常。

  示例：

  componentDidMount() {
    this.setState({color: this.props.color});
  }

  在線示例

推薦閱讀《React 手稿》