React 元件生存週期

2021-08-28 13:58:20 字數 1231 閱讀 1315

react元件有以下生存週期

1、getdefaultprops

獲取預設的props熟悉,最先執行,主要用於初始化props
2、getinitialstate

獲取初始的state狀態
3、componentwillmount

新建立元件後即將被渲染
4、render

元件渲染
5、componentdidmount

元件完成渲染
6、componentwillupdate

已經存在的元件狀態發生變化即將被更新
7、componentwillunmount

元件將銷毀
8、componentwillreceiveprops

接受到props的設定,render之前,再次期間可以設定setstate不引起二次渲染,舊的props可以用this.props獲取,新的props為該方法的引數
10、shouldcomponentupdate

接收到新的state或props時,render之前呼叫,此期間可以驗證傳入的值確定是否允許試圖更新。

以下**可以跟蹤元件的執行過程

var main = react.

createclass(,

getinitialstate:

function()

;}, componentwillmount:

function()

, componentdidmount:

function()

, componentwillupdate:

function()

, componentdidupdate:

function()

, componentwillunmount:

function()

, updatechildhandler:

function()

, render:

function()

>更新孩子<

/a>

"childref"

/>

<

/div>)}

});

React元件生命週期

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

React元件生命週期

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

React 元件生命週期

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