對比版本：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