react 生命週期

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-1htpi4aj-1599449791925)(

react中元件也有生命週期，也就是說也有很多鉤子函式供我們使用, 元件的生命週期，我們會分為四個階段，掛載、更新、解除安裝、錯誤處理

當元件例項被建立並插入 dom 中時，其生命週期呼叫順序如下：

constructor()

static getderivedstatefromprops()

render()

componentdidmount()

注意:

下述生命週期方法即將過時，在新**中應該避免使用它們：
unsafe_componentwillmount()

當元件的 props 或 state 發生變化時會觸發更新。元件更新的生命週期呼叫順序如下：

static getderivedstatefromprops()

shouldcomponentupdate()

render()

getsnapshotbeforeupdate()

componentdidupdate()

注意:

下述方法即將過時，在新**中應該避免使用它們：
unsafe_componentwillupdate()
unsafe_componentwillreceiveprops()

​ componentwillunmount()

當渲染過程，生命週期，或子元件的建構函式中丟擲錯誤時，會呼叫如下方法：

static getderivedstatefromerror()

componentdidcatch()

1.constructor(props)

如果不初始化 state 或不進行方法繫結，則不需要為 react 元件實現建構函式。

在 react 元件掛載之前，會呼叫它的建構函式。在為 react.component 子類實現建構函式時，應在其他語句之前前呼叫super(props)。否則，this.props在建構函式中可能會出現未定義的 bug。

通常，在 react 中，建構函式僅用於以下兩種情況：

在constructor()函式中不要呼叫setstate()方法。如果你的元件需要使用內部 state，請直接在建構函式中為this.state賦值初始 state：

constructor(props) ;

this.handleclick = this.handleclick.bind(this);
}

2.static getderivedstatefromprops(nextprops, prevstate)

getderivedstatefromprops會在呼叫 render 方法之前呼叫，並且在初始掛載及後續更新時都會被呼叫。它應返回乙個物件來更新 state，如果返回 null 則不更新任何內容。

如果是由於父元件的props更改，所帶來的重新渲染，也會觸發此方法。

當狀態發生變化的時候，this.setstate()的時候，此鉤子函式同樣也會執行。

之前這裡都是使用constructor+componentwillrecieveprops完成相同的功能的

3.render()

react元素。通過jsx建立，既可以是dom元素，也可以是使用者自定義的元件。

字串或數字。他們將會以文字節點形式渲染到dom中。

null，什麼也不渲染

布林值。也是什麼都不渲染。

如需與瀏覽器進行互動，請在componentdidmount()或其他生命週期方法中執行你的操作。保持render()為純函式，可以使元件更容易思考。

注意:

如果 shouldcomponentupdate() 返回 false，則不會呼叫 render()。

componentdidmount在元件被裝配後立即呼叫。初始化使得dom節點應該進行到這裡。

通常在這裡進行ajax請求

如果要初始化第三方的dom庫，也在這裡進行初始化。只有到這裡才能獲取到真實的dom.

5.shouldcomponentupdate(nextprops, nextstate)

呼叫shouldcomponentupdate使react知道，元件的輸出是否受state和props的影響。預設每個狀態的更改都會重新渲染，大多數情況下應該保持這個預設行為。

在渲染新的props或state前，shouldcomponentupdate會被呼叫。預設為true。這個方法不會在初始化時被呼叫，也不會在forceupdate()時被呼叫。返回false不會阻止子元件在state更改時重新渲染。

如果shouldcomponentupdate()返回false，componentwillupdate,render和componentdidupdate不會被呼叫。

此方法僅作為效能優化的方式而存在。不要企圖依靠此方法來「阻止」渲染，因為這可能會產生 bug。你應該考慮使用內建的 purecomponent 元件，而不是手動編寫 shouldcomponentupdate()。purecomponent 會對 props 和 state 進行淺層比較，並減少了跳過必要更新的可能性。

如果你一定要手動編寫此函式，可以將 this.props 與 nextprops 以及 this.state 與nextstate 進行比較，並返回 false 以告知 react 可以跳過更新。

在reactrender()後的輸出被渲染到dom之前被呼叫。它使您的元件能夠在它們被潛在更改之前捕獲當前值（如滾動位置）。這個生命週期返回的任何值都將作為引數傳遞給componentdidupdate（）。

7.componentdidupdate(prevprops, prevstate, snapshot)

componentdidupdate()會在更新後會被立即呼叫。首次渲染不會執行此方法。

當元件更新後，可以在此處對 dom 進行操作。如果你對更新前後的 props 進行了比較，也可以選擇在此處進行網路請求。（例如，當 props 未發生變化時，則不會執行網路請求）。

componentdidupdate(prevprops) 

}

注意:

如果 shouldcomponentupdate() 返回值為 false，則不會呼叫 componentdidupdate()。

componentwillunmount()會在元件解除安裝及銷毀之前直接呼叫。在此方法中執行必要的清理操作，例如，清除 timer，取消網路請求或清除在componentdidmount()中建立的訂閱等。

componentwillunmount()中不應呼叫setstate()，因為該元件將永遠不會重新渲染。元件例項解除安裝後，將永遠不會再掛載它。

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...