快捷導(dǎo)航

React的生命周期詳解

更新時(shí)間：2022年06月28日 09:34:54 作者：小旭2021

React是用于構(gòu)建用戶界面的JavaScript庫(kù)。本文詳細(xì)講解了React的生命周期，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、React生命周期

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

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

初始化

1、getDefaultProps()

設(shè)置默認(rèn)的props，也可以用dufaultProps設(shè)置組件的默認(rèn)屬性.

2、getInitialState()

在使用es6的class語(yǔ)法時(shí)是沒有這個(gè)鉤子函數(shù)的，可以直接在constructor中定義this.state。此時(shí)可以訪問this.props

3、componentWillMount()

組件初始化時(shí)只調(diào)用，以后組件更新不調(diào)用，整個(gè)生命周期只調(diào)用一次，此時(shí)可以修改state。

在渲染前調(diào)用,在客戶端也在服務(wù)端。

4、 render()

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

5、componentDidMount()

組件渲染之后調(diào)用，只調(diào)用一次。

在第一次渲染后調(diào)用，只在客戶端。之后組件已經(jīng)生成了對(duì)應(yīng)的DOM結(jié)構(gòu)，可以通過this.getDOMNode()來進(jìn)行訪問。

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

更新

6、componentWillReceiveProps(nextProps)

組件初始化時(shí)不調(diào)用，組件接受新的props時(shí)調(diào)用。

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

在組件接收到一個(gè)新的 prop (更新后)時(shí)被調(diào)用。這個(gè)方法在初始化render時(shí)不會(huì)被調(diào)用。

7、shouldComponentUpdate(nextProps, nextState)

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

如果相同則返回false阻止更新，因?yàn)橄嗤膶傩誀顟B(tài)一定會(huì)生成相同的dom樹，這樣就不需要?jiǎng)?chuàng)造新的dom樹和舊的dom樹進(jìn)行diff算法對(duì)比，

節(jié)省大量性能，尤其是在dom結(jié)構(gòu)復(fù)雜的時(shí)候

返回一個(gè)布爾值。在組件接收到新的props或者state時(shí)被調(diào)用。

在初始化時(shí)或者使用forceUpdate時(shí)不被調(diào)用。

可以在你確認(rèn)不需要更新組件時(shí)使用。

8、componentWillUpdata(nextProps, nextState)

組件初始化時(shí)不調(diào)用，只有在組件將要更新時(shí)才調(diào)用，此時(shí)可以修改state

9、render()

組件渲染

10、componentDidUpdate()

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

卸載

11、componentWillUnmount()

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

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

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

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

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

不執(zhí)行的：根組件（ReactDOM.render在DOM上的組件）的componentWillReceiveProps（因?yàn)閴焊鶝]有父組件給傳遞props）

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

Mounting中為組件的掛載過程

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

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

props獨(dú)有

componentWillReceiveProps

觸發(fā)條件

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

props和states共有

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