元件的生命週期

概念：

1、在元件建立、載入到頁面上執行、以及元件被銷毀的過程中，總是伴隨著各種各樣的事件，這些在元件特定時期，觸發的事件，統稱為元件的生命週期。

2、元件生命週期的階段：

- 元件的建立階段

特點是：建立階段的生命週期函式在元件中，一生只執行一次。

》 componentwillmount:

1、在元件即將掛載到頁面上的時候，此時元件沒有掛載到頁面;

2、虛擬dom還沒有開始建立;此階段不能操作dom；

3、該鉤子函式相當於vue中的created鉤子函式

》 render:

1、將要開始渲染記憶體中的虛擬dom，當這個函式執行完了只有，記憶體中

就有了乙個渲染好的虛擬dom，但是頁面上尚未真正顯示dom元素；

2、在return 之前，虛擬dom還沒有開始建立，頁面上也是空的，根本拿

不到任何元素；

3、當return執行完畢後，虛擬dom已經建立好了，但是還沒有掛載到真正

的頁面中

》 componentdidmount:

1、當元件掛載到頁面上之後，會進入到這個生命週期函式，只要進入這個

生命週期函式，必然說明頁面上已經有可見的dom元素了；

2、在這個函式中，我們可以放心的去操作頁面上需要使用的dom元素了，

所以如果我們想操作dom元素，最早只能在componentdidmount中進行；

3、componentdidmount相當於vue中的mounted函式

- 元件的執行階段

特點是：根據元件的state和props的改變，有選擇性的觸發0次或多次。

》 componentwillreceiveprops:

1、元件將要接收外界傳遞過來的新的props屬性值

2、當子元件第一次被渲染到頁面上的時候，不會觸發這個函式

3、只有當父元件中，通過某些事件修改了傳遞給子元件的props資料之後，才會觸發這個函式

4、在componentwillreceiveprops被觸發的時候，如果我們使用this.props來獲取屬性值，此時不是最新的，是上一次舊的屬性值；如果想要獲取最新的屬性值，需要通過componentwillreceiveprops引數列表來獲取

》 shouldcomponentupdate:

1、元件是否需要被更新，此時組將尚未被更新，但是state和props肯定是最新的

2、在該鉤子函式中要求必須返回乙個布林值，若返回false，則不會繼續執行後續的生命週期函式，而是直接退回到了執行中的狀態，此時後續的 render函式並沒有被執行，因此頁面不回被更新，但是組建的state狀態卻被修改了

》 componentwillupdate:

1、元件將要更新，此時尚未更新，在進入這個生命週期函式的時候，記憶體中的虛擬dom是舊的，頁面上的dom元素也是舊的

2、此時頁面上的dom節點，都是舊的，應該慎重操作，因為可能操作的是舊dom

》 render: 此時又要重新根據新的state和props重新渲染一顆記憶體中的虛擬dom樹，當render呼叫完畢，記憶體中的舊dom樹已經被新dom樹替換了，此時頁面還是舊的。

》 componentdidupdate: 此時頁面又被重新渲染了，state和虛擬dom和頁面已經完全保持同步了

- 元件的銷毀階段

特點是：一生只執行一次。

》 componentwillunmount: 組建將要被解除安裝，此時組建還可以正常使用

元件生命週期的執行順序：

mounting：
constructor()
componentwillmount()
render()
componentdidmount()
updating：
componentwillreceiveprops(nextprops)
shouldcomponentupdate(nextprops, nextstate)
componentwillupdate(nextprops, nextstate)
render()
componentdidupdate(prevprops, prevstate)
unmounting：
componentwillunmount()

元件的生命週期

元件生命週期

元件生命週期

元件生命週期

相關推薦