React 生命週期

2022-06-27 06:00:19 字數 1363 閱讀 2471

constructor()中完成了react資料的初始化,它接受兩個引數:props和context,當想在函式內部使用這兩個引數時,需使用super() 傳入這兩個引數。

注意:只要使用了constructor()就必須寫super(),否則會導致this指向錯誤。

元件已經經歷了construct()初始化資料後,但是未渲染dom時。
元件第一次渲染完成,此時dom節點已經生成,可以在這裡呼叫ajax請求,返回資料setstate後元件會重新渲染
在此處完成元件的解除安裝和資料的銷毀

1.clear你在元件中所以的settimeout,setinterval

2.移除所以元件中的監聽removeeventlistener

1.在接受父元件改變後的props需要重新渲染元件時用到的比較多

2.接受乙個引數nextprops

3.通過對比nextprops和this.props,將nextprops的state為當前元件的state,從而重新渲染元件

componentwillreceiveprops (nextprops) ,() => )

}

1.主要用於效能優化(部分更新)

2.唯一用於控制項重新渲染的生命週期,在react中,state以後,state法傷變化,元件會進入重新渲染的流程,在這裡return false可以組織元件的更新。

3.因為react父元件的重新渲染會導致其子元件的重新渲染,這個時候其實我們是不是需要所以元件都跟著重新渲染的,因為需要在子元件的該生命週期中做判斷。

shouldcomponentupdate返回true以後,元件進入重新渲染的流程,進入componentwillupdate,這裡同樣可以拿到nextprops和nextstate
元件更新完畢後,react只會在第一次初始化成功會進入componentdidmount,之後每次重新渲染後都會進入這個生命週期,這裡可以拿到prevprops和prevstate,即更新前的props和state。
render函式會插入jsx生成的dom結構,react會生成乙份虛擬dom樹,在每一次元件更新時,在此react會通過其diff演算法比較更新前後的新舊dom樹,比較以後,找到最小的有差異的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...