概述
就像 Android 開發(fā)中的 View 一樣，React Native（RN） 中的組件也有生命周期（Lifecycle）。所謂生命周期，就是一個對象從開始生成到最后消亡所經(jīng)歷的狀態(tài)涂身，理解生命周期，是合理開發(fā)的關(guān)鍵搓蚪。RN 組件的生命周期整理如下圖：
如圖蛤售，可以把組件生命周期大致分為三個階段：
第一階段：是組件第一次繪制階段，如圖中的上面虛線框內(nèi)妒潭，在這里完成了組件的加載和初始化悴能；
第二階段：是組件在運行和交互階段，如圖中左下角虛線框雳灾，這個階段組件可以處理用戶交互漠酿，或者接收事件更新界面；
第三階段：是組件卸載消亡的階段谎亩，如圖中右下角的虛線框中炒嘲，這里做一些組件的清理工作。
生命周期回調(diào)函數(shù)
下面來詳細介紹生命周期中的各回調(diào)函數(shù)匈庭。
getDefaultProps
在組件創(chuàng)建之前夫凸，會先調(diào)用getDefaultProps()，這是全局調(diào)用一次阱持，嚴格地來說夭拌，這不是組件的生命周期的一部分。在組件被創(chuàng)建并加載候衷咽，首先調(diào)用getInitialState()鸽扁，來初始化組件的狀態(tài)。
componentWillMount
然后镶骗，準備加載組件献烦，會調(diào)用componentWillMount()，其原型如下：
void componentWillMount()
這個函數(shù)調(diào)用時機是在組件創(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ù)之后，就進入了穩(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
當組件接收到新的屬性和狀態(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ù)走后面的更新流程。否者窗怒，則不更新映跟，直接進入等待狀態(tài)。
默認情況下扬虚，這個函數(shù)永遠返回true用來保證數(shù)據(jù)變化的時候 UI 能夠同步更新努隙。在大型項目中，你可以自己重載這個函數(shù)辜昵，通過檢查變化前后屬性和狀態(tài)荸镊，來決定 UI 是否需要更新，能有效提高應(yīng)用性能。
componentWillUpdate
如果組件狀態(tài)或者屬性改變躬存，并且上面的shouldComponentUpdate(...)返回為true张惹，就會開始準更新組件设捐，并調(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
當組件要被從界面上移除的時候唠帝，就會調(diào)用componentWillUnmount()屯掖，其函數(shù)原型如下：
void componentWillUnmount()
在這個函數(shù)中，可以做一些組件相關(guān)的清理工作襟衰，例如取消計時器贴铜、網(wǎng)絡(luò)請求等。
總結(jié)
到這里瀑晒，RN 的組件的完整的生命都介紹完了绍坝，在回頭來看一下前面的圖，就比較清晰了苔悦，把生命周期的回調(diào)函數(shù)總結(jié)成如下表格：
生命周期調(diào)用次數(shù)能否使用 setSate()
getDefaultProps1(全局調(diào)用一次)否
getInitialState1否
componentWillMount1是
render>=1否
componentDidMount1是
componentWillReceiveProps>=0是
shouldComponentUpdate>=0否
componentWillUpdate>=0否
componentDidUpdate>=0否
componentWillUnmount1否
