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