react生命週期

2022-07-29 10:24:06 字數 896 閱讀 8203

constrctor()

完成資料的初始化,接收引數props和context。需要通過super()傳入這兩個引數才能使用。

componentwillmount()

元件已經經歷了constructor資料初始化後,還未渲染到頁面上。一般用於服務端渲染。

componentdidmount()

元件第一次渲染完成,dom節點已建立。此時可以傳送ajax請求,得到新資料後setstate會進行重新渲染

componentwillunmount()

進行元件的解除安裝和資料的銷毀。

componentwillreceiveprops(nextprops)

在接收父元件更新後的props需要重新渲染時用的較多

接收引數nextprops,通過對比nextprops和this.props,將nextprops的state設為當前元件的state,重新渲染元件

shouldcomponentupdate(nextprops,nextstate)

唯一用於控制項重新渲染的生命週期函式

componentwillupdate(nextprops,nextstate)

當shouldcomponentupdate返回true後,元件即將重新渲染,會進入此生命週期,同樣可以拿到nextprops,nextstate

componentdidupdate(preprops, prestate)

元件除了第一次渲染後會進入componentdidmount函式,後面重新渲染之後都會進入此函式,兩個引數分別為更新前的props和state

render()

此函式會插入jsx生成的dom結構,react會生成乙份虛擬dom樹,每一次元件更新時,react就會在此通過diff演算法比較新舊dom樹的最小區別,生成補丁,重新渲染

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