React生命週期全解和state避坑

2021-08-04 22:23:21 字數 1420 閱讀 3440

所謂的生命週期就是react中定製的一套執行函式的順序

分為三個階段,每乙個階段都有不同的函式執行順序,值得注意的是例項化和銷毀階段執行一次,存在期是可以反覆執行的

1、元件例項化階段

(在例項化階段只會執行一次)

constructor

componentwillmount

render

componentdidmount

2、元件存在階段

(在元件存在的階段,每重新渲染一次,都會執行一遍)

componentwillreceiveprops

shouldcomponentupdate(特別注意,如果返回false,則不會執行渲染,也會跳過render前後的鉤子函式)

componnetwillupdate

render

componentdidupdate(渲染之後,可以通過ref或者finddomnode,來操作dom,當react執行在服務端是,不會被呼叫)

3、元件銷毀階段

componentwillunmount

react元件的生命週期,已經說忘了,那麼我們需要看一下,貫穿整個生命週期的state和props是什麼情況。

首先要明白:react的資料流是單向的

props:很好理解,就是向元件本身傳遞的引數。

你可以通過props對元件進行狀態化處理,可以通過proptypes(接受乙個物件最為引數)進行引數驗證

static proptypes=).isrequired

}

如果沒有傳進引數過來怎麼辦?使用defaultprops設定預設值

static defaultprops=
注意:

1、盡量props當作資料來源,不要修改資料,作為唯讀資料,與子元件進行通訊(包括資料和事件)

2、state儲存簡單的檢視狀態,在你setstate之後,你是獲取不到state的值,state值的改變是在render之後才會改變,如果你要向父元件傳遞state的資料,那麼componentdidmount中傳遞資料,或者通過setstate(,()=>)實現,( 原因:setstate本質上是非同步的。。。。。。jb)state盡量不要儲存計算後的值,state可以接受乙個函式,返回值為物件即可

this.setstate((state)=>

});

3、盡量使用setstate來設定state的值,不要直接修改(也可以直接修改,只不過不會引起渲染罷了)

4、當不需要內部狀態,refs和生命週期的方法時,將元件變為函式元件,減少冗餘。

React 生命週期 生命週期方法

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

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

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

react 生命週期

首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類,只呼叫一次,返回物件用於設定預設的props,對於引用值,會在例項中共享。2.getinitialstate 作用於元件的例項,在例項建立時呼叫一次,用於初始...