元件載入

當元件被例項化並且插入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 手稿》