對react生命週期的了解

2021-09-24 14:23:20 字數 1829 閱讀 5415

react中元件有生命週期,我們會將元件的生命週期分為四個階段,初始化、執行中、銷毀、錯誤處理(16.3之後)

生命週期鉤子函式不能寫成箭頭函式。

在元件初始化階段會執行

constructor

static getderivedstatefromprops()

componentwillmount() / unsafe_componentwillmount()

render()

componentdidmount()

propsstate的改變可能會引起元件的更新,元件重新渲染的過程中會呼叫以下方法:

componentwillreceiveprops() / unsafe_componentwillreceiveprops()

static getderivedstatefromprops()

shouldcomponentupdate() // react效能優化第二方案

通過super來繼承父類身上傳遞過來的值,讓子類通過this.props接收值。

用來初始化乙個狀態。

初始化繫結乙個方法,將this傳遞給這個方法。this.change = this . change.bind(this) 注意:change是個方法名字 。

constructor 鉤子函式中不能使用帶***的**。

提供一次資料修改機會

資料請求 fetch axios

計算this.prop this.state*

返回一種型別*

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

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

​ 3. portals【'portl】。react 16版本中提出的新的解決方案,可以使元件脫離父元件層級直接掛載在dom樹的任何位置。

​ 4. null,什麼也不渲染

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

render()方法必須是乙個純函式,他不應該改變state,也不能直接和瀏覽器進行互動,應該將事件放在其他生命週期函式中。*

​ 4. 如果shouldcomponentupdate()返回false,render()不會被呼叫。*

​ 5. jsx->vdom 物件*

元件掛載結束

​ 1. 資料請求

​ 2. 資料修改

​ 3. 將render函式生成的vdom物件渲染成真實dom,然後掛載在 id 為 root 的容器中

觸發: 屬性發生改變,就會觸發

這個鉤子函式一定能監聽到整個當前元件的屬性變化 — > 當前元件的路由我們也可以監聽到

決定元件是否更新

返回值true,更新

返回值false,不更新

預設值是true

這個鉤子是react效能優化的關鍵鉤子

元件即將更新,生成新的dom。

元件更新結束。

1.資料更新

2.dom操作

3.接收getsnapshotbeforeupdate() 第三方引數作為返回值

銷毀

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