React各個版本生命週期和作用

2021-10-08 19:01:43 字數 2180 閱讀 7149

15版本

初始化階段

getdefaultprops 作用

該階段主要是定義初始化props

寫法:getdefaultprops()

}getinitstate作用

該階段主要是初始化state

寫法:getinitstate()

}小總結:這2個鉤子也是15版本和16版本的區別之一

16版本

更新階段

1.constructor

作用:1.定義狀態

2.給普通函式繫結this

3.通過super 繼承 props

2.compentwillmount (元件即將被掛載)

作用:初始化事件,和給生命週期做準備,類似於vue的beforecreate

17版本中會被棄用

3.render

作用1.解析 this.state 和this.props

2.將jsx型的vdom(虛擬dom) 渲染成物件型別的vdom

3.reder 中不允許使用 this.setstate (會死迴圈)

4.compondidmount

作用1.資料請求,請求之後賦值給狀態

2.第三方庫例項化/dom操作

更新階段

1.componentwillreceiveprops

作用1.用於接收新的屬性值,判斷元件身上的props是否改變

在未來的17版本中是會被棄用的

2.shouldcomponentupdate

作用1.返回false或者true 來決定元件是否要進行渲染

2.接收新舊狀態,用於對比一層資料(深對比的話需要手動去對比)

3.這個鉤子函式是react元件效能優化的乙個方式

3.componentwillupdate

作用:1.元件更新前的準備

這個元件在未來的17版本中也會被棄用

4.render

作用:和初始化階段的作用是一致的

5.componentdidupdate

作用:和conpontentwillmount 相似 傳送請求 或者對真實dom 進行操作

銷毀階段

1.componentwillunmount(元件銷毀)

作用主要是元件銷毀 和清除無用的例項和事件(onscroll )還有定時器之類的

錯誤處理階段

1.componentdidcatch

作用:用於捕獲子元件throw 的錯誤 顯示回退ui

17版本(也是未來版本)

1.constructor

作用基本和之前的一樣 下面只講述一下不同的地方

2.static getderviedfromprops 代替掉了componentwillmount

這是乙個靜態的方法 無法使用this 引數是(新屬性和舊莊臺)

實際作用:提供了一次修改資料的機會 返回出乙個物件裡面是修改的內容

語法內容:retun

3.render

4.componentdidmount

更新階段

poprs或者state變化

1.static getderviedstatefromprops

2.shouldcomponentupdate

3.render

4.getsnaphotbeforeupdate (快照)

這個也是17版本新增的 主要的作用是可以在這裡面傳送請求 然後把結果返回出去

在下乙個鉤子componentdidupdate 中接收 是乙個打工仔

5.componentdidupdate

react新版本生命週期

給componentwillmount componentwillreceiveprops componentwillupdate生命週期加上unsafe 字首,表明其不安全性,並將在未來版本將其移除 官網文件指出使用這些生命週期的 會在未來版本的react中更容易產生bug,尤其是對於非同步渲染的...

React 生命週期 生命週期方法

生命週期 掛載 更新 解除安裝 元件被建立 執行初始化 並被掛載到dom中,完成元件的第一次渲染 constructor props getderivedstatefromprops props,state render componentdidmount 元件被建立時會首先呼叫元件的構造方法,接受...

vue生命週期和react生命週期對比。

生命週期 指的是元件從初始化開始到結束的過程 或者是生命週期是描述元件從開始到結束的過程,每個元件都具有生命週期,都對元件通過生命週期給予的鉤子函式進行管理。鉤子函式指的是系統某些狀態和引數發生改變的時候,系統立馬去通知對應處理的函式叫做所有的生命週期鉤子自動繫結vue的 this 上下文到例項中,...