React生命週期鉤子函式

2021-09-28 20:43:25 字數 1699 閱讀 4256

定義:react中元件有生命週期,也就是說也有很多鉤子函式供我們使用, 元件的生命週期,我們會分為四個階段,初始化、執行中、銷毀、錯誤處理(16.3之後)

注意:生命週期鉤子函式一定不要寫成箭頭函式

react 16.x 版本中共有 10個鉤子函式 ,四個階段、分別為:

1、constructor( props )

​ 作用:1、繼承父元件屬性,然後將 props 值賦值給 this.props

​ 2、定義狀態

2、componentwillmount( )

​ 作用:1、元件即將掛載為元件的事件,為生命週期鉤子做準備

​ 2、類似於vue中的beforecreate()

​ 3、這裡我們在專案中不使用

3、render( )

​ 作用:1、 利用 react.createelement( ) api將 jsx 解析為虛擬dom物件模型

2、 計算 this.state 和  this.props
4、componentdidmount()​ 作用:1、資料請求、資料修改

​ 2、操作dom

5、componentwillreceiveprops( nextprops )//即將接收新的屬性 nextprops就是新的屬性

作用:新屬性的接收

6、shouldcomponentupdate( )

作用:決定了元件是否要渲染,是 react 效能優化的關鍵

注意:1、一定要有返回值,返回值為 true,那麼更新,false,則不更新

​ 2、預設不寫的話,就是 return true

7、componentwillupdate()這個鉤子函式表示元件即將更新

作用:做更新前的準備工作

注意:這個鉤子函式中不能使用 this.setstate ( ),否則會造成棧溢位

8、render()

作用:1、jsx 轉化為 vdom物件模型

​ 2.、計算 this.props 和 this.state

注意: 這個鉤子函式中不能使用 this.setstate(),否則會造成棧溢位

9、componentdidupdate( )這個鉤子函式表示元件更新結束

作用:可以進行 dom 操作

注意:這個鉤子函式中不能使用 this.setstate(),否則會造成棧溢位

10、componentwillunmount()這個鉤子函式表示元件銷毀

react15 和 react 16對比

主要在於初始化階段15版本的兩個鉤子函式getdefaultprops( ) 和 getinitvialstate( ) 在16版本中替換為了constructor( )

react16版本

react16 和 react 17對比

新增的鉤子有:

React的生命週期鉤子函式

一 react的生命週期鉤子函式舊版 掛載時,初始化階段 1 constructor 如果不初始化state或不進行方法繫結,則不需要為react元件實現建構函式 2 componentwillmount 以前在這裡進行請求資料,現在即將被廢棄 3 render 初次渲染元件的內容 4 compon...

react生命週期的鉤子函式

生命週期,鉤子函式 掛載階段 一 constructor 第乙個執行 1.可以初始化元件狀態 2.可以給一些事件函式繫結this 注意 不能再內部呼叫setstate constructor 不能在內部呼叫setstate this.handleclick this.handleclick.bind...

react的生命週期鉤子函式

首先我們先來掌握基本單詞 掌握單詞後會更好理解和記住生命週期 constructor 建構函式 component 元件 will 將要 get 得到 default 預設值 initial 最初的 unsafe 不安全的 static 靜態的 derived 衍生的 should 應該 updat...