React 生命週期及使用場景

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