RN組件的生命周期(Component Lifecycle)

在iOS中UIViewController提供了(void)viewWillAppear:(BOOL)animated,- (void)viewDidLoad,(void)viewWillDisappear:(BOOL)animated等生命周期方法,在Android中Activity則提供了onCreate(),onStart(),onResume(),onPause(),onStop(),onDestroy()等生命周期方法,這些生命周期方法展示了一個(gè)界面從創(chuàng)建到銷毀的一生。

那么在React 中組件(Component)也是有自己的生命周期方法的。

component-lifecycle.jpg

組件的生命周期分成三個(gè)狀態(tài):

Mounting:已插入真實(shí) DOM

Updating:正在被重新渲染

Unmounting:已移出真實(shí) DOM

心得:你會(huì)發(fā)現(xiàn)這些React 中組件(Component)的生命周期方法從寫(xiě)法上和iOS中UIViewController的生命周期方法很像,React 為每個(gè)狀態(tài)都提供了兩種處理函數(shù),will 函數(shù)在進(jìn)入狀態(tài)之前調(diào)用,did 函數(shù)在進(jìn)入狀態(tài)之后調(diào)用。

1、Mounting(裝載)

constructor():

在組件掛載之前調(diào)用一次。返回值將會(huì)作為 this.state 的初始值。

第一個(gè)語(yǔ)句必須是super(props)。

contructor將在任意一個(gè)RN組件被加載之前優(yōu)先調(diào)用,并且只會(huì)調(diào)用一次。

該函數(shù)最大的作用是定義該組件當(dāng)中需要使用的狀態(tài)機(jī)變量 。

componentWillMount

該函數(shù)原型為componentWillMount()

該函數(shù)整個(gè)過(guò)程中只執(zhí)行一次

該函數(shù)會(huì)在初始渲染前執(zhí)行,即在render被調(diào)用之前調(diào)用

該函數(shù)執(zhí)行后render就會(huì)調(diào)用。

如果在render中改變了某些狀態(tài)機(jī)變量,那么RN不會(huì)執(zhí)行渲染,而是等待該函數(shù)執(zhí)行完畢后再次渲染。

子組件中同樣擁有該方法,并會(huì)在父組件執(zhí)行完畢后執(zhí)行,該函數(shù)無(wú)返回值。

該函數(shù)適合于需要在本地讀取一些數(shù)據(jù)用于顯示,那么在render執(zhí)行前調(diào)用是一個(gè)很好的時(shí)機(jī)。

render(渲染函數(shù))

調(diào)用該方法,先對(duì)狀態(tài)機(jī)變量與屬性進(jìn)行檢查。

如果開(kāi)發(fā)者不想渲染界面的話,可以在此處返回null或者false。

該方法適用于進(jìn)行界面的JSX代碼編寫(xiě),因此不適合在此處對(duì)狀態(tài)機(jī)變量進(jìn)行修改或者訪問(wèn)服務(wù)器。

componentDidMount

該函數(shù)會(huì)在render渲染完畢之后調(diào)用,整個(gè)過(guò)程只執(zhí)行一次。

該函數(shù)執(zhí)行后,開(kāi)發(fā)者就可以對(duì)界面上的組件或者子組件進(jìn)行各種操作了。

該函數(shù)的應(yīng)用場(chǎng)景適用于在移動(dòng)端應(yīng)用啟動(dòng)之后需要訪問(wèn)網(wǎng)絡(luò)進(jìn)行某些數(shù)據(jù)獲取。

2、Updating (更新)

componentWillReceiveProps

該函數(shù)的原型為componentWillReceiveProps(nextProps);

當(dāng)props(屬性)發(fā)生改變或者接受到新的props時(shí),該函數(shù)被調(diào)用,并接受一個(gè)輸入?yún)?shù),類型為Object,存放新的props,原先反生改變的舊的props仍然可以通過(guò)this.props訪問(wèn)。

該函數(shù)在RN初次被渲染的時(shí)候不會(huì)被調(diào)用。

如果在該函數(shù)當(dāng)中對(duì)狀態(tài)機(jī)變量進(jìn)行了修改,RN不會(huì)立即渲染頁(yè)面,而是會(huì)等待該方法執(zhí)行完畢后一起渲染。

shouldComponentUpdate:(組件是否需要更新)

該函數(shù)原型 : boolean shouldComponentUpdate(nextProps,nextState);

當(dāng)props(屬性)或者狀態(tài)(state)發(fā)生改變的時(shí)候會(huì)觸發(fā)該函數(shù),分別對(duì)應(yīng)接收的兩個(gè)參數(shù),根據(jù)返回的布爾值來(lái)決定是否需要對(duì)頁(yè)面進(jìn)行重新渲染,如果不進(jìn)行渲染,那么該方法后續(xù)的componentWillUpdate與componentDidUpdate都不會(huì)被執(zhí)行。

該函數(shù)默認(rèn)會(huì)返回true。

應(yīng)用場(chǎng)景:可以在該函數(shù)中編寫(xiě)一些邏輯來(lái)判斷渲染類型,來(lái)阻值一些沒(méi)有必要的重新渲染,達(dá)到提升應(yīng)用運(yùn)行效率的目的。

componentWillUpdate

componentWillUpdate(object nextProps, object nextState):在接收到新的 props 或者 state 之前立刻調(diào)用。

該方法原型與上一方法相同,在重新渲染前會(huì)調(diào)用該方法,為渲染進(jìn)行準(zhǔn)備工作。

該函數(shù)無(wú)返回值。

注意:在該方法中,不應(yīng)該對(duì)狀態(tài)機(jī)變量進(jìn)行修改,要改變,也應(yīng)該在1.1.5當(dāng)中進(jìn)行。

componentDidUpdate

componentDidUpdate(object prevProps, object prevState):在組件的更新已經(jīng)同步到 DOM 中之后立刻被調(diào)用。

該函數(shù)會(huì)在重新渲染render之后調(diào)用,傳入上個(gè)方法必須的兩個(gè)參數(shù)即可。

3、Unmounting(移除)

componentWillUnmount

該方法會(huì)在RN卸載之前調(diào)用,無(wú)參無(wú)返回值,在該方法中,需要對(duì)該組件當(dāng)中申請(qǐng)或者訂閱的某些資源與消息進(jìn)行釋放。

在該方法中執(zhí)行任何必要的清理,比如無(wú)效的定時(shí)器,或者清除在 componentDidMount 中創(chuàng)建的 DOM 元素。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容