元件的生命週期分成三個狀態
- Mounting：已插入真實 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真實 DOM
Mounting(裝載)
- getInitialState(): 在元件掛載之前呼叫一次。返回值將會作為 this.state 的初始值。
- componentWillMount()：伺服器端和客戶端都只呼叫一次，在初始化渲染執行之前立刻呼叫。不會觸發再次渲染。
- componentDidMount()：在初始化渲染執行之後立刻呼叫一次，僅客戶端有效（伺服器端不會呼叫）,可以設定state，會觸發再次渲染，元件內部可以通過
Updating (更新)
- componentWillReceiveProps(nextProps) 在元件接收到新的 props 的時候呼叫。在初始化渲染的時候，該方法不會呼叫。通常可以呼叫this.setState方法來比較this.props和nextProps的執行狀態，完成對state的修改。在該函式中呼叫 this.setState() 將不會引起第二次渲染。
- shouldComponentUpdate(nextProps,nextState): 在接收到新的 props 或者 state，將要渲染之前呼叫。該方法用來攔截新的props或state，然後判斷是否更新元件
該方法在初始化渲染的時候不會呼叫，在使用 forceUpdate 方法的時候也不會。如果確定新的 props 和 state 不會導致元件更新，則此處應該 返回 false。
- componentWillUpdate(nextProps, nextState)：在接收到新的 props 或者 state 之前立刻呼叫，即更新之前呼叫
在初始化渲染的時候該方法不會被呼叫。使用該方法做一些更新之前的準備工作。
注意：你不能在該方法中使用 this.setState()。如果需要更新 state 來響應某個 prop 的改變，請使用 componentWillReceiveProps。
- componentDidUpdate(prevProps, prevState): 在元件的更新已經同步到 DOM 中之後立刻被呼叫。
該方法不會在初始化渲染的時候呼叫。使用該方法可以在元件更新之後操作 DOM 元素。
Unmounting(移除)
- componentWillUnmount：在元件從 DOM 中移除的時候立刻被呼叫。
在該方法中執行任何必要的清理,收尾工作，比如無效的定時器，或者清除在 componentDidMount 中建立的 DOM 元素。
參考文章: