概述
生命周期拾酝，就是一個對象從開始生成到最后消亡所經(jīng)歷的狀態(tài)组去，理解生命周期爷抓，是合理開發(fā)的關(guān)鍵势决。RN 組件的生命周期整理如下圖：
如圖，可以把組件生命周期大致分為三個階段：
第一階段：是組件第一次繪制階段蓝撇，如圖中的上面虛線框內(nèi)果复，在這里完成了組件的加載和初始化；
第二階段：是組件在運行和交互階段渤昌，如圖中左下角虛線框据悔，這個階段組件可以處理用戶交互传透，或者接收事件更新界面；
第三階段：是組件卸載消亡的階段极颓，如圖中右下角的虛線框中朱盐，這里做一些組件的清理工作。
生命周期回調(diào)函數(shù)
下面來詳細(xì)介紹生命周期中的各回調(diào)函數(shù)菠隆。
getDefaultProps
在組件創(chuàng)建之前兵琳，會先調(diào)用getDefaultProps()，這是全局調(diào)用一次骇径，嚴(yán)格地來說躯肌，這不是組件的生命周期的一部分。在組件被創(chuàng)建并加載候破衔，首先調(diào)用getInitialState()清女，來初始化組件的狀態(tài)。
componentWillMount
然后晰筛，準(zhǔn)備加載組件嫡丙，會調(diào)用componentWillMount()，其原型如下：
void componentWillMount()
這個函數(shù)調(diào)用時機(jī)是在組件創(chuàng)建读第，并初始化了狀態(tài)之后曙博，在第一次繪制render()之前×鳎可以在這里做一些業(yè)務(wù)初始化操作父泳，也可以設(shè)置組件狀態(tài)。這個函數(shù)在整個生命周期中只被調(diào)用一次吴汪。
componentDidMount
在組件第一次繪制之后惠窄，會調(diào)用componentDidMount()，通知組件已經(jīng)加載完成漾橙。函數(shù)原型如下：
void componentDidMount()
這個函數(shù)調(diào)用的時候睬捶，其虛擬 DOM 已經(jīng)構(gòu)建完成，你可以在這個函數(shù)開始獲取其中的元素或者子組件了近刘。需要注意的是擒贸，RN 框架是先調(diào)用子組件的componentDidMount()，然后調(diào)用父組件的函數(shù)觉渴。從這個函數(shù)開始介劫，就可以和 JS 其他框架交互了，例如設(shè)置計時setTimeout或者setInterval案淋，或者發(fā)起網(wǎng)絡(luò)請求座韵。這個函數(shù)也是只被調(diào)用一次。這個函數(shù)之后，就進(jìn)入了穩(wěn)定運行狀態(tài)誉碴，等待事件觸發(fā)宦棺。
componentWillReceiveProps
如果組件收到新的屬性（props），就會調(diào)用componentWillReceiveProps()黔帕，其原型如下：
void componentWillReceiveProps(
object nextProps
)
輸入?yún)?shù)nextProps是即將被設(shè)置的屬性代咸，舊的屬性還是可以通過this.props來獲取。在這個回調(diào)函數(shù)里面成黄，你可以根據(jù)屬性的變化呐芥，通過調(diào)用this.setState()來更新你的組件狀態(tài)，這里調(diào)用更新狀態(tài)是安全的奋岁，并不會觸發(fā)額外的render()調(diào)用思瘟。如下：
componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
shouldComponentUpdate
當(dāng)組件接收到新的屬性和狀態(tài)改變的話，都會觸發(fā)調(diào)用shouldComponentUpdate(...)闻伶，函數(shù)原型如下：
boolean shouldComponentUpdate(
object nextProps, object nextState
)
輸入?yún)?shù)nextProps和上面的componentWillReceiveProps函數(shù)一樣滨攻，nextState表示組件即將更新的狀態(tài)值。這個函數(shù)的返回值決定是否需要更新組件蓝翰，如果true表示需要更新光绕，繼續(xù)走后面的更新流程。否者霎箍，則不更新，直接進(jìn)入等待狀態(tài)澡为。
默認(rèn)情況下漂坏，這個函數(shù)永遠(yuǎn)返回true用來保證數(shù)據(jù)變化的時候 UI 能夠同步更新。在大型項目中媒至，你可以自己重載這個函數(shù)顶别，通過檢查變化前后屬性和狀態(tài)，來決定 UI 是否需要更新拒啰，能有效提高應(yīng)用性能驯绎。
componentWillUpdate
如果組件狀態(tài)或者屬性改變，并且上面的shouldComponentUpdate(...)返回為true谋旦，就會開始準(zhǔn)更新組件剩失，并調(diào)用componentWillUpdate()，其函數(shù)原型如下：
void componentWillUpdate(
object nextProps, object nextState
)
輸入?yún)?shù)與shouldComponentUpdate一樣册着，在這個回調(diào)中拴孤，可以做一些在更新界面之前要做的事情。需要特別注意的是甲捏，在這個函數(shù)里面演熟，你就不能使用this.setState來修改狀態(tài)。這個函數(shù)調(diào)用之后，就會把nextProps和nextState分別設(shè)置到this.props和this.state中芒粹。緊接著這個函數(shù)兄纺，就會調(diào)用render()來更新界面了。
componentDidUpdate
調(diào)用了render()更新完成界面之后化漆，會調(diào)用componentDidUpdate()來得到通知估脆，其函數(shù)原型如下：
void componentDidUpdate(
object prevProps, object prevState
)
因為到這里已經(jīng)完成了屬性和狀態(tài)的更新了，此函數(shù)的輸入?yún)?shù)變成了prevProps和prevState获三。
componentWillUnmount
當(dāng)組件要被從界面上移除的時候旁蔼，就會調(diào)用componentWillUnmount()，其函數(shù)原型如下：
void componentWillUnmount()
在這個函數(shù)中疙教，可以做一些組件相關(guān)的清理工作棺聊，例如取消計時器、網(wǎng)絡(luò)請求等贞谓。
總結(jié)
到這里限佩，RN 的組件的完整的生命都介紹完了，在回頭來看一下前面的圖裸弦，就比較清晰了祟同，把生命周期的回調(diào)函數(shù)總結(jié)成如下表格：
轉(zhuǎn)載至：https://race604.com/react-native-component-lifecycle/?utm_source=tuicool&utm_medium=referral
