React 元件的生命週期方法

2022-07-13 10:18:07 字數 1677 閱讀 3829

按渲染順序:

1:unsafe_componentwillmount()– 在渲染之前執行,在客戶端和伺服器端都會執行。

2:componentdidmount()– 僅在第一次渲染後在客戶端執行。

3:unsafe_componentwillreceiveprops()– 當從父類接收到 props 並且在呼叫另乙個渲染器之前呼叫,父元件初始化的時候不會呼叫。乙個常見的誤解是,當props「改變」時,getderivedstatefrompropscomponentwillreceiveprops才會被呼叫。事實上,只要父元件重新渲染,這些生命週期函式就會被呼叫,不管這些props是否與以前「不同」

3:shouldcomponentupdate()– 根據特定條件返回 true 或 false。如果你希望更新元件,請返回true 否則返回 false。預設情況下,它返回 false。當這個方法返回false的時候,整個元件(類)都不會再執行(渲染)下去,所以最好在不會影響其他元件的元件裡使用此方法。shouldcomponentupdate最好作為效能優化使用,而不是為了確保派生狀態的正確性

4:unsafe_componentwillupdate()– 在 dom 中進行渲染之前呼叫。

5:componentdidupdate()– 在渲染發生後立即呼叫。

6:componentwillunmount()– 從 dom 解除安裝元件後呼叫。用於清理記憶體空間。

7:getderivedstatefromprops()- 在元件例項化以及接收新props後呼叫。它可以返回乙個物件來更新state,或者返回null來表示新的props不需要任何state更新。 與componentdidupdate一起,這個新的生命週期應該覆蓋傳統componentwillreceiveprops的所有用例。

8:getsnapshotbeforeupdate()-  在更新之前被呼叫(例如,在dom被更新之前)。此生命週期的返回值將作為第三個引數傳遞給componentdidupdate。 與componentdidupdate一起,這個新的生命週期將覆蓋舊版componentwillupdate的所有用例。

9:componentdidcatch(error, info)-如果render()函式丟擲錯誤,則會觸發該函式。

10:getderivedstatefromerror(error) - 

此生命週期會在後代元件丟擲錯誤後被呼叫。 它將丟擲的錯誤作為引數,並返回乙個值以更新 state

React元件生命週期

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

React元件生命週期

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

React 元件生命週期

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