React Component（生命週期）

RN 組件的生命週期以下圖：

 

生命週期回調函數

掛載

當組件實例被建立並插入 DOM 中時，其生命週期調用順序以下：

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

注意:

下述生命週期方法即將過期，在新代碼中應該避免使用它們：

• UNSAFE_componentWillMount()

更新

當組件的 props 或 state 發生變化時會觸發更新。組件更新的生命週期調用順序以下：

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

注意:

下述方法即將過期，在新代碼中應該避免使用它們：

• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()

卸載

當組件從 DOM 中移除時會調用以下方法：

• componentWillUnmount()

錯誤處理

當渲染過程，生命週期，或子組件的構造函數中拋出錯誤時，會調用以下方法：

• static getDerivedStateFromError()
• componentDidCatch()

 

經常使用的生命週期方法

一、render()

render() 方法是 class 組件中惟一必須實現的方法。

當 render 被調用時，它會檢查 this.props 和 this.state 的變化並返回如下類型之一：

• React 元素。一般經過 JSX 建立。例如，<div /> 會被 React 渲染爲 DOM 節點，<MyComponent /> 會被 React 渲染爲自定義組件，不管是 <div /> 仍是 <MyComponent /> 均爲 React 元素。
• 數組或 fragments。 使得 render 方法能夠返回多個元素。。
• Portals。能夠渲染子節點到不一樣的 DOM 子樹中。
• 字符串或數值類型。它們在 DOM 中會被渲染爲文本節點
• 布爾類型或 null。什麼都不渲染。（主要用於支持返回 test && <Child /> 的模式，其中 test 爲布爾類型。)

render() 函數應該爲純函數，這意味着在不修改組件 state 的狀況下，每次調用時都返回相同的結果，而且它不會直接與瀏覽器交互。

如需與瀏覽器進行交互，請在 componentDidMount() 或其餘生命週期方法中執行你的操做。保持 render() 爲純函數，可使組件更容易思考。

注意

若是 shouldComponentUpdate() 返回 false，則不會調用 render()。

二、constructor()

若是不初始化 state 或不進行方法綁定，則不須要爲 React 組件實現構造函數。

在 React 組件掛載以前，會調用它的構造函數。在爲 React.Component 子類實現構造函數時，應在其餘語句以前前調用 super(props)。不然，this.props 在構造函數中可能會出現未定義的 bug。

一般，在 React 中，構造函數僅用於如下兩種狀況：

• 經過給 this.state 賦值對象來初始化內部 state。
• 爲事件處理函數綁定實例

在 constructor() 函數中不要調用 setState() 方法。若是你的組件須要使用內部 state，請直接在構造函數中爲 this.state 賦值初始 state。

要避免在構造函數中引入任何反作用或訂閱。如遇到此場景，請將對應的操做放置在 componentDidMount 中

 

三、componentDidMount()

componentDidMount() 會在組件掛載後（插入 DOM 樹中）當即調用。依賴於 DOM 節點的初始化應該放在這裏。如需經過網絡請求獲取數據，此處是實例化請求的好地方。

這個方法是比較適合添加訂閱的地方。若是添加了訂閱，請不要忘記在 componentWillUnmount() 裏取消訂閱

你能夠在 componentDidMount() 裏直接調用 setState()。它將觸發額外渲染，但此渲染會發生在瀏覽器更新屏幕以前。如此保證了即便在 render() 兩次調用的狀況下，用戶也不會看到中間狀態。請謹慎使用該模式，由於它會致使性能問題。一般，你應該在 constructor() 中初始化 state。若是你的渲染依賴於 DOM 節點的大小或位置，好比實現 modals 和 tooltips 等狀況下，你可使用此方式處理

 

四、componentDidUpdate()

componentDidUpdate() 會在更新後會被當即調用。首次渲染不會執行此方法。

當組件更新後，能夠在此處對 DOM 進行操做。若是你對更新先後的 props 進行了比較，也能夠選擇在此處進行網絡請求。

componentDidUpdate(prevProps) {
  // 典型用法（不要忘記比較 props）：
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

 

你也能夠在 componentDidUpdate() 中直接調用 setState()，但請注意它必須被包裹在一個條件語句裏，正如上述的例子那樣進行處理，不然會致使死循環。它還會致使額外的從新渲染，雖然用戶不可見，但會影響組件性能。不要將 props 「鏡像」給 state，請考慮直接使用 props。

 

五、componentWillUnmount()

componentWillUnmount() 會在組件卸載及銷燬以前直接調用。在此方法中執行必要的清理操做，例如，清除 timer，取消網絡請求或清除在 componentDidMount() 中建立的訂閱等。

componentWillUnmount() 中不該調用 setState()，由於該組件將永遠不會從新渲染。組件實例卸載後，將永遠不會再掛載它。

 

不經常使用的生命週期方法

並不太經常使用。它們偶爾會很方便，可是大部分狀況下組件可能都不須要它們。

 

一、shouldComponentUpdate()

根據 shouldComponentUpdate() 的返回值，判斷 React 組件的輸出是否受當前 state 或 props 更改的影響。默認行爲是 state 每次發生變化組件都會從新渲染。

 

二、static getDerivedStateFromProps()

getDerivedStateFromProps 會在調用 render 方法以前調用，而且在初始掛載及後續更新時都會被調用。它應返回一個對象來更新 state，若是返回 null 則不更新任何內容。

此方法適用於 state 的值在任什麼時候候都取決於 props。

派生狀態會致使代碼冗餘，並使組件難以維護。 確保你已熟悉這些簡單的替代方案：

• 若是你須要執行反作用（例如，數據提取或動畫）以響應 props 中的更改，請改用 componentDidUpdate。
• 若是隻想在 prop 更改時從新計算某些數據，請使用 memoization helper 代替。
• 若是你想在 prop 更改時「重置」某些 state，請考慮使組件徹底受控或使用 key 使組件徹底不受控 代替。

三、getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate() 在最近一次渲染輸出（提交到 DOM 節點）以前調用。它使得組件能在發生更改以前從 DOM 中捕獲一些信息（例如，滾動位置）。今生命週期的任何返回值將做爲參數傳遞給 componentDidUpdate()。

此用法並不常見，但它可能出如今 UI 處理中，如須要以特殊方式處理滾動位置的聊天線程等。

應返回 snapshot 的值（或 null）。

 

Error boundaries

Error boundaries 是 React 組件，它會在其子組件樹中的任何位置捕獲 JavaScript 錯誤，並記錄這些錯誤，展現降級 UI 而不是崩潰的組件樹。Error boundaries 組件會捕獲在渲染期間，在生命週期方法以及其整個樹的構造函數中發生的錯誤。

若是 class 組件定義了生命週期方法 static getDerivedStateFromError() 或 componentDidCatch() 中的任何一個（或二者），它就成爲了 Error boundaries。經過生命週期更新 state 可以讓組件捕獲樹中未處理的 JavaScript 錯誤並展現降級 UI。

僅使用 Error boundaries 組件來從意外異常中恢復的狀況；不要將它們用於流程控制。

欲瞭解更多詳細信息，請參閱 React 16 中的錯誤處理。

注意

Error boundaries 僅捕獲組件樹中如下組件中的錯誤。但它自己的錯誤沒法捕獲。