React元件生命週期一覽

2021-08-06 07:40:43 字數 667 閱讀 7215

react元件生命週期有三個階段:載入、更新和解除安裝。每個階段有多個方法來呼叫實現某些功能。這些方法名字也很有意思,帶will字首表示在該階段發生之前呼叫,did表示在該階段發生之後呼叫。本文將介紹這些方法。本文翻譯自react官網文件,如有翻譯不當,請不吝指正。

1.mounting階段:該階段表示乙個元件例項被建立並被插入到dom中。該階段有四個方法:constructor()componentwillmount()render()componentdidmount()

2.updating階段:該階段表示由狀態或屬性的改變導致元件的重渲染。該階段有五個方法:componentwillreceiveprops()shouldcomponentupdate()componentwillupdate()render()componentdidupdate()

3.unmounting階段:該階段表示元件將從dom中移除。該階段只有乙個方法:componentwillunmount()

React元件生命週期

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

React元件生命週期

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

React 元件生命週期

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