React組件的生命週期

組建從被建立到被銷燬的過程稱爲組件的生命週期。 React爲組件在不一樣的生命週期階段提供了不一樣的生命週期方法，可讓咱們在組件的生命週期過程當中更好的控制組件的行爲。一般生命週期咱們能夠分爲三個階段：
掛載階段 -> 更新階段 -> 卸載階段

掛載階段

此階段組件被建立，執行初始化，並被掛載到DOM中，完成組件第一次渲染。

constructor

constructor自己是ES6的class的構造方法，組件被建立時，會首先調用組件的構造方法。這個構造方法會接受一個props參數，props是從父組件傳過來的屬性對象，若是父組件沒有傳入屬性而組件自身定義了默認屬性，那麼這個props指向的就是組件的默認屬性。

並且很關鍵的是，你必須在這個方法中先調用super(props)才能保證props被傳入組件中，這部分具體的你們參照ES6中class相關內容就能夠了。

constructor一般用於初始化組件的state以及綁定事件處理函數等。

componentWillMount

該方法在組件被掛載到DOM前調用，且只會被調用一次。這個方法實際上不多被用到，相關階段的處理徹底能夠放到constructor中。

在這個方法中調用 this.setState不會引發組件的從新渲染。

render

該方法是組件定義時惟一必要的方法（組件的其餘生命週期函數均可以忽略）。在這個方法中，根據組件的props和state返回一個React元素，用於描述組件的UI，一般React元素使用JSX語法定義。
須要注意的是，render並不負責組件的實際渲染工做，它只是返回了一個UI的描述，真正的渲染出頁面DOM的工做是由React自身負責。
render是一個純函數，在這個方法中不能執行任何有‘反作用’的操做，因此不能在render方法中調用this.setState，這會改變組件的狀態，致使程序出現問題。

componentDidMount

在組件被掛載到DOM後將會調用這個方法，且只會被調用一次。這個時候已經能夠獲取到DOM結構，由於依賴DOM節點的操做能夠放到這個方法中。這個方法一般還會用於向服務器請求數據。在這個方法中調用this.setState會引發組件的從新渲染。

更新階段

組件被掛載到DOM後，組件的props和state能夠引發組件更新。props引發的組件更新，本質上是由渲染該組件的父組件引發的，也就是當父組件的render方法被調用時，組件會發生更新過程。這個時候，組件的props的值是否變動是由父組件來決定的，可是，不管props是否變化，父組件render方法每被調用一次，都會致使組件更新。

state引發的更新過程，是經過調用this.setState修改組件的state來觸發的。

componentWillReceiveProps(nextProps)

看名稱也能夠猜到，這個方法和props有關。這個方法只會在props引發的組件更新過程當中，纔會被調用。
State引發的組件更新並不會觸發該方法。方法的參數nextProps是父組件傳遞給當前組件的新的props。在前面咱們也提到過，父組件render方法的調用並不能保證傳遞給子組件的props發生變化，也就是說nextProps不必定發生變化，由於每每咱們須要先比較nextProps和this.props來決定是否執行props發生變化後的邏輯。好比根據新的props來更新state觸發組件的從新渲染。

在 componentWillReceiveProps中調用 setState，只有在組件 render及其以後的方法中， this.state指向的纔是更新後的 state。在 render以前的方法（ shouldComponentUpdate、 componentWillUpdate）中， this.state依然指向更新前的state

經過調用setState更新組件狀態並不會觸發componentWillReceiveProps的調用，不然可能會進入死循環，componentWillReceiveProps -> this.setState -> componentWillReceiveProps -> this.setState -> ……

shouldComponentUpdate(nextProps, nextState)

這個方法決定組件是否繼續執行更新過程。當方法返回true時（true也是這個方法的默認返回值），組件會繼續更新過程；當方法返回false時，組件的更新過程將中止，後續的componentWillUpdate、render、componentDidUpdate也不會被調用。

通常經過比較nextProps、nextState的組件當前的props、state決定這個方法的返回結果。這個方法能夠用來減小組件沒必要要的渲染，從而優化組件的性能。

componentWillUpdate(nextProps, nextState)

這個方法在組件render調用前執行，能夠做爲組件更新發生前執行某些工做的地方，通常也較少用到。

shouldComponentUpdate和 componentWillUpdate中都不能調用 setState，不然會引發循環調用問題， render永遠沒法被調用，組件也就不能被更新了。

componentDidUpdate(prevProps, prevState)

組件更新後調用，能夠做爲操做更新後的DOM的地方，這個方法的兩個參數prevProps和prevState表明組件更新前的props和state。

卸載階段

該過程是組件從DOM中被卸載的過程，該過程只有一個生命週期方法：componentWillUnmount

componentWillUnmount

這個方法在組件被卸載前調用，能夠在這裏執行一些清理工做，好比清除組件中使用的定時器，清除componentDidMount中手動建立的DOM元素等，以免引發內存泄露。

結語

上面咱們簡單梳理分析了React組件的生命週期方法的不一樣階段的執行過程，以及每一個生命週期方法的功能的做用。最後要提醒你們，只有類組件才具備生命週期方法，函數組件是沒有生命週期方法的。

---

參考資料：

React中文文檔《React進階之路》