React元件的生命週期

2021-10-01 19:40:09 字數 1877 閱讀 7871

三種不同的過程,react庫會呼叫元件的一些成員函式,即生命週期函式。

constructor

es6中每個類的建構函式,要建立乙個元件類的例項,便會呼叫對應的建構函式

注意:

並不是每個元件都需要定義自己的建構函式,無狀態的react元件往往就不需要定義構造

函式;乙個react元件需要建構函式目的:

- 因為在es6語法下,類的每個成員函式在執行時的this並不是和類例項自動繫結的;

- 而在建構函式中this就是當前元件例項,所以,為了方便將來呼叫,往往在建構函式中將這個例項的特定函式繫結this為當前類例項:

...

constructor(props)

getinitialstate和getdefaultprops

1. getinitialstate函式的返回值用來初始化元件的this.state;

2. getinitialstate只出現在裝載過程,也就是說乙個元件的整個生命週期過程中,這個函式只被呼叫一次;

3. getdefaultprops函式的返回值可以作為props的初始值;

4.兩個函式都只有在使用react.createclass方法建立元件類時才會用到

const sample = react.createclass(;

},getdefaultprops: function()

}})

5.react.createclass建立方法已經逐漸被facebook官方廢棄

6. 使用es6時,在建構函式中通過this.state賦值完成狀態初始化;通過給類屬性(注意是類屬性,而不是類的例項物件的屬性)defaultprops賦值指定的props初始值:

class sample extends react.component

}}sample.defaultprops =

render

componentwillmount和componentdidmount

render函式本身並不往dom樹上渲染或者裝載內容,它只是返回乙個表示jsx表示的物件(及元件例項),然後由react庫根據返回的物件決定如何渲染;

而react庫肯定是要把所有元件返回的結果綜合起來,才能知道如何產生對應的dom修改;

所以只有react庫呼叫所有元件的render函式之後,才有可能完成dom裝載,這時候才會依呼叫componentdidmount函式作為裝載的收尾。

componentwillmount可以在伺服器和瀏覽器端被呼叫,而componentdidmount只能在瀏覽器端被呼叫(因為componentdidmount是在『裝載』完成之後被呼叫,且『裝載』是乙個建立元件並放到dom樹上的過程,而伺服器端渲染通過react元件產生的只是乙個純粹的字串,並不會產生dom樹,即在伺服器端不可能完成『裝載過程』所以無法呼叫componentdidmount)

並不是所有的更新過程都會執行全部函式。

componentwillreceiveprops(nextprops)

shouldcomponentupdate(nextprops,nextstate)

componentwillupdate和componentdidupdate

React元件生命週期

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

React元件生命週期

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

React 元件生命週期

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