React元件生命週期

2021-08-03 22:02:23 字數 1351 閱讀 3414

首次例項化

例項化完成後的更新

元件已存在時的狀態改變

生命週期共提供了10個不同的api。

1.getdefaultprops

作用於元件類,只呼叫一次,返回物件用於設定預設的props,對於引用值,會在例項中共享。

2.getinitialstate

作用於元件的例項,在例項建立時呼叫一次,用於初始化每個例項的state,此時可以訪問this.props

3.componentwillmount

在完成首次渲染之前呼叫,此時仍可以修改元件的state。

4.render

必選的方法,建立虛擬dom,該方法具有特殊的規則:

5.componentdidmount

真實的dom被渲染出來後呼叫,在該方法中可通過this.getdomnode()訪問到真實的dom元素。此時已可以使用其他類庫來操作這個dom。

在服務端中,該方法不會被呼叫。

6.componentwillreceiveprops

元件接收到新的props時呼叫,並將其作為引數nextprops使用,此時可以更改元件propsstate

componentwillreceiveprops: function(nextprops) );

}}

7.shouldcomponentupdate

元件是否應當渲染新的propsstate,返回false表示跳過後續的生命週期方法,通常不需要使用以避免出現bug。在出現應用的瓶頸時,可通過該方法進行適當的優化。

在首次渲染期間或者呼叫了forceupdate方法後,該方法不會被呼叫

8.componentwillupdate

接收到新的props或者state後,進行渲染之前呼叫,此時不允許更新propsstate

9.componentdidupdate

完成渲染新的props或者state後呼叫,此時可以訪問到新的dom元素。

10.componentwillunmount

元件被移除之前被呼叫,可以用於做一些清理工作,在componentdidmount方法中新增的所有任務都需要在該方法中撤銷,比如建立的定時器或新增的事件***。

React元件生命週期

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

React 元件生命週期

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

React元件生命週期

元件的生命週期可分成三個狀態 mounted update unmounted mounted react components被render解析生成對應的dom節點,並被插入瀏覽器的dom結構的乙個過程 update 乙個mounted的react components被重新render的過程 這...