React Native組件的生命周期
可以說整個React Native應(yīng)用是由各種類型的組件構(gòu)成讯壶。而每個組件都有其各自的生命周期唱凯。組件由初生到消亡湿痢，React Native框架通過不同的生命周期方法慕爬，為我們提供了方便切入組件生命周期的鉤子膀斋，讓我們可以在正確的時間點做正確的事情似将。
當應(yīng)用啟動获黔，React Native框架在內(nèi)存中維護著一個虛擬DOM樹。所謂組件的生命周期即由組件初始化并掛載到虛擬DOM為起始在验，到組件由虛擬DOM卸載為終結(jié)玷氏，組件的不同狀態(tài)。生命周期方法則是組件在虛擬DOM樹不同狀態(tài)的描述腋舌。
理解組件的生命周期方法是理解組件生命周期的關(guān)鍵盏触，現(xiàn)在就讓我們來詳細探究組件的生命周期方法。
生命周期方法
組件的生命周期方法對應(yīng)著組件的不同生命階段块饺，通常我們分為三個階段：組件初始化及掛載階段赞辩、組件運行期階段及組件卸載階段。
- 初始化及掛載階段
一授艰、這是組件類的構(gòu)造函數(shù)辨嗽，通常在此初始化state數(shù)據(jù)模型。
constructor(props) {
super(props);
this.state = {
//key : value
};
}
二淮腾、表示組件將要加載到虛擬DOM糟需，在render方法之前執(zhí)行，整個生命周期只執(zhí)行一次谷朝。
componentWillMount() {
}
三洲押、表示組件已經(jīng)加載到虛擬DOM，在render方法之后執(zhí)行圆凰，整個生命周期只執(zhí)行一次杈帐。通常在該方法中完成異步網(wǎng)絡(luò)請求或者集成其他JavaScript庫。
componentDidMount() {
}
- 運行期階段
一送朱、在組件接收到其父組件傳遞的props的時候執(zhí)行,參數(shù)為父組件傳遞的props娘荡。在組件的整個生命周期可以多次執(zhí)行。通常在此方法接收新的props值驶沼，重新設(shè)置state炮沐。
componentWillReceiveProps(nextProps) {
this.setState({
//key : value
});
}
二、在componentWillReceiveProps(nextProps)執(zhí)行之后立刻執(zhí)行回怜；或者在state更改之后立刻執(zhí)行大年。該方法包含兩個參數(shù)换薄，分別是props和state。該方法在組件的整個生命周期可以多次執(zhí)行翔试。如果該方法返回false轻要，則componentWillUpdate(nextProps, nextState)及其之后執(zhí)行的方法都不會執(zhí)行，組件則不會進行重新渲染垦缅。
shouldComponentUpdate(nextProps, nextState) {
return true;
}
二冲泥、在shouldComponentUpdate(nextProps, nextState)函數(shù)執(zhí)行完畢之后立刻調(diào)用，該方法包含兩個參數(shù)壁涎，分別是props和state凡恍。render()函數(shù)執(zhí)行之前調(diào)用。該方法在組件的整個生命周期可以多次執(zhí)行怔球。
componentWillUpdate(nextProps, nextState) {
}
三嚼酝、在render()方法執(zhí)行之后立刻調(diào)用。該方法包含兩個參數(shù)竟坛，分別是props和state闽巩。該方法在組件的整個生命周期可以多次執(zhí)行。
componentDidUpdate(preProps, preState) {
}
四担汤、render方法用于渲染組件涎跨。在初始化階段和運行期階段都會執(zhí)行。
render() {
return(
<View/>
);
}
- 卸載階段
一漫试、在組件由虛擬DOM卸載的時候調(diào)用六敬。
componentWillUnmount() {
}
生命周期方法的執(zhí)行流
下面我們通過實例來演示上述生命周期方法在整個React Native應(yīng)用具體的執(zhí)行流程，讓大家對React Native應(yīng)用數(shù)據(jù)流動以及組件的渲染過程有更加清晰的認識驾荣。
初始化組件
現(xiàn)在我們來初始化一個名為itemView的組件，觀察哪些生命周期方法會在組件初始化的時候執(zhí)行以及它們的執(zhí)行順序普泡。
上圖點擊創(chuàng)建View的button播掷，會初始化一個View組件在屏幕上，然后切換到控制臺可以看到組件在初始化的時候方法的執(zhí)行順序撼班。
如圖歧匈，可以看到在初始化itemView的時候，依次調(diào)用constructor砰嘁、componentWillMount件炉、render和componentDidMount，而其他方法則不會調(diào)用矮湘。
卸載組件
現(xiàn)在我們刪除剛才創(chuàng)建的itemView斟冕，觀察哪些方法會執(zhí)行。
如圖缅阳，可以看到只有componentWillUnmount方法會執(zhí)行磕蛇。通常在該方法清理定時器或者監(jiān)聽。
更改state
我們在itemView內(nèi)部設(shè)置一個定時器，過5秒自動更改state的item屬性的值為'reRender'秀撇，觀察哪些方法執(zhí)行超棺。
this.timer = setTimeout(() => {
this.setState({
item:'reRender'
});
}, 5000);
如圖，shouldComponentUpdate呵燕、componentWillUpdate棠绘、render和componentDidUpdate執(zhí)行。并且itemView的propsr仍然是初始化時候的值create再扭，而state則改變?yōu)?code>reRender弄唧。
傳遞props
最后，我們由父組件向itemView傳遞props霍衫，值為reset候引。
如圖，可以看到當父組件向子組件傳遞props的時候敦跌，componentWillReceiveProps會被調(diào)用澄干，并且輸出傳遞的props的值。
以上就是組件的生命周期方法在不同的情況下的執(zhí)行流程柠傍。上面的情況已經(jīng)基本包括React Native應(yīng)用組件活動的全部狀態(tài)麸俘。
生命周期方法的完整流程圖
下圖是組件的生命周期方法完整的流程，通過這張圖以及上面的解釋惧笛，我們可以對生命周期方法有一個完整的認識从媚。
理解組件的生命周期不僅能夠幫助我們更好的運用組件構(gòu)建應(yīng)用，更是優(yōu)化React Native應(yīng)用組件渲染性能的關(guān)鍵患整，希望通過本文拋磚引玉拜效，希望大家能夠?qū)M件的生命周期有更深入的理解。
