對比版本：16.4.0 VS 16.3.0 VS 16.2.0

發現最近幾次React版本更改比較大，在為17.0的大版本作準備。總結了一下React生命週期函式的變化。

綜合對比圖如下：

各版本分別如下：

各生命週期函式使用場景：

　　　1. Constructor(props)

　　　　　使用場景：初始化區域性State或把方法的控制代碼繫結到例項

　　　　　注意：第一個語句必須是super（props）

　　　2. GetDerivedStateFromProps(props,state)

　　　　　使用場景：內部state變化依賴於props時，

　　　　　注意：不要過度使用該函式。

　　　　　　　　如果你的操作依賴於props的更改並有副作用，最好放到ComponentDidUpdate中；

　　　　　　　　如果需要根據props的改變更新某些資料，最好使用memoization或Reselect做快取處理；

　　　　　　　　如果你想根據props的改變重置state的值，使用全受控元件或帶key的非受控元件，demo

　　　3. ComponentWillMount - Legacy

　　　　　使用場景：遺留函式，在16.3以後不應該再使用。

　　　　　注意：由於該函式在render之前呼叫，因此使用同步的setstate方法不會觸發額外的render處理。

　　　　　　　　儘量使用constructor函式實現同樣效果

　　　　　　　　如果是處理帶有後續操作或有副作用或訂閱事件的處理，放到ComponentDidMount中。

　　　4. componentWillReceiveProps(nextProps) - Legacy

　　　　　使用場景：遺留函式，在16.3以後不應該再使用。

　　　　　　　　　　元件將要接收新的props時被呼叫

　　　　　　　　　　當props改變需要相應改變內部state時使用該函式。　　　　　　　　　　

　　　　　注意：如果父元件強制子元件更新，即使props沒有改變也會呼叫該函式

　　　　　　　　總是比較this.props 和 nextProps來確認是否需要呼叫setState。　　　　

　　　5. shouldComponentUpdate(nextProps, nextState)

　　　　　　使用場景：效能優化介面

　　　　　　　　　　　通過比較this.props與nextProps， 和比較this.state 與 nextState 來返回false阻止元件render

　　　　　　注意：forceUpdate不會觸發該函式

　　　　　　　　　某些情況可以使用React.PureComponent替代寫該函式，參考Here

　　　　　　　　　返回false並不會阻止子元件的重新render(如果他們的state改變的時候)　　　　　　　　　

　　　6. ComponentWillUpdate(nextProps, nextState) - Legacy

　　　　　　使用場景：遺留函式，在16.3以後不應該再使用。

　　　　　　注意：不能在該函式中通過this.setstate再次改變state，如果需要，則在componentWillReceiveProps函式中改變

　　　7. Render

　　　　　使用場景：核心函式，必不可少。返回型別包括：react元素/陣列或程式碼片段/入口/字串或數字/bool或空。

　　　　　注意：不能在render函式中呼叫setState。

　　　　　　　　在存活週期中，如果shouldUpdateComponent返回false，該方法不會被呼叫。

　　　8. getSnapshotBeforeUpdate(prevProps, prevState)

　　　　　使用場景：該函式在最終render結果提交到DOM之前被呼叫

　　　　　　　　　　記錄DOM重新整理前的特性，如：滾動位置

　　　　　注意：該函式的返回值會作為引數傳遞給ComponentDidUpdate

　　　9. ComponentDidMount

　　　　　使用場景：真是DOM被更新之後呼叫

　　　　　　　　　　在建立元件週期，該函式是非同步請求的最佳介面，用以載入資料，AJAX/Fetch/redux-dispatch

　　　　　注意：這裡也是產生效能問題最多的地方(因程式碼問題)

　　　10. ComponentDidUpdate(prevProps, prevState, snapshot)

　　　　　使用場景：通過比較prevProps或prevState 與 this.props或this.state，進行業務處理，傳送網路請求

　　　　　注意：在處理業務或傳送網路請求時，一定要做條件比較，否則容易造成死迴圈

　　　11. ComponentWillUnmount

　　　　　使用場景：元件銷燬時呼叫

　　　　　　　　　　清理無效timer；取消未完成的網路請求；清理已註冊的訂閱

　　　　　注意：在這裡setState是無效的

　　　12. componentDidCatch()

　　　　　使用場景：任何子元件的JS錯誤或異常發生時觸發

　　　　　　　　　　 初始化週期和執行時週期的錯誤都會觸發該函式　　　　　　　　　　

　　　　　注意：只捕獲該元件的所有子元件異常，並不會捕獲本身的異常

　　　　　　　　在該函式中呼叫setState以實現錯誤回滾至前一頁面

　　　　　　　　不要使用該函式作為業務處理的一部分。

refs：

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

https://blog.csdn.net/zrcj0706/article/details/78608740