幫你理清React的生命週期

這是一個從 印記中文 | react官方文檔 提取總結的，算是幫本身理清而且強化記憶 React的生命週期，以便之後編寫組件的時候可以有更清晰的思路。 本文若有紕漏，歡迎指正

總體上來說，React生命週期分爲了 掛載（裝配） 、 更新 、 卸載 以及 捕錯 四個狀態階段。每種狀態裏須要執行若干個生命週期函數，這些函數可能會在不一樣的階段裏從新被調用。

用流程圖來形象地概括總結以下：

掛載（裝配）

這些方法會在組件實例建立和插入DOM中時被調用

1.constructor()

構造函數會在裝配前調用。

constructor(props){
    //...
}

2.static getDerivedStateFromProps()

組件實例化後和接受新屬性時調用，返回一個對象以更新狀態，或返回null代表不須要更新狀態

static getDerivedStateFromProps(nextProps,prevState)

3.componentWillMount()/UNSAFE_componentWillMount()

[UNSAFE_]componentWillMount()：裝配前馬上調用，發生在render()以前

17版前，這一輩子命周期函數名字均可以寫爲 componentWillMount()

4.render()

必須的鉤子函數，不該該改變組件的狀態，且不與瀏覽器交互

5.componentDidMount()

componentDidMount()：組件裝配後馬上調用，實現遠端網絡請求的地方

更新

屬性或狀態發生改變後，會觸發一次更新，組件從新渲染，下述方法會被調用。

1. componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()

在掛載了的組件接收到新屬性前調用。推薦使用getDerivedStateFromProps生命週期而不是該函數。

UNSAFE_componentWillReceiveProps(nextProps)

2. static getDerivedStateFromProps()

見掛載章節該鉤子

3. shouldComponentUpdate()

在掛載了的組件屬性變化和狀態變化時調用。經過控制返回的boolean值告訴React是否從新渲染該組件。

沒法控制子組件的從新渲染與否

4. componentWillUpdate() / UNSAFE_componentWillUpdate()

當接收到新屬性或狀態時，UNSAFE_componentWillUpdate()在渲染前被當即調用

UNSAFE_componentWillUpdate(nextProps, nextState)

注意

若shouldComponentUpdate()返回false，UNSAFE_componentWillUpdate()將不會被調用。

5. render()

見掛載章節該鉤子

6. getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate()在最新的渲染輸出提交給DOM前將會當即調用。它讓你的組件能在當前的值可能要改變前得到它們。這一輩子命週期返回的任何值將會做爲參數被傳遞給componentDidUpdate()。

getSnapshotBeforeUpdate(prevProps, prevState)

7. componentDidUpdate()

在更新發生後當即被調用。適合發送請求的地方

componentDidUpdate(prevProps, prevState)

卸載

1. componentWillUnmount()

componentWillUnmount()在組件被卸載和銷燬以前馬上調用。能夠在該方法裏處理任何須要的清理工做，例如解綁定時器，取消網絡請求，清理任何在componentDidMount環節建立的DOM元素。

錯誤處理

1. componentDidCatch()

錯誤邊界捕捉髮生在子組件樹中任意地方的JavaScript錯誤,一個錯誤邊界並不能捕捉它本身內部的錯誤。

componentDidCatch(error, info)