React元件生命週期

2021-08-14 14:12:04 字數 843 閱讀 1771

元件的生命週期可分成三個狀態:

mounted->update ->unmounted

mounted:react components被render解析生成對應的dom節點,並被插入瀏覽器的dom結構的乙個過程

update:乙個mounted的react components被重新render的過程(這個重新渲染的過程並不是說相應的dom結構就一定會發生改變,react會把這個components的當前status和最近一次的state進行比較,只有當state確實發生改變並且影響到dom結構的時候,react才會去改變對應的dom結構)

unmounted:乙個mounted的react components對應的dom節點被從dom結構中移除的這樣乙個過程

每乙個狀態react都封裝了對應的hook函式

mounting階段有兩個hook函式:

另外,還有乙個初始化component的state的函式:getinitialstate()

props和state差異: props是通過元件呼叫方在元件呼叫時指定,props一旦指定了,在一般情況下是不會改變的,尤其是對於被呼叫元件來說,props的擁有者是其呼叫方;而state是私屬於當前元件的,state值是可變的(setstate方法),state值的每一次變化,都會導致component從當前狀態進入updating階段,從而重新render。

updating階段有兩個hook函式:

unmounted階段有乙個hook函式:

React元件生命週期

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

React元件生命週期

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

React 元件生命週期

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