最近項目在使用React，所以準備寫一些關於react的博文，方便學習和鞏固。
本文將會詳細講述react的生命週期函數，react在v16版本後對生命週期函數進行了較大的更新，但大部分團隊不見得會跟進升到16版本，所以16前的生命週期還是很有必要掌握的，並且16版本也是基於之前的進行修改。
React v16.0前的生命週期函數
組件的初始化(initialization)階段
第一個階段可以稱爲是組件的初始化階段，在這個時候會執行constructor方法，constructor接收兩個參數props和content，可以獲得從父組件傳下來的props和context，如果你想在constructor構造函數內部使用props和context，則需要調用super方法。
調用super(props)方法將父組件的props注入給子組件，供子組件讀取(組件中props只讀不可變，state可變)，在constructor中可以做一些組件的初始化工作，如定義this.state的初始內容，也可以進行AJAX網路請求。
注意：在繼承類中的構造函數必須調用 super（...），並且在使用 this 之前執行它。
import React, { Component } from 'react';
class React extends Component {
constructor(props) {
super(props);
}
}
組件的掛載(Mounting)階段
此階段中有componentWillMount，render，componentDidMount三個函數
- componentWillMount：
它在組件掛載到DOM前調用，且只會被調用一次，在這個函數裏調用this.setState不會引起組件的死循環賦值，我們可以把寫在這裏邊的代碼提前到constructor()中，所以項目中很少用。所以在react v16.3版本中被移除了。
- render：
函數會返回一個符合JSX語法的react元素，用來描述一個UI組件，render不負責組件的實際渲染工作，之後由react自身根據此元素去渲染出頁面DOM。
它可以接受props和state來完成數據的渲染，react中所有的頁面刷新都是基於state的，也就是說只要state發生重傳遞、重賦值，無論值是否有變化，都會觸發組件的刷新。這就是react組件的更新機制。
render是一個純函數（Pure function：如果函數的調用參數相同，則永遠返回相同的結果。它不依賴於程序執行期間函數外部任何狀態或數據的變化，必須只依賴於其輸入參數）
注意：不能在render裏執行this.setState方法，不然會導致數據的死循環設置。
- componentDidMount：
組件掛載到DOM後調用，且只會被調用一次。在實際開發中,最適合在componentDidMount函數中去請求數據,其中最重要原因:使用componentDidMount第一個好處就是這個一定是在組件初始化完成之後,纔會請求數據,因此不會報什麼警告或者錯誤,我們正常請教數據完成之後一般都會執行this.setState，而在這裏不會造成數據設置死循環。
組件的更新(update)階段
此階段中有componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate，componentDidUpdate三個函數。
- componentWillReceiveProps(nextProps)
當從父組件傳入的props改變時，在引起組件更新之前會調用這個函數，它的參數nextProps是父組件傳給當前組件的新props。
但父組件的render方法被調用時，不能保證重新傳給當前組件的props是有變化的，所以可以在此方法中根據nextProps和this.props來判斷重傳的props是否改變，以及如果改變了要執行什麼東西，比如根據新的props調用this.setState觸發當前組件的重新render。
注意：官方不建議在此執行this.setState
- shouldComponentUpdate(nextProps, nextState)
此方法的兩個參數nextProps, nextState是將要改變的屬性、狀態的對象，它通過判斷當前的props、state和將要改變的props、state是否相同，來返回一個布爾值，當返回true時則繼續往下繼續執行組件更新過程，返回false則停止當前組件更新。在diff算法的 element diff 中，推薦使用此方法來減少組件的不必要渲染，優化組件性能。
注意：如果在componentWillReceiveProps方法中執行了this.setState，更新了state，但在render前（如shouldComponentUpdate，componentWillUpdate），this.state依然是指向更新前的state，不然nextState及當前組件的this.state的對比就一直是true了。
- componentWillUpdate(nextProps, nextState)
此方法接收的兩個參數仍然是是將要改變的屬性、狀態的對象，在這邊可執行一些組件更新發生前的工作，一般較少用到。
注意：不能在這個函數裏使用this.setState，不然會死循環設置數據，導致棧溢出。在react v16.3版本移除了此方法。
- componentDidUpdate(prevProps,prevState,snapshot)
此方法在組件更新後被調用，可以操作組件更新的DOM，prevProps和prevState這兩個參數指的是組件更新前的props和state。其中 snapshot 參數指的是在新版 react 生命週期函數中，從 getSnapshotBeforeUpdate 函數返回的值。
組件的卸載(unmouting)階段
此階段只有一個生命週期方法：componentWillUnmount
此方法在組件被卸載前調用，可以在這裏執行一些清理工作，比如清楚組件中使用的定時器，清楚componentDidMount中手動創建的DOM元素等，以避免引起內存泄漏。
參考資料：