10秒鐘理解react生命週期

慎點!這是一篇很水很水的文章, 抄自 react中文文檔, 本文詳細介紹了react生命週期函數執行順序, 以及各生命週期函數的含義和具體做用.

不一樣階段生命週期函數執行順序

掛載(Mounting)

掛載指的是組件被實例化並插入到dom中

順序以下:

constructor -> getDerivedStateFromProps -> render -> componentDidMount

更新(Updating)

當state變化或者props變化會引發更新

順序以下:

getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate

卸載

指的是組件被從dom移除

只會執行一個生命週期:

componentWillUnmount

總結

這張圖形象表示了不一樣階段生命週期函數執行順序.

各生命週期函數介紹

經常使用的生命週期

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 的狀況下，每次調用時都返回相同的結果，而且它不會直接與瀏覽器交互。

注意

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

constructor()

在 React 組件掛載以前，會調用它的構造函數。

一般，在 React 中，在構造函數中只作兩件事：

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

注意:

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

componentDidMount()

componentDidMount() 會在組件掛載後（插入 DOM 樹中）當即調用。

在這裏能夠

• setState
• 操做dom
• 發請求獲取初始數據

注意

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

componentDidUpdate(prevProps, prevState, snapshot)

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

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

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

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

componentWillUnmount()

componentWillUnmount() 會在組件卸載及銷燬以前直接調用。

在這裏能夠釋放資源, 好比清除定時器, removeEventListener

注意

這裏邊setState是無效的, 不該該調用

不經常使用的生命週期

shouldComponentUpdate(nextProps, nextState)

他的返回值能夠決定是否從新渲染, 當 props 或 state 發生變化時，shouldComponentUpdate() 會在渲染執行以前被調用。返回值默認爲 true。首次渲染或使用 forceUpdate() 時不會調用該方法。

這是一個性能優化的生命週期方法, 只有當你清楚的知道本身在作什麼的是使用

static getDerivedStateFromProps(props, state)

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

getSnapshotBeforeUpdate(prevProps, prevState)

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

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

與錯誤相關的生命週期

static getDerivedStateFromError()

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

注意

getDerivedStateFromError() 會在渲染階段調用，所以不容許出現反作用。 如遇此類狀況，請改用 componentDidCatch()。

componentDidCatch()

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

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

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