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

2021-09-25 01:22:25 字數 1995 閱讀 3089

生命週期

指的是元件從初始化開始到結束的過程  或者是生命週期是描述元件從開始到結束的過程,每個元件都具有生命週期,都對元件通過生命週期給予的鉤子函式進行管理。
鉤子函式
指的是系統某些狀態和引數發生改變的時候,系統立馬去通知對應處理的函式叫做
所有的生命週期鉤子自動繫結vue的 this 上下文到例項中,因此可以訪問資料,對屬性和方法進行運算。這意味著 你不能使用箭頭函式來定義乙個生命週期方法 。
分為11個週期,都是函式型別,常用的有8個階段。

vue常用8個鉤子函式

}按鈕

剩下的三個週期分別是在updated之後的有activated(keep-alive 元件啟用時呼叫。)

,deactivated(keep-alive 元件停用時呼叫).

errorcaptured:當捕獲乙個來自子孫元件的錯誤時被呼叫。此鉤子會收到三個引數:錯誤物件、發生錯誤的元件例項以及乙個包含錯誤**資訊的字串。此鉤子可以返回 false 以阻止該錯誤繼續向上傳播。

react元件經歷總體階段

1、mounted階段 載入階段 或者說初始化階段 這個階段元件由jsx轉換成真實dom

2、update階段 元件執行中階段 或者更新階段 當元件修改自身狀態,或者父元件修改子元件屬性的時候發生的階段

3、umount階段 元件解除安裝階段 這個一般是元件被瀏覽器**的階段

在mounted階段

低版本有五個鉤子函式,高版本只有三個

getdefaultprops 取得預設屬性(高版本移除)

getinitialstate 初始化狀態(高版本移除)

componentwillmount 即將進入dom

render 描畫dom

componentdidmount 已經進入dom

componentwillmount()

componentdidmount()

在那種鉤子函式中進行互動更好呢?請檢視–>willmount() pk didmount()

在update階段

執行中階段只有在父元件修改了子元件的屬性或者說乙個元件修改自身的狀態才會發生的情況

1、元件將要接受新值componentwillreceiveprops(已載入元件收到新的引數時呼叫)

2、元件是否更新 shouldcomponentupdate (影響整個專案的效能,決定檢視的更新)

3、元件即將更新 componentwillupdate

4、必不可少的render

5、元件更新完畢時執行的函式 componentdidupdate

componentwillreceiveprops(a)

shouldcomponentupdate(a)

componentwillupdate()

componentdidupdate()

在umount階段

此階段可將整個元件銷毀

呼叫的鉤子函式是

reactdom.unmountcomponentatnode('節點')
初始階段:

二階段

三階段

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