React 的元件生命週期

2022-05-07 13:42:11 字數 1108 閱讀 8955

對於乙個基本的react元件,可以把每乙個react元件的生命週期分為初始化、掛載、更新、解除安裝四個階段,在react的這四個階段中提供了不同的方法,以方便開發者有足夠控制權對元件進行控制。

注意:在元件的掛載階段並不會呼叫元件更新階段的這些方法,也就是初次渲染過程中更新階段方法是不可用,因此開發者不應該將處於初次渲染就使用的方法在更新階段來使用,這是非常不明智的做法。

shouldcomponentupdate()方法應該返回乙個布林值,如果返回值為true就繼續更新這個元件,反之,如果返回值為false,這個元件將不更新,也就是說,此時,componentwillupdate()、render()、componentdidupdate()方法是不會被呼叫的。

為理解生命週期的概念,可以使用乙個**來進行更好的說明:

//引入react

import react , from

'react';

//引入樣式檔案

import '';

//class

constructor()

}

//元件將要掛載

componentwillmount()

//元件掛載完成

componentdidmount()

//元件是否應該更新

shouldcomponentupdate()

//元件將要更新

componentwillupdate()

//元件更新完成

componentdidupdate()

//定義render方法

render())}} value="

change

" />

);

}}export

沒點選按鈕時在瀏覽器中的初始效果:

結果可以看出,處於元件更新階段的方法都沒有被呼叫

單擊按鈕後,元件的state改變了,因此會造成這個元件重新渲染

React元件生命週期

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

React元件生命週期

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

React 元件生命週期

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