React Native 中組件的生命周期
轉(zhuǎn)載自：http://www.race604.com/react-native-component-lifecycle/?utm_source=tuicool&utm_medium=referral
28 OCTOBER 2015 on React-Native, Android
概述
就像 Android 開發(fā)中的 View 一樣刊殉，React Native（RN） 中的組件也有生命周期（Lifecycle）。所謂生命周期州胳，就是一個(gè)對(duì)象從開始生成到最后消亡所經(jīng)歷的狀態(tài)记焊，理解生命周期，是合理開發(fā)的關(guān)鍵栓撞。RN 組件的生命周期整理如下圖：
3-3-component-lifecycle
如圖遍膜，可以把組件生命周期大致分為三個(gè)階段：
第一階段：是組件第一次繪制階段，如圖中的上面虛線框內(nèi)瓤湘，在這里完成了組件的加載和初始化瓢颅；
第二階段：是組件在運(yùn)行和交互階段，如圖中左下角虛線框弛说，這個(gè)階段組件可以處理用戶交互挽懦，或者接收事件更新界面；
第三階段：是組件卸載消亡的階段木人，如圖中右下角的虛線框中信柿，這里做一些組件的清理工作。
生命周期回調(diào)函數(shù)
下面來詳細(xì)介紹生命周期中的各回調(diào)函數(shù)醒第。
getDefaultProps
在組件創(chuàng)建之前渔嚷，會(huì)先調(diào)用 getDefaultProps()，這是全局調(diào)用一次稠曼，嚴(yán)格地來說形病，這不是組件的生命周期的一部分。在組件被創(chuàng)建并加載候，首先調(diào)用 getInitialState()窒朋，來初始化組件的狀態(tài)搀罢。
componentWillMount
然后，準(zhǔn)備加載組件侥猩，會(huì)調(diào)用 componentWillMount()榔至，其原型如下：
void componentWillMount()
這個(gè)函數(shù)調(diào)用時(shí)機(jī)是在組件創(chuàng)建，并初始化了狀態(tài)之后欺劳，在第一次繪制 render() 之前唧取。可以在這里做一些業(yè)務(wù)初始化操作划提，也可以設(shè)置組件狀態(tài)枫弟。這個(gè)函數(shù)在整個(gè)生命周期中只被調(diào)用一次。
componentDidMount
在組件第一次繪制之后鹏往，會(huì)調(diào)用 componentDidMount()淡诗，通知組件已經(jīng)加載完成。函數(shù)原型如下：
void componentDidMount()
這個(gè)函數(shù)調(diào)用的時(shí)候伊履，其虛擬 DOM 已經(jīng)構(gòu)建完成韩容，你可以在這個(gè)函數(shù)開始獲取其中的元素或者子組件了。需要注意的是唐瀑，RN 框架是先調(diào)用子組件的 componentDidMount()群凶，然后調(diào)用父組件的函數(shù)。從這個(gè)函數(shù)開始哄辣，就可以和 JS 其他框架交互了请梢，例如設(shè)置計(jì)時(shí) setTimeout 或者 setInterval，或者發(fā)起網(wǎng)絡(luò)請(qǐng)求力穗。這個(gè)函數(shù)也是只被調(diào)用一次毅弧。這個(gè)函數(shù)之后，就進(jìn)入了穩(wěn)定運(yùn)行狀態(tài)当窗，等待事件觸發(fā)形真。
componentWillReceiveProps
如果組件收到新的屬性（props），就會(huì)調(diào)用 componentWillReceiveProps()超全，其原型如下：
void componentWillReceiveProps(
object nextProps
)
輸入?yún)?shù) nextProps 是即將被設(shè)置的屬性咆霜，舊的屬性還是可以通過 this.props 來獲取。在這個(gè)回調(diào)函數(shù)里面嘶朱，你可以根據(jù)屬性的變化蛾坯，通過調(diào)用 this.setState() 來更新你的組件狀態(tài)，這里調(diào)用更新狀態(tài)是安全的疏遏，并不會(huì)觸發(fā)額外的 render() 調(diào)用脉课。如下：
componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
shouldComponentUpdate
當(dāng)組件接收到新的屬性和狀態(tài)改變的話救军，都會(huì)觸發(fā)調(diào)用 shouldComponentUpdate(...)，函數(shù)原型如下：
boolean shouldComponentUpdate(
object nextProps, object nextState
)
輸入?yún)?shù) nextProps 和上面的 componentWillReceiveProps 函數(shù)一樣倘零，nextState 表示組件即將更新的狀態(tài)值唱遭。這個(gè)函數(shù)的返回值決定是否需要更新組件，如果 true 表示需要更新呈驶，繼續(xù)走后面的更新流程拷泽。否者，則不更新袖瞻，直接進(jìn)入等待狀態(tài)司致。
默認(rèn)情況下，這個(gè)函數(shù)永遠(yuǎn)返回 true 用來保證數(shù)據(jù)變化的時(shí)候 UI 能夠同步更新聋迎。在大型項(xiàng)目中脂矫，你可以自己重載這個(gè)函數(shù)，通過檢查變化前后屬性和狀態(tài)霉晕，來決定 UI 是否需要更新庭再，能有效提高應(yīng)用性能。
componentWillUpdate
如果組件狀態(tài)或者屬性改變牺堰，并且上面的 shouldComponentUpdate(...) 返回為 true拄轻，就會(huì)開始準(zhǔn)更新組件，并調(diào)用 componentWillUpdate()萌焰，其函數(shù)原型如下：
void componentWillUpdate(
object nextProps, object nextState
)
輸入?yún)?shù)與 shouldComponentUpdate 一樣哺眯，在這個(gè)回調(diào)中谷浅，可以做一些在更新界面之前要做的事情扒俯。需要特別注意的是，在這個(gè)函數(shù)里面一疯，你就不能使用 this.setState 來修改狀態(tài)撼玄。這個(gè)函數(shù)調(diào)用之后，就會(huì)把 nextProps 和 nextState 分別設(shè)置到 this.props 和 this.state 中墩邀。緊接著這個(gè)函數(shù)掌猛，就會(huì)調(diào)用 render() 來更新界面了。
componentDidUpdate
調(diào)用了 render() 更新完成界面之后眉睹，會(huì)調(diào)用 componentDidUpdate() 來得到通知荔茬，其函數(shù)原型如下：
void componentDidUpdate(
object prevProps, object prevState
)
因?yàn)榈竭@里已經(jīng)完成了屬性和狀態(tài)的更新了，此函數(shù)的輸入?yún)?shù)變成了 prevProps 和 prevState竹海。
componentWillUnmount
當(dāng)組件要被從界面上移除的時(shí)候慕蔚，就會(huì)調(diào)用 componentWillUnmount()，其函數(shù)原型如下：
void componentWillUnmount()
在這個(gè)函數(shù)中斋配，可以做一些組件相關(guān)的清理工作孔飒，例如取消計(jì)時(shí)器灌闺、網(wǎng)絡(luò)請(qǐng)求等。
總結(jié)
到這里坏瞄，RN 的組件的完整的生命都介紹完了桂对，在回頭來看一下前面的圖，就比較清晰了鸠匀，把生命周期的回調(diào)函數(shù)總結(jié)成如下表格：
生命周期 調(diào)用次數(shù) 能否使用 setSate()
getDefaultProps 1(全局調(diào)用一次) 否
getInitialState 1 否
componentWillMount 1 是
render >=1 否
componentDidMount 1 是
componentWillReceiveProps >=0 是
shouldComponentUpdate >=0 否
componentWillUpdate >=0 否
componentDidUpdate >=0 否
componentWillUnmount 1 否
