React生命週期

生命週期：元件從誕生到銷毀會經歷一系列的過程，該過程就叫做生命週期。react在元件的生命週期中提供了一系列的鉤子函式（類似於事件），可以讓開發者在函式中注入**，這些**會在適當的時候執行。

生命週期僅存在於類元件中，函式元件每次呼叫都是重新執行函式，舊的元件即刻被銷毀

react < 16.0.0

constructor

同乙個元件物件只會建立一次

不能在第一次掛載到頁面之前，呼叫setstate，為了避免問題，建構函式中嚴禁使用setstate

componentwillmount

正常情況下，和建構函式一樣，它只會執行一次

可以使用setstate，但是為了避免bug，不允許使用，因為在某些特殊情況下，該函式可能被呼叫多次

render返回乙個虛擬dom，會被掛載到虛擬dom樹中，最終渲染到頁面的真實dom中

render可能不只執行一次，只要需要重新渲染，就會重新執行

嚴禁使用setstate，因為可能會導致無限遞迴渲染

componentdidmount只會執行一次

可以使用setstate

通常情況下，會將網路請求、啟動計時器等一開始需要的操作，書寫到該函式中

元件進入活躍狀態

componentwillreceiveprops

即將接收新的屬性值

引數為新的屬性物件

該函式可能會導致一些bug，所以不推薦使用

shouldcomponentupdate指示react是否要重新渲染該元件，通過返回true和false來指定

預設情況下，會直接返回true

componentwillupdate

元件即將被重新渲染

componentdidupdate

往往在該函式中使用dom操作，改變元素

componentwillunmount通常在該函式中銷毀一些元件依賴的資源，比如計時器

react >= 16.0.0

react官方認為，某個資料的**必須是單一的

getderivedstatefromprops

通過引數可以獲取新的屬性和狀態

該函式是靜態的

該函式的返回值會覆蓋掉元件狀態

該函式幾乎是沒有什麼用

getsnapshotbeforeupdate

真實的dom構建完成，但還未實際渲染到頁面中。

在該函式中，通常用於實現一些附加的dom操作

該函式的返回值，會作為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...