react元件的生命週期

2021-10-03 03:39:16 字數 2164 閱讀 1212

指的是系統某些狀態和引數發生改變的時候,系統立馬去通知對應處理的函式,叫做鉤子函式。通俗講:一方面又變動。另一方面立馬去處理

。初始化生命週期整體流程高版本:

(執行順序就是1.2.3)

will和did都可以寫互動,官方推薦did

class

extends

react.component

render()

componentwillmount()

componentdidmount()

} reactdom.

render

(>

, document.

getelementbyid

("out"))

;

具體的宣告函式週期—執行中階段 資料更新過程:

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

)1.元件將要接受新值

componentwillreceiveprops(已載入元件收到新的引數時呼叫)

class

extends

react.component;}

render()

>獲取dom元素<

/button>

"text" ref=

"ipt"

/>

>傳送給子元件<

/button>

>

/>

<

/div>);

}tap()

send()

);}}

class

child

extends

react.component

render()

<

/p>

<

/div>);

}componentwillreceiveprops

(a)shouldcomponentupdate

(a)(跟父傳給子的值相關)

if(a.name ==

"hello"

)else

// return true;

//false時 不允許檢視更新 componentwillupdate,componentdidupdate不會觸發

}componentwillupdate()

componentdidupdate()

} reactdom.

render

(>

, document.

getelementbyid

("out"))

;// 父元件-子元件:

// 在子元件標籤上繫結屬性名,值為父元件需要傳遞的狀態值,子元件內部通過this.props.name接收。

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

3.元件即將更新componentwillupdate

4.必不可少的render

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

class

extends

react.component;}

render()

<

/p>

>修改s

<

/button>

<

/div>);

}tap()

);}componentwillmount()

componentdidmount()

componentwillreceiveprops()

shouldcomponentupdate

(a)componentwillupdate()

componentdidupdate()

} reactdom.

render

(>

, document.

getelementbyid

("out"))

;

銷毀時 componentwillunmount

>銷毀<

/button>

tap1()

React元件生命週期

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

React元件生命週期

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

React 元件生命週期

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