React/生命週期

每一個組件都包含「生命週期方法」，你能夠重寫這些方法，以便於在運行過程當中特定的階段執行這些方法。

掛載

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

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

更新

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

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

卸載

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

• componentWillUnmount()

錯誤處理

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

• setState()
• forceUpdate() 

 

詳解

render（）

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

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

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

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

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

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

---

 

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

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

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

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

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

---

componentDidMount()

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

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

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

---

componentDidUpdate(prevProps, prevState, snapshot)

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

當組件更新後，能夠在此處對 DOM 進行操做。若是你對更新先後的 props 進行了比較，也能夠選擇在此處進行網絡請求。（例如，當 props 未發生變化時，則不會執行網絡請求）。

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

若是組件實現了 getSnapshotBeforeUpdate() 生命週期（不經常使用），則它的返回值將做爲 componentDidUpdate() 的第三個參數 「snapshot」 參數傳遞。不然此參數將爲 undefined。

若是 shouldComponentUpdate() 返回值爲 false，則不會調用 componentDidUpdate()。

---

 會在組件卸載及銷燬以前直接調用。在此方法中執行必要的清理操做，例如，清除 timer，取消網絡請求或清除在  中建立的訂閱等。
 中不該調用 ，由於該組件將永遠不會從新渲染。組件實例卸載後，將永遠不會再掛載它。
css的隱藏並不會觸發，只有dom元素的銷燬纔會觸發componentWillUnmount()
componentWillUnmount()componentDidMount()componentWillUnmount()setState()

---

shouldComponentUpdate(nextProps, nextState)

根據  的返回值，判斷 React 組件的輸出是否受當前 state 或 props 更改的影響。默認行爲是 state 每次發生變化組件都會從新渲染。大部分狀況下，你應該遵循默認行爲。
當 props 或 state 發生變化時， 會在渲染執行以前被調用。返回值默認爲 true。首次渲染或使用  時不會調用該方法。
此方法僅做爲性能優化的方式而存在。不要企圖依靠此方法來「阻止」渲染，由於這可能會產生 bug。你應該考慮使用內置的  組件，而不是手動編寫 。 會對 props 和 state 進行淺層比較，並減小了跳過必要更新的可能性。
若是你必定要手動編寫此函數，能夠將  與  以及  與 進行比較，並返回  以告知 React 能夠跳過更新。請注意，返回  並不會阻止子組件在 state 更改時從新渲染。
咱們不建議在  中進行深層比較或使用 。這樣很是影響效率，且會損害性能。shouldComponentUpdate()shouldComponentUpdate()forceUpdate()PureComponentshouldComponentUpdate()PureComponentthis.propsnextPropsthis.statenextStatefalsefalseshouldComponentUpdate()JSON.stringify() 

 

---

  componentWillReceiveProps(nextProps)

該名稱將繼續使用至 React 17。

會在已掛載的組件接收新的 props 以前被調用。若是你須要更新狀態以響應 prop 更改（例如，重置它），你能夠比較 this.props 和 nextProps 並在此方法中使用 this.setState() 執行 state 轉換。

請注意，若是父組件致使組件從新渲染，即便 props 沒有更改，也會調用此方法。若是隻想處理更改，請確保進行當前值與變動值的比較。

 在掛載過程當中，React 不會針對初始 props 調用 UNSAFE_componentWillReceiveProps()。組件只會在組件的 props 更新時調用此方法。調用 this.setState() 一般不會觸發 UNSAFE_componentWillReceiveProps()。

---

 

componentWillUpdate(nextProps, nextState)

該名稱將繼續使用至 React 17。

當組件收到新的 props 或 state 時，會在渲染以前調用 componentWillUpdate()。使用此做爲在更新發生以前執行準備更新的機會。初始渲染不會調用此方法。
注意，你不能此方法中調用 this.setState()；在 componentWillUpdate() 返回以前，你也不該該執行任何其餘操做（例如，dispatch Redux 的 action）觸發對 React 組件的更新。
一般，此方法能夠替換爲 componentDidUpdate()。若是你在此方法中讀取 DOM 信息（例如，爲了保存滾動位置），則能夠將此邏輯移至 getSnapshotBeforeUpdate() 中。
componentWillUpdate()this.setState()componentWillUpdate()componentDidUpdate()getSnapshotBeforeUpdate()

---

static getDerivedStateFromProps(props, state)

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

---

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

---

static getDerivedStateFromError(error)

今生命週期會在後代組件拋出錯誤後被調用。 它將拋出的錯誤做爲參數，並返回一個值以更新 state

---

componentDidCatch(error, info)

今生命週期在後代組件拋出錯誤後被調用。 它接收兩個參數：

1. error —— 拋出的錯誤。
2. info —— 帶有 componentStack key 的對象，其中包含有關組件引起錯誤的棧信息。

componentDidCatch() 會在「提交」階段被調用，所以容許執行反作用。 它應該用於記錄錯誤之類的狀況