React組件的生命周期

React 組件的生命周期根據廣義定義描述，可以分為mount、updating和unmount這幾個階段。當渲染后的組件需要更新時，我們會重新去渲染組件，直至卸載。下面是針對React16.4版本的一張組件生命周期圖（詳見網址 http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ ）：

下面分別對各個生命周期方法進行說明：

1. constructor方法

   方法簽名：constructor(props)

   作用：用於組件內部的state初始化、事件方法的綁定，

   注意事項：(1) 方法內的第一句應為 super(props) ，這樣可以避免構造方法后面的代碼使用this.props時出現undefined錯語

　　　　　（2）在構造方法內對state應直接進行賦值，而不應調用setState()方法

　　　　　  (3) 避免拷貝props到state中，而要用this.props.xxx , 否則當props發生變化時，state將不能得到及時更新

    示例：  

constructor(props) {
    super(props);
    this.state = {date: new Date()};
    this.stop = this.stop.bind(this);
    this.update = this.update.bind(this);
  }

 

2. getDerivedStateFromProps方法

    方法簽名：static getDerivedStateFromProps(props, state)

    作用：它允許組件根據props的變化而更新其內部state。如果要更新state，該方法必須返回新的state（稱之為派生state)，或者返回null代表不更新。這個生命周期方法在render方法執行之前被調用，當組件在mount和updating時都會執行該方法。

     注意事項：

              (1) 在組件的生命周期中，派生state應該謹慎使用，應當在滿足當props改變並符合一定的條件時再對state進行更新

　　　　(2) 當組件的setState方法和forceUpdate方法被調用時，也會觸發該生命周期方法。


     示例 ：

static getDerivedStateFromProps(props, state){
    var date = props.date;
    if(true)   //滿足一定條件 　　return {date: date} ;
}

 

3. shouldComponentUpdate方法

   簽名：shouldComponentUpdate(nextProps, nextState)

   作用：該生命周期方法決定當組件的props和state發生改變時，是否需要重新渲染組件。該方法默認情況下返回true，表示需要重新渲染，可以通過返回false阻止組件的向下的生命周期方法的執行。該生命周期方法應該僅作為性能優化的手段去使用，而避免用於其他用途。

   例如當父組件的props發生變化時，我們希望只是重新渲染受影響的一部分節點，如下圖：

    

   注意事項：

          （1）當組件的props發生改變或者setState方法執行后會觸發該生命周期方法的調用。

          （2） 在組件的mount階段和forceUpdate()方法執行后，不會觸發該生命周期方法調用。

          （3）可以考慮讓組件繼承React.PureComponent,  其已經實現了React.PureComponent方法，不過它的實現是對當props和state和nextProps和nextState的淺層比較

 

4. getSnapshotBeforeUpdate方法

   簽名：getSnapshotBeforeUpdate(prevProps, prevState)

   作用：該方法在render方法之后，在render的輸出到DOM之前執行。在這個生命周期方內允許組件可以從DOM上捕獲一些信息（例如 scroll position），該方法返回的任何值都將作為參數（后稱快照值）傳遞給componentDidUpdate()生命周期方法。該方法要么返回一個快照值或者null 。

   示例：這個方法的使用場景，比如一個聊天窗口，當用戶發出新的聊天信息后，可能需要根據情況滾動窗口