React元件生命週期

2021-09-27 12:59:20 字數 1044 閱讀 2443

constructor(props)

構造方法, 元件被建立的時候呼叫, props 是父元件傳遞過來的屬性物件, 必須在這個方法中首先呼叫 super(props); 才能保證 props 被傳入組建中

componentwillmount

元件被掛載到 dom 之前呼叫, 且只會被呼叫一次.

render

該方法返回乙個 react 元素用於描述元件的 ui, 不能在這個方法中呼叫 this.setstate(), 否則會造成死迴圈

componentdidmount

元件被掛載到 dom 上之後呼叫, 且只會被呼叫一次, 依賴 dom 節點的操作可以在這裡執行

componentwillreceiveprops(nextprops)

props 引起的元件更新時才會呼叫, 即父元件的 render 方法被呼叫的時候, 如果當前子元件的 props 被改變則此方法被呼叫

shouldcomponentupdate(nextprops, nextstate)

元件更新之前呼叫, 接受下乙個狀態的 props 和 state, 藉此判斷當前元件是否需要更新, return false; 時元件停止更新, 接下來的生命週期方法都不會執行.

componentwillupdate(nextprops, nextstate)

每次元件更新之前都會呼叫

render

重新執行 render 方法更新元件

componentdidupdate(prevprops, prevstate)

每次元件更新完成之後呼叫, 兩個引數代表更新之前的 props 和 state

componentwillunmount

元件被解除安裝前呼叫, 可以做一些清除操作, 清除定時器/清除手動建立的 dom 元素 等

只有類元件才有生命週期方法

React元件生命週期

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

React元件生命週期

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

React 元件生命週期

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