react元件的生命週期

2021-08-08 23:27:48 字數 2017 閱讀 6394

每個元件都包括:建立期、存在期、銷毀期

建立期(五個階段)

在元件被建立的時候進入建立期

•第乙個階段

getdefaultprops獲取預設屬性。

作用域是建構函式

沒有引數

在這個方法(建構函式)中,元件的例項化物件還沒有被建立出來。元件的例項化物件建立出來之後,才會擁有屬性資料。

es6中getdefaultprops是class的屬性而不是方法,不能定義在元件內部,需要單獨寫在外面。

•第二個階段

getinitialstate設定預設狀態

作用域是元件例項化物件

沒有引數

經過第二階段,元件的狀態就被建立出來了。因此在這個階段才有機會為初始化狀態賦值。

es6不在需要getinitialstate方法,而是直接在constructor中直接用this.state即可,更加方便。

•第三個階段

componentwillmount元件即將被構建出來

作用域是元件例項化物件

這是在元件被渲染出虛擬dom前最後一次機會給元件設定一些必要資訊,這個階段可以獲取元件的狀態和屬性,但千萬不要修改元件的狀態和屬性。

•第四個階段

render元件渲染出dom

作用域是元件例項化物件

在return執行完畢後,dom就被完全渲染成功,之後可以獲取到虛擬dom

•第五個階段

componentdidmount元件已經構建完畢

作用域是元件例項化物件

在這個階段可以操作元件以及它的屬性和狀態。

這五個階段都沒有引數,因此想使用資料只能通過元件例項化物件,在react元件中訪問dom用reactdom.finddomnode(),返回值就是獲取到的虛擬dom,通常我們用reactdom.finddomnode(this)獲取元件容器的元素。

我們可以在這個方法中使用一些其他庫操作dom,比如jquery.或者繫結事件,傳送請求等。

存在期(五個階段)

當元件內部屬性狀態改變會進入該時期

•第一階段

componentwillreceiveprops元件即將接收屬性

當元件的屬性發生改變的時候,才會執行該方法,而狀態改變則不會執行。

第乙個引數表示新的屬性。

•第二階段

shouldcomponentupdate元件是否需要更新

無論元件修改的是屬性還是狀態,都會執行該方法。

第乙個引數表示新的屬性

第二個引數表示新的狀態

返回值(很重要,一定要有返回值)

false表示不執行更新

true表示執行更新

•第三個階段

componentwillupdate元件即將被更新

在元件即將被更新時呼叫

第乙個引數表示新的屬性

第二個引數表示新的狀態

但是不能再在各個階段繼續更改狀態和屬性

•第四個階段

render元件渲染輸出虛擬dom

必須要有return返回新的虛擬dom樹

這個階段更新虛擬dom,因此前面的方法訪問的都是舊的虛擬dom,只有此階段之後才能訪問新的dom

•第五個階段

componentdidupdate元件更新完畢

第乙個引數表述上乙個屬性

第二個引數表示上乙個狀態

在這個階段,我們可以訪問新的dom樹,新的屬性和狀態,並且還可以訪問舊的屬性和狀態。

銷毀期(只有乙個階段)

元件在頁面中刪除,會出發該階段發生

componentwillunmount元件即將被銷毀

在元件整個生命週期最後一次訪問該元件的機會。

當修改虛擬dom樹的時候,react會將修改過的虛擬dom節點標記為修改過(dirty),在事件迴圈結束的時候,會對所有修改過的虛擬dom節點進行處理,最後對映到新的dom樹。

React元件生命週期

元件的所有狀態結合起來就成了元件的生命週期。即 初始化階段 執行中階段 銷毀階段。不同生命週期內可以自定義的函式 初始化階段 getdefaultprops 獲取預設屬性,只呼叫一次,是在createclass之後呼叫的。例項之間共享引用 getinitialstate 初始化每個例項的特有初始化狀...

React元件生命週期

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

React 元件生命週期

在本章節中我們將討論 react 元件的生命週期。元件的生命週期可分成三個狀態 生命週期的方法有 這些方法的詳細說明,可以參考官方文件。以下例項在 hello 元件載入以後,通過 componentdidmount 方法設定乙個定時器,每隔100毫秒重新設定元件的透明度,並重新渲染 varhello...