一、React生命周期

React 生命周期分為三種狀態(tài)

• 1. 初始化
• 2.更新
• 3.銷毀

初始化

1、getDefaultProps()

設置默認的props，也可以用dufaultProps設置組件的默認屬性.

2、getInitialState()

在使用es6的class語法時是沒有這個鉤子函數的，可以直接在constructor中定義this.state。此時可以訪問this.props

3、componentWillMount()

組件初始化時只調用，以后組件更新不調用，整個生命周期只調用一次，此時可以修改state。

在渲染前調用,在客戶端也在服務端。

4、 render()

react最重要的步驟，創(chuàng)建虛擬dom，進行diff算法，更新dom樹都在此進行。此時就不能更改state了。

5、componentDidMount()

組件渲染之后調用，只調用一次。

在第一次渲染后調用，只在客戶端。之后組件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問。

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

更新

6、componentWillReceiveProps(nextProps)

組件初始化時不調用，組件接受新的props時調用。

使用componentWillReceiveProps的時候，不要去向上分發(fā)，調用父組件的相關setState方法，否則會成為死循環(huán)

在組件接收到一個新的 prop (更新后)時被調用。這個方法在初始化render時不會被調用。

7、shouldComponentUpdate(nextProps, nextState)

react性能優(yōu)化非常重要的一環(huán)。組件接受新的state或者props時調用，我們可以設置在此對比前后兩個props和state是否相同，

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

節(jié)省大量性能，尤其是在dom結構復雜的時候

返回一個布爾值。在組件接收到新的props或者state時被調用。

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

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

8、componentWillUpdata(nextProps, nextState)

組件初始化時不調用，只有在組件將要更新時才調用，此時可以修改state

9、render()

組件渲染

10、componentDidUpdate()

組件初始化時不調用，組件更新完成后調用，此時可以獲取dom節(jié)點。

卸載

11、componentWillUnmount()

組件將要卸載時調用，一些事件監(jiān)聽和定時器需要在此時清除。

二、組件生命周期的執(zhí)行次數是什么樣子的

只執(zhí)行一次： constructor、componentWillMount、componentDidMount

執(zhí)行多次：render 、子組件的componentWillReceiveProps、componentWillUpdate、componentDidUpdate

有條件的執(zhí)行：componentWillUnmount（頁面離開，組件銷毀時）

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

三、React生命周期執(zhí)行順序

Mounting中為組件的掛載過程

• componentWillMount組件掛載之前
• render組件的渲染方法
• componentDidMount組件掛載完成執(zhí)行

Updation中為組件數據發(fā)生變化的過程

props獨有

componentWillReceiveProps 

觸發(fā)條件

• 1. 當一個組件從父組件接收了參數。
• 2.如果這個組件第一次被父組件加載的時候不會被執(zhí)行。
• 3.這個組件之前已經存在于父組件中，并且接收的數據發(fā)生變動這時此方法才會被觸發(fā)。  

props和states共有

• shouldComponentUpdata：是否要更新數據？需要一個返回值true繼續(xù)執(zhí)行下面的生命周期，false就會終止當前組件數  
• componentWillUpdate：組件將要更新
• render：組件的重新渲染
• componentDidUpdata：組件完成更新

Unmounting組件卸載

componentWillUnmount：組件銷毀的時候觸發(fā)

到此這篇關于React生命周期的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論