React常用生命週期函式通俗易懂

2021-10-06 15:17:16 字數 2745 閱讀 3716

學習生命週期小套路

會在什麼時候被呼叫

有什麼用

該標籤會導致某些生命週期函式執行的時候,執行多了一次。

該標籤僅在開發環境下生效,如果執行yarn build打包成生產環境**的時候就會自動被乾掉。開發環境下:第二次執行是為了嚴格校驗。

直接翻譯過來叫:建構函式,構造器。

執行時機:類被初始化的時候自動觸發。

有什麼用:負責類元件的初始化工作。

// constructor 常用於做初始化工作

constructor()

;// 通過 bind 鎖定 this 指向

this

.handleclick =

this

.handleclick.

bind

(this);

}

render執行時機:標籤即將顯示的時候觸發。

有什麼用:用來渲染 頁面結構。

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

注意事項:不要在 render 中呼叫this.setstate(),會出現死迴圈。

componentdidmount

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

執行時機: 類似於 vue 的 mounted,元件掛載完畢自動觸發。

有什麼用:一般是負責傳送非同步請求,獲取到資料在渲染到頁面。

static getderivedstatefromprops() (了解即可基本不用)

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

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

static getderivedstatefromprops()

shouldcomponentupdate()

render()

getsnapshotbeforeupdate()

componentdidupdate()

static getderivedstatefromprops()(不常用)

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

shouldcomponentupdate()(不常用)

執行時機:當propsstate發生改變時觸發。

有什麼用:在更新更新元件前的***。

返回true則表示允許執行render,返回false這表示 不允許執行render

後面用到的react.purecomponent高效能元件的底層原理就要依賴shouldcomponentupdate

render()

同上述說明

getsnapshotbeforeupdate()(不常用)

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

componentdidupdate()

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

執行時機:會在更新後會被立即呼叫。(首次渲染叫掛載,掛載不會執行此方法)

有什麼用:當元件更新後,可以在此處對 dom 進行操作。

如:列表的高度是不固定的,根據子元件內容自動撐開,我們想要在更新後獲取最新的高度,就可以呼叫該生命週期函式在內部獲取。

componentdidupdate

(prevprops)

}

補充:this.setstate()都屬於更新,更新後就會觸發元件的componentdidupdate

componentwillunmount()

1.執行時機:在元件解除安裝及銷毀之前直接呼叫。

2. 有什麼用:關閉定時器。取消訂閱 (訂閱是一種設計模式)

React生命週期函式

說來慚愧,準大四計算機專業學生黨第一次寫技術部落格。以前學東西沒有記錄的習慣總是容易忘記。最近在看老師的教程學習react框架,想寫點東西記錄一下學習的過程。若寫的不好,各位大佬見諒了,歡迎指正。什麼是生命週期函式?生命週期函式就是元件某一時刻會自動執行的函式。initialzation 初始化 m...

React 生命週期函式

initialization 初始化 mounting 掛載 updation 更新 unmounting setup componentwillmount props states componentwillunmont 當這個元件即將被從頁面中移除的時候,會被執行 props render co...

react生命週期函式

生命週期函式 某一時刻元件會自動呼叫執行的函式 render也是 initialization 初始化 constructor裡 mounting 掛載 componentwillmount 接下來render 生命週期函式的使用場景 不可缺少的乙個生命週期函式是render 效能優化 減少無謂的渲...