大家好，我又來(lái)了，這可能是春節(jié)之前我最后一次更新react，先祝大家春節(jié)快樂，新的一年里步步高升。接下來(lái)進(jìn)入正題。
我站在大家的角度去想有可能我的更新進(jìn)度有點(diǎn)慢，容我給大家解釋一下，我覺得其他的文章更新快一點(diǎn)還說(shuō)得過(guò)去，但是像這種學(xué)術(shù)性的東西我還是需要細(xì)細(xì)探究并且把對(duì)的東西分享給大家比較好，也不至于賺來(lái)討罵聲。慢點(diǎn)希望大家能理解。上次我給大家建了一個(gè)簡(jiǎn)單的DOM交互的拖拽事件，這次我再給大家更新一點(diǎn)在react中比較重要的部分那就是生命周期。進(jìn)入正題：
react中的生命周期可以理解為這個(gè)組件從創(chuàng)建到掛載再到更新最后到卸載的過(guò)程，簡(jiǎn)單點(diǎn)說(shuō)就是這樣的。那樣的話這些過(guò)程轉(zhuǎn)化為編程語(yǔ)言的話怎么解釋呢？我給大家說(shuō)一下：
看到這個(gè)圖解的時(shí)候我也是蠻頭大的，但是我們一步一步弄清楚之后就看起來(lái)沒那么麻煩了。
首先我們把組件的生命周期進(jìn)行大致的劃分：類調(diào)用、實(shí)例化、更新以及卸載。（先進(jìn)行理論解釋然后代碼演示）
類調(diào)用：（getDefaultProps）這個(gè)過(guò)程就在我們進(jìn)行組件創(chuàng)建的時(shí)候調(diào)用一次，也就是說(shuō)無(wú)論創(chuàng)建多少個(gè)組件元素這個(gè)過(guò)程只會(huì)被調(diào)用一次.
實(shí)例化：這里面進(jìn)行很多個(gè)操作我一一解釋，這個(gè)過(guò)程也是僅執(zhí)行一次，執(zhí)行完畢后組件會(huì)被渲染到DOM中，特們包括：getInitialState、componentWillMount、render以及componentDidMount（其中我們之前的demo中都包括到了只是現(xiàn)在才給大家講解）
更新：這個(gè)過(guò)程會(huì)在我們之前見過(guò)的this.state和this.props賦值期間執(zhí)行。
? ?this.state變更時(shí)：shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate函數(shù)會(huì)被執(zhí)行。
? ?this.props變更時(shí)：componentWillReceiveProps、shouldComponentUpdate、componentWIllUpdate、render、componentDidUpdate函數(shù)會(huì)被執(zhí)行。
卸載：（componentWillUnmount）這個(gè)過(guò)程會(huì)在組件被銷毀的時(shí)候被調(diào)用一次.
這就是對(duì)上面這個(gè)生命周期圖解的解釋大家有可能覺得更新的兩個(gè)狀態(tài)有點(diǎn)相似其實(shí)后者就是在接受參數(shù)變化的時(shí)候多加了一個(gè)將要接受參數(shù)的方法。
這次我們的講解主要圍繞componentWillMount（組建創(chuàng)建之前）、componentDidMount（組建創(chuàng)建之后）、componentWillUpdate（組件更新之前）、componentDidUpdate（組件更新之后）、componentWillUnmount（組件卸載之前）、componentReceiveProps（組件參數(shù)接受更新）進(jìn)行講解。
其實(shí)在我給大家講解實(shí)例之前我還做過(guò)一個(gè)時(shí)鐘的例子，在那個(gè)例子之中我們就用到了生命周期中的一個(gè)函數(shù)，在這里我就不賣關(guān)子了我直接把例子附上盡管如此我還是希望大家能順手敲一下來(lái)增加熟練度：
這其中用到的componentDidMount方法解決了一個(gè)問題就是我們?cè)谟枚〞r(shí)器來(lái)進(jìn)行渲染的時(shí)候會(huì)遇到一個(gè)情況就是我們頁(yè)面加載的時(shí)候不是直接從當(dāng)前的時(shí)間開始走而是需要從一開始的0：0：0跳一下到當(dāng)前時(shí)間，用原生的解決的辦法是在定時(shí)器之前先調(diào)用一次fn函數(shù)但是在這里是沒有用的，我們?cè)谶@里很巧妙地用了componentDidMount來(lái)進(jìn)行解決，也就是說(shuō)我們?cè)诮M件掛載完成后立馬執(zhí)行一次fn函數(shù)這樣就不會(huì)出現(xiàn)跳的情況了。
說(shuō)到這里我感覺大家應(yīng)該知道這些個(gè)方法的用處了，然后我們就用一個(gè)例子來(lái)讓大家看一下這些方法的執(zhí)行時(shí)間：
這個(gè)例子就是展示了我們這兩個(gè)方法的執(zhí)行時(shí)間，一個(gè)是在即將渲染到界面的時(shí)候進(jìn)行調(diào)用另一個(gè)是在剛剛掛載到界面的時(shí)候進(jìn)行調(diào)用。
接下來(lái)我們展示一下即將卸載的執(zhí)行時(shí)機(jī)：
很簡(jiǎn)單的點(diǎn)擊渲染然后可以在瀏覽器中查看到對(duì)應(yīng)的輸出：
這樣是不是很明確的就知道這些方法的執(zhí)行時(shí)機(jī)了呢？
下面我們就用一個(gè)新的例子來(lái)進(jìn)行對(duì)剩余的方法進(jìn)行講解，但是這次我不多解釋我只上例子然后其余的希望大家能自己分析分析然后自己敲敲代碼實(shí)現(xiàn)一下看看是怎么回事。
這次的例子中用了一個(gè)子組件與父組件的嵌套關(guān)系，后面會(huì)有例子講解，但是大體也就是這樣，萬(wàn)箭不離其宗。
這樣我這次就講完了，我感覺這次講的看上去不多但是需要大家理解的比較多，希望能動(dòng)起手來(lái)并且動(dòng)起腦來(lái)跟隨我的講解進(jìn)行精簡(jiǎn)的學(xué)習(xí)，基礎(chǔ)打好后面難得地方也就順過(guò)去了。
下期預(yù)告：列表創(chuàng)建以及react中的ajax交互
