react生命週期

react生命週期和vue一樣也是三個階段：初始化==> 執行中 ==> 銷毀階段

類中的預設屬性是元件例項共享的，因為元件例項無法更改這個預設屬性，傳入後使用傳入的屬性，對預設屬性沒有破壞，所以可以共享，狀態則不然，需要為每乙個元件的例項掛載自己唯一的狀態

//父元件傳入的props屬性變化後執行，在這裡，新的屬性還沒有掛載到this上，傳入的引數props是最新的props

//可以根據變化後的屬性去更改自己的狀態，此時不會因為狀態的改變而去執行額外的鉤子函式
componentwillreceiveprops
(props,state)

//此時會接收兩個引數

//當屬性或者狀態變化後都會執行，需要返回true和false，預設返回true，控制是否執行下面的鉤子函式（是否重新渲染）
//this上的屬性和狀態還不是最新的，最新的需要從函式引數中取得，可以根據資料的變化來避免不必要的重新render
shouldcomponentupdate
(nextprops,nextstate)

注意：即使變化後的屬性和狀態和原來一樣，也算變化

​ 通常會在這裡做一些react效能優化，若變化前後的屬性和狀態一樣，則減少不必要的重新render

//此時最新的屬性和狀態依然沒有掛載到this上，相當於vue中的beforeupdate，不能更改資料，會造成死迴圈，可以做一些輸出、除錯、監測

componentwillupdate
(nextprops,nextstate)

//再次render

render()

//此時最新的props和state已經掛載到this上，而引數接收到的則是舊的props和state

componentdidupdate
(prevprops,prevstate)

###注意：

當資料（屬性或狀態）變化引起的元件重新渲染後執行，並且無論資料變化，只要重新render都會執行
在vue中如果我們想要等到某一條資料變化所引起的dom重新渲染完成後進行操作，我們不能在updated裡使用，因為updated不能分辨是資料變化，只能在watch中使用，但是watch監聽到的時候資料剛剛變化，還沒有rerender，所以需要使用nexttick
而在react中，我們沒有nexttick，但是componentdidupdate會接收到變化前的資料，我們就可以根據變化前的資料和變化後的資料進行判斷處理

React 生命週期 生命週期方法

生命週期 掛載 更新 解除安裝 元件被建立 執行初始化 並被掛載到dom中，完成元件的第一次渲染 constructor props getderivedstatefromprops props,state render componentdidmount 元件被建立時會首先呼叫元件的構造方法，接受...

react 生命週期

首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類，只呼叫一次，返回物件用於設定預設的props，對於引用值，會在例項中共享。2.getinitialstate 作用於元件的例項，在例項建立時呼叫一次，用於初始...

react生命週期

盜圖一張 第一次進入頁面列印結果 1 parent constructor 2 parent conponentwillmount 3 parent render 4 initial render constructor 5 componentwillmount 6 render 7 compone...