在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 元素。