React的生命週期詳解

2022-06-28 14:00:25

一、React生命週期

React 生命週期分為三種狀態

1. 初始化
2.更新
3.銷燬

初始化

1、getDefaultProps()

設定預設的props，也可以用dufaultProps設定元件的預設屬性.

2、getInitialState()

在使用es6的class語法時是沒有這個勾點函數的，可以直接在constructor中定義this.state。此時可以存取this.props

3、componentWillMount()

元件初始化時只呼叫，以後元件更新不呼叫，整個生命週期只呼叫一次，此時可以修改state。

在渲染前呼叫,在使用者端也在伺服器端。

4、 render()

react最重要的步驟，建立虛擬dom，進行diff演演算法，更新dom樹都在此進行。此時就不能更改state了。

5、componentDidMount()

元件渲染之後呼叫，只呼叫一次。

在第一次渲染後呼叫，只在使用者端。之後元件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行存取。

如果你想和其他JavaScript框架一起使用，可以在這個方法中呼叫setTimeout, setInterval或者傳送AJAX請求等操作(防止非同步操作阻塞UI)。

更新

6、componentWillReceiveProps(nextProps)

元件初始化時不呼叫，元件接受新的props時呼叫。

使用componentWillReceiveProps的時候，不要去向上分發，呼叫父元件的相關setState方法，否則會成為死迴圈

在元件接收到一個新的 prop (更新後)時被呼叫。這個方法在初始化render時不會被呼叫。

7、shouldComponentUpdate(nextProps, nextState)

react效能優化非常重要的一環。元件接受新的state或者props時呼叫，我們可以設定在此對比前後兩個props和state是否相同，

如果相同則返回false阻止更新，因為相同的屬性狀態一定會生成相同的dom樹，這樣就不需要創造新的dom樹和舊的dom樹進行diff演演算法對比，

節省大量效能，尤其是在dom結構複雜的時候

返回一個布林值。在元件接收到新的props或者state時被呼叫。

在初始化時或者使用forceUpdate時不被呼叫。

可以在你確認不需要更新元件時使用。

8、componentWillUpdata(nextProps, nextState)

元件初始化時不呼叫，只有在元件將要更新時才呼叫，此時可以修改state

9、render()

元件渲染

10、componentDidUpdate()

元件初始化時不呼叫，元件更新完成後呼叫，此時可以獲取dom節點。

解除安裝

11、componentWillUnmount()

元件將要解除安裝時呼叫，一些事件監聽和定時器需要在此時清除。

二、元件生命週期的執行次數是什麼樣子的

只執行一次： constructor、componentWillMount、componentDidMount

執行多次：render 、子元件的componentWillReceiveProps、componentWillUpdate、componentDidUpdate

有條件的執行：componentWillUnmount（頁面離開，元件銷燬時）

不執行的：根元件（ReactDOM.render在DOM上的元件）的componentWillReceiveProps（因為壓根沒有父元件給傳遞props）

三、React生命週期執行順序

Mounting中為元件的掛載過程

componentWillMount元件掛載之前
render元件的渲染方法
componentDidMount元件掛載完成執行

Updation中為元件資料發生變化的過程

props獨有

componentWillReceiveProps

觸發條件

1. 當一個元件從父元件接收了引數。
2.如果這個元件第一次被父元件載入的時候不會被執行。
3.這個元件之前已經存在於父元件中，並且接收的資料發生變動這時此方法才會被觸發。

props和states共有

shouldComponentUpdata：是否要更新資料？需要一個返回值true繼續執行下面的生命週期，false就會終止當前元件數
componentWillUpdate：元件將要更新
render：元件的重新渲染
componentDidUpdata：元件完成更新

Unmounting元件解除安裝

componentWillUnmount：元件銷燬的時候觸發

到此這篇關於React生命週期的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援it145.com。