react生命週期

2021-09-26 07:56:01 字數 2452 閱讀 2185

react生命週期分為3個階段:掛載,更新,解除安裝

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

constructor()

static getderivedstatefromprops()

render()

componentdidmount()

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

static getderivedstatefromprops()

shouldcomponentupdate()

render()

getsnapshotbeforeupdate()

componentdidupdate()

當元件從 dom 中移除時會呼叫如下方法:

componentwillunmount()

constructor()

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

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

通過給 this.state 賦值物件來初始化內部 state。

為事件處理函式繫結例項

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

constructor

(props)

;this

.handleclick =

this

.handleclick.

bind

(this);

}

getderivedstatefromprops

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

static

getderivedstatefromprops

(nextprops, prevstate)

派生狀態會導致**冗餘,並使元件難以維護。不推薦使用。

render

render()方法是 class 元件中唯一必須實現的方法。

render()函式應該為純函式,這意味著在不修改元件state的情況下,每次呼叫時都返回相同的結果,並且它不會直接與瀏覽器互動。

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

componentdidmount

componentdidmount()會在元件掛載後(插入 dom 樹中)立即呼叫。依賴於 dom 節點的初始化應該放在這裡。如需通過網路請求獲取資料,此處是例項化請求的好地方。

shouldcomponentupdate

根據shouldcomponentupdate()的返回值,判斷 react 元件的輸出是否受當前 state 或 props 更改的影響。預設行為是 state 每次發生變化元件都會重新渲染。大部分情況下,你應該遵循預設行為。

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

目前,如果shouldcomponentupdate()返回false,則不會呼叫render()componentdidupdate()

getsnapshotbeforeupdate

getsnapshotbeforeupdate()在最近一次渲染輸出(提交到 dom 節點)之前呼叫。它使得元件能在發生更改之前從 dom 中捕獲一些資訊(例如,滾動位置)。此生命週期的任何返回值將作為引數傳遞給componentdidupdate()

componentdidupdate

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

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

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