Hello大家好吭练。大家可能會想問為什么最近公眾號不更新文章了，在這里說明一下析显。由于小編們近期工作和業(yè)務(wù)繁忙（我就不說是什么業(yè)務(wù)了鲫咽，哈哈哈哈），需要靜養(yǎng)谷异，最近都沒來得及更新文章分尸，希望大家理解見諒哈。這一期先由我來為大家奉上一篇歹嘹。
上一期為大家講解了一個ListView的實戰(zhàn)項目箩绍，包括怎么網(wǎng)絡(luò)請求，怎么解析數(shù)據(jù)荞下，怎么布局等等伶选，如果沒看過的可以去看鏈接。當(dāng)然沒看過也不影響這一期的學(xué)習(xí)尖昏。這一期主要帶大家了解RN組件的生命周期。好了构资，廢話不多說我們步入正題抽诉。
一.React-Native生命周期
說到生命周期，大家大概也能想到就是創(chuàng)建吐绵、銷毀迹淌、狀態(tài)改變。RN的組件就是一個狀態(tài)機(jī)己单。它接收兩個輸入?yún)?shù)：props和state唉窃，返回一個Virtual DOM。和Native一樣纹笼，RN也為我們提供相應(yīng)的鉤子函數(shù)纹份。RN的狀態(tài)變化取決于props和state。我們先來看一張經(jīng)典圖廷痘。
這張圖涵蓋了一個組件從創(chuàng)建蔓涧、運行到銷毀的整個過程。大家可以看到笋额，初始化的時候會調(diào)用5個函數(shù)（按先后順序）元暴。這5個函數(shù)在整個組件被創(chuàng)建到銷毀的過程中只調(diào)用一次。初始化完畢后兄猩，當(dāng)組件的props或者state改變都會觸發(fā)不同的鉤子函數(shù)茉盏，繼而引發(fā)組件的重新渲染〖矗現(xiàn)在我們把這過程拆開一點一點來分析。
初始化
我們先來看初始化鸠姨，在初始化的過程中铜秆，會按順序調(diào)用下面5個函數(shù)。
getDefaultProps：組件實例創(chuàng)建前調(diào)用享怀，多個實例間共享引用羽峰。注意：如果父組件傳遞過來的Props和你在該函數(shù)中定義的Props的key一樣，將會被覆蓋添瓷。
getInitalState:組件示例創(chuàng)建的時候調(diào)用的第一個函數(shù)梅屉。主要用于初始化state。注意：為了在使用中不出現(xiàn)空值鳞贷，建議初始化state的時候盡可能給每一個可能用到的值都賦一個初始值坯汤。
componentWillMount：在render前，getInitalState之后調(diào)用搀愧。僅調(diào)用一次惰聂，可以用于改變state操作。
render：組件渲染函數(shù)咱筛，會返回一個Virtual DOM搓幌，只允許返回一個最外層容器組件。render函數(shù)盡量保持純凈迅箩，只渲染組件溉愁，不修改狀態(tài)，不執(zhí)行副操作（比如計時器）饲趋。
componentDidMount:在render渲染之后拐揭，React會根據(jù)Virtual DOM來生成真實DOM，生成完畢后會調(diào)用該函數(shù)奕塑。在瀏覽器端（React）堂污，我們可以通過this.getDOMNode()來拿到相應(yīng)的DOM節(jié)點。然而我們在RN中并用不到龄砰，在RN中主要在該函數(shù)中執(zhí)行網(wǎng)絡(luò)請求盟猖，定時器開啟等相關(guān)操作
下面我們來演示getDefaultProps初始化Props以及父組件覆蓋問題（AppConnect和Provider是和redux相關(guān)的代碼，大家請?zhí)^這一行）:
比如我們在這里定義了SimpleApp的默認(rèn)Props為一個key為name,value為wsd的字典（ES6以后廢除了getDefaultProps而使用上述方式）寝贡，然后我們在它的父組件App中傳入一個同樣key為name的Props扒披，然后我們在SimpleApp中使用this.props.name把props打印出來，如下：
可以看到圃泡，原先的wsd被后面?zhèn)魅氲膋ingStart覆蓋了碟案。
然后我們來看初始化State的演示(ES6里使用constructor)：
我們初始化一個state為key為sex，value為boy的state對象颇蜡，然后我們在componentWillMount函數(shù)中改變已經(jīng)初始化的sex和沒有聲明的age价说，最后在render中打恿究鳌：
可以看到我們在render中打印出了state中兩個屬性的值。在這里我們需要注意的是鳖目，如果在componentWillMount中直接修改state的值不會引發(fā)render的再次渲染扮叨。而如果把修改state的操作放到在render執(zhí)行完之后的componentDidMount中，是會引發(fā)render的再次渲染的领迈。
運行中
初始化完成之后彻磁，組件將會進(jìn)入到運行中狀態(tài)，運行中狀態(tài)我們將會遇到如下幾個函數(shù)：
componentWillReceiveProps(nextProps)：props改變（父容器來更改或是redux）狸捅，將會調(diào)用該函數(shù)衷蜓。新的props將會作為參數(shù)傳遞進(jìn)來，老的props可以根據(jù)this.props來獲取尘喝。我們可以在該函數(shù)中對state作一些處理磁浇。注意：在該函數(shù)中更新state不會引起二次渲染。
boolean shouldComponentUpdate(object nextProps, object nextState)：該函數(shù)傳遞過來兩個參數(shù)朽褪，新的state和新的props置吓。state和props的改變都會調(diào)到該函數(shù)。該函數(shù)主要對傳遞過來的nextProps和nextState作判斷缔赠。如果返回true則重新渲染衍锚，如果返回false則不重新渲染。在某些特定條件下嗤堰，我們可以根據(jù)傳遞過來的props和state來選擇更新或者不更新构拳，從而提高效率。
componentWillUpdate(object nextProps, object nextState)：與componentWillMount方法類似梁棠，組件上會接收到新的props或者state渲染之前，調(diào)用該方法斗埂。但是不可以在該方法中更新state和props符糊。
render：跟初始化的時候功能一樣。
componentDidUpdate(object prevProps,object prevState):和初始化時期的componentDidMount類似呛凶，在render之后男娄，真實DOM生成之后調(diào)用該函數(shù)。傳遞過來的是當(dāng)前的props和state漾稀。在該函數(shù)中同樣可以使用this.getDOMNode()來拿到相應(yīng)的DOM節(jié)點模闲。如果你需要在運行中執(zhí)行某些副操作，請在該函數(shù)中完成崭捍。
我們來演示componentWillReceiveProps的調(diào)用時機(jī)尸折，對于頂層組件，我們添加一個文本及一個點擊事件：
按鈕點擊以后殷蛇，我們將自身state的name屬性改變实夹，并傳遞給SimpleApp（這里的AppConnect就是SimpleApp）橄浓，結(jié)果如下：
我們可以看到，第一次render亮航，打印的是defaultProps傳過來的props荸实。當(dāng)按鈕點擊，頂層組件state改變缴淋，引發(fā)頂層組件重新渲染准给，父組件傳遞的name發(fā)生改變，componentWillReceiveProps被調(diào)用重抖，繼而引發(fā)二次渲染露氮。在第二次render的時候，打印出來的就是新傳遞過來的props仇哆。
銷毀
銷毀階段只有一個函數(shù)沦辙，很簡單
componentWillUnmount：組件DOM中移除的時候調(diào)用。在這里進(jìn)行一些相關(guān)的銷毀操作讹剔，比如定時器油讯，監(jiān)聽等等。
為了加深記憶延欠，我們把初始化和運行中所有的鉤子函數(shù)寫出來陌兑，讓大家看看最終的運行結(jié)果。
我們首先初始化組件由捎，不執(zhí)行任何操作兔综，打印結(jié)果如圖所示：
當(dāng)我們點擊按鈕，改變組件的props之后狞玛，打印結(jié)果如下：
我們給自身組件添加了一個點擊事件软驰，點擊之后改變自身的state，如下：
點擊之后心肪，再來看調(diào)用結(jié)果：
這也印證了我們的結(jié)論
二.props和state
上面講完了生命周期锭亏，我們對props和state的不同點以及相同點作一個總結(jié)，加深大家理解硬鞍。
相同點
1.不管是props還是state的改變慧瘤，都會引發(fā)render的重新渲染。
2.都能由自身組件的相應(yīng)初始化函數(shù)設(shè)定初始值固该。
不同點
1.初始值來源：state的初始值來自于自身的getInitalState（constructor）函數(shù)锅减；props來自于父組件或者自身getDefaultProps（若key相同前者可覆蓋后者）。
2.修改方式：state只能在自身組件中setState伐坏，不能由父組件修改怔匣；props只能由父組件修改，不能在自身組件修改著淆。
3.對子組件：props是一個父組件傳遞給子組件的數(shù)據(jù)流劫狠，這個數(shù)據(jù)流可以一直傳遞到子孫組件拴疤；state代表的是一個組件內(nèi)部自身的狀態(tài)，只能在自身組件中存在独泞。
以上總結(jié)盜用本站另一位小編的圖來解釋O(∩_∩)O~：
本章結(jié)束呐矾。打廣告打廣告了，喜歡全棧開發(fā)的猿友們懦砂，請不要忘記動手掃一掃下面的二維碼關(guān)注我們喲O(∩_∩)O~蜒犯。我們會繼續(xù)不定期推出有關(guān)于全棧的相關(guān)文章，敬請期待荞膘。
