大家好扇住，我又來了春缕，這可能是春節(jié)之前我最后一次更新react，先祝大家春節(jié)快樂艘蹋，新的一年里步步高升锄贼。接下來進(jìn)入正題。

我站在大家的角度去想有可能我的更新進(jìn)度有點慢女阀，容我給大家解釋一下宅荤，我覺得其他的文章更新快一點還說得過去，但是像這種學(xué)術(shù)性的東西我還是需要細(xì)細(xì)探究并且把對的東西分享給大家比較好浸策，也不至于賺來討罵聲冯键。慢點希望大家能理解。上次我給大家建了一個簡單的DOM交互的拖拽事件庸汗，這次我再給大家更新一點在react中比較重要的部分那就是生命周期惫确。進(jìn)入正題：

react中的生命周期可以理解為這個組件從創(chuàng)建到掛載再到更新最后到卸載的過程，簡單點說就是這樣的。那樣的話這些過程轉(zhuǎn)化為編程語言的話怎么解釋呢改化？我給大家說一下：

生命周期圖解

看到這個圖解的時候我也是蠻頭大的昧诱，但是我們一步一步弄清楚之后就看起來沒那么麻煩了。

首先我們把組件的生命周期進(jìn)行大致的劃分：類調(diào)用所袁、實例化盏档、更新以及卸載。（先進(jìn)行理論解釋然后代碼演示）

類調(diào)用：（getDefaultProps）這個過程就在我們進(jìn)行組件創(chuàng)建的時候調(diào)用一次燥爷，也就是說無論創(chuàng)建多少個組件元素這個過程只會被調(diào)用一次.

實例化：這里面進(jìn)行很多個操作我一一解釋蜈亩，這個過程也是僅執(zhí)行一次，執(zhí)行完畢后組件會被渲染到DOM中前翎，特們包括：getInitialState稚配、componentWillMount、render以及componentDidMount（其中我們之前的demo中都包括到了只是現(xiàn)在才給大家講解）

更新：這個過程會在我們之前見過的this.state和this.props賦值期間執(zhí)行港华。

? ?this.state變更時：shouldComponentUpdate道川、componentWillUpdate、render立宜、componentDidUpdate函數(shù)會被執(zhí)行冒萄。

? ?this.props變更時：componentWillReceiveProps、shouldComponentUpdate橙数、componentWIllUpdate尊流、render、componentDidUpdate函數(shù)會被執(zhí)行灯帮。

卸載：（componentWillUnmount）這個過程會在組件被銷毀的時候被調(diào)用一次.

這就是對上面這個生命周期圖解的解釋大家有可能覺得更新的兩個狀態(tài)有點相似其實后者就是在接受參數(shù)變化的時候多加了一個將要接受參數(shù)的方法崖技。

這次我們的講解主要圍繞componentWillMount（組建創(chuàng)建之前）、componentDidMount（組建創(chuàng)建之后）钟哥、componentWillUpdate（組件更新之前）迎献、componentDidUpdate（組件更新之后）、componentWillUnmount（組件卸載之前）腻贰、componentReceiveProps（組件參數(shù)接受更新）進(jìn)行講解吁恍。

其實在我給大家講解實例之前我還做過一個時鐘的例子，在那個例子之中我們就用到了生命周期中的一個函數(shù)银受，在這里我就不賣關(guān)子了我直接把例子附上盡管如此我還是希望大家能順手敲一下來增加熟練度：

時鐘組件代碼

這其中用到的componentDidMount方法解決了一個問題就是我們在用定時器來進(jìn)行渲染的時候會遇到一個情況就是我們頁面加載的時候不是直接從當(dāng)前的時間開始走而是需要從一開始的0：0：0跳一下到當(dāng)前時間践盼，用原生的解決的辦法是在定時器之前先調(diào)用一次fn函數(shù)但是在這里是沒有用的鸦采，我們在這里很巧妙地用了componentDidMount來進(jìn)行解決宾巍，也就是說我們在組件掛載完成后立馬執(zhí)行一次fn函數(shù)這樣就不會出現(xiàn)跳的情況了。

說到這里我感覺大家應(yīng)該知道這些個方法的用處了渔伯，然后我們就用一個例子來讓大家看一下這些方法的執(zhí)行時間：

例子

這個例子就是展示了我們這兩個方法的執(zhí)行時間顶霞，一個是在即將渲染到界面的時候進(jìn)行調(diào)用另一個是在剛剛掛載到界面的時候進(jìn)行調(diào)用。

接下來我們展示一下即將卸載的執(zhí)行時機(jī)：

小例子

很簡單的點擊渲染然后可以在瀏覽器中查看到對應(yīng)的輸出：

剛渲染完

點擊切換渲染

這樣是不是很明確的就知道這些方法的執(zhí)行時機(jī)了呢？

下面我們就用一個新的例子來進(jìn)行對剩余的方法進(jìn)行講解选浑，但是這次我不多解釋我只上例子然后其余的希望大家能自己分析分析然后自己敲敲代碼實現(xiàn)一下看看是怎么回事蓝厌。

執(zhí)行時機(jī)demo

這次的例子中用了一個子組件與父組件的嵌套關(guān)系，后面會有例子講解古徒，但是大體也就是這樣拓提，萬箭不離其宗。

這樣我這次就講完了隧膘，我感覺這次講的看上去不多但是需要大家理解的比較多代态，希望能動起手來并且動起腦來跟隨我的講解進(jìn)行精簡的學(xué)習(xí)，基礎(chǔ)打好后面難得地方也就順過去了疹吃。

下期預(yù)告：列表創(chuàng)建以及react中的ajax交互