react 組件的生命週期 超簡版

　　組件從被建立到被銷燬的過程稱爲組件的 生命週期；

　　一般，組件的生命週期能夠被分爲三個階段：掛載階段、更新階段、卸載階段；

　　1、掛載階段

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

　　依次調用的生命週期方法有：

• • 　　constructor
  • 　　componentWillMount
  • 　　render
  • 　　componentDidMount

　　一、constructor　　　　

　　這是ES 6 class的構造方法，組件被建立時，會首先調用組件的構造方法。這個構造方法接收一個props參數，props是從父組件中傳入的屬性對象，若是父組件中沒有傳入屬性而組件自身定義了默認屬性，那麼這個props指向的就是組件的默認屬性。你必須在這個方法中首先調用super(props)才能保證props被傳入組件中。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會引發組件的從新渲染。

 

　　

　　2、更新階段

　　組件被掛載到DOM後，組件的props或state能夠引發組件更新。
　　props引發的組件更新，本質上是由渲染該組件的父組件引發的，也就是當父組件的render方法被調用時，組件會發生更新過程，這個時候， 組件props的值可能發生改變，也可能沒有改變，由於父組件可使用相同的對象或值爲組件的props賦值。可是，不管props是否改變，父組件render方法每一次調用，都會致使組件更新。State引發的組件更新， 是經過調用this.setState修改組件state來觸發的。組件更新階段。

　　依次調用的生命週期方法有：

• •       componentWillReceiveProps
  • 　　shouldComponentUpdate
  • 　　componentWillUpdate
  • 　   render
  •       componentDidUpdate

 　　一、componentWillReceiveProps(nextProps)　　　　

　　這個方法只在props引發的組件更新過程當中，纔會被調用。State引發的組件更新並不會觸發該方法的執行。方法的參數nextProps是父組件傳遞給當前組件的新的props。但如上文所述，父組件render方法的調用並不能保證傳遞給子組件的props發生變化，也就是說nextProps的值可能和子組件當前props的值相等，所以每每須要比較nextProps和this.props 來決定是否執行props發生變化後的邏輯，好比根據新的props調用this.setState觸發組件的從新渲染。

　　二、shouldComponentUpdate（nextProps, nextState）　　　

　　這個方法決定組件是否繼續執行更新過程。當方法返回true時（true也是這個方法的默認返回值），組件會繼續更新過程；當方法返回false 時，組件的更新過程中止，後續的componentWillUpdate、render、componentDidUpdate也不會再被調用。通常經過比較nextProps、nextState和組件當前的props、state決定這個方法的返回結果。這個方法能夠用來減小組件沒必要要的渲染，從而優化組件的性能。

　　三、componentWillUpdate（nextProps, nextState）　　　

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

　　四、componentDidUpdate（prevProps, prevState）　　　

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

 

　　2、卸載階段

　　組件從DOM中被卸載的過程;

　　依次調用的生命週期方法有：

• •       componentWillUnmount

 

 　　一、componentWillUnmount　　　　

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

 

 

　　敲黑板時間

　　　　關於組件的週期，看下來其實並無很複雜，react團隊已經作的很好了；

 

　　參考文本：

　　　　React+進階之路；(PS: 此書很棒，感謝巨人；)