所謂的生命週期就是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 作用於元件的例項,在例項建立時呼叫一次,用於初始...