React 元件生命週期 [筆記]

React 為 component (元件)提供了許多生命週期相關的方法

讓我們可以在 component 輸出前，輸出後，或者被消滅等狀態時，可以藉由這些方法來設計一些行為

一、Mounting

Mounting 就是，當元件被 instance 之後，準備要插入DOM時

底下就是在 Mounting 時會被觸發的方法

constructor() constructor 會在元件被mounted之前就被執行

componentWillMount()

componentWillMount 會在元件準備被 mounting 之前立刻被執行執行的時間會比 render()還要早

render()

render

componentDidMount()

當元件被mounted之後，會立刻被執行

如果有對於初始化的DOM相關的預設值或操作，都可以在這裡面設定

也可以在這裡面執行subscriptions，但是別忘了在 componentWillUnmount 進行 unsubscribe 處理

當改變元件 props、state 開始進行re-rendered，這時就會觸發相關的 Updating 方法:

componentWillReceiveProps()

componentWillReceiveProps() 是當元件接收到新的(更新) props 時，會被執行

如果需要在 props 變更時改變一些 state狀態，就可以在這裡處理

注意的是，在剛開始 init props 階段，並不會觸發 componentWillReceiveProps()

this.setState() 也不會觸發 componentWillReceiveProps()

shouldComponentUpdate()

shouldComponentUpdate() 可以在 re-rendering 之前進行邏輯判斷，並回傳一個布林值(true or false)

當回傳值是 true，就會照正常 re-render 方式變更元件，

如果回傳是 false，就不會變更元件

所以，可以在這裡面檢查 props或state的狀態，來決定是否需要繼續進行後續動作

(要留意，不要在 shouldComponentUpdate() 做太多深層的檢查或使用 JSON.stringify()，以避免造成效能上的問題)

componentWillUpdate()

當接收到新的 props 或 state，componentWillUpdate() 會在 re-rendering 之前立即被觸發

要注意的是，不能在這裡呼叫 this.setState()

也不應該在這裡面進行 dispatch Redux action，這樣會導致在componentWillUpdate 之前觸發另一個更新元件的動作

render()

re-render

componentDidUpdate()

當 re-rending 完成更新元件之後，就會立刻執行 componentDidUpdate()，

要特別留意的是，componentDidUpdate() 在初始執行階段不會被觸發，

以及當 shouldComponentUpdate() 返回 false 時，也不會被觸發

當我們從DOM刪除掉元件時，就會觸發該元件的 Unmounting 方法:

componentWillUnmount()

在元件被刪除"之前"，會立刻執行 componentWillUnmount()

它可以被用來解除一些時間綁定、中斷HTTP請求或者進行 unsubscribe 處理

在元件運作過程如果發生錯誤 (例如 render, 操作生命週期方法時, 子元件的 constructor 執行時)，就會觸發錯誤處理方法:

componentDidCatch()

附上一張圖，從圖中可以清楚了解整個 React 元件生命週期的觸發時間點

(圖， ReactJs lifecycle phases and methods by Mahesh Haldar)