React 元件生命週期

2021-10-03 05:08:20 字數 915 閱讀 2834

react提供了很多鉤子函式使我們可以在合適的時間、合適的節點更新元件的狀態,這些鉤子是生命週期函式,想要使用react,我們必須掌握在鉤子中可以做什麼,不可以做什麼。

??首先大家想一下在**傳送請求比較合適componentwillmount、componentdidmount、componentwillreceiveprops、componentdidupdate?

個人覺得在元件掛載完畢的時候傳送請求比較合適componentdidmount!

元件的生命主要包括3個階段: 掛載、更新、解除安裝,react 16開始還新增了錯誤處理。

元件被例項化並掛載在到dom樹這一過程稱為掛載

分別為:

constructor()

componentwillmount()

render()

componentdidmount()

當元件的屬性或者狀態改變時會重新渲染

分別為:

shouldcomponentupdate()

componentwillupdate()

render()

componentdidupdate()

當執行this.forceupdate時,shouldcomponentupdate將不會被觸發

當乙個元件被移出dom樹時,元件就會被解除安裝

componentwillunmount()

當元件被例項化時,建構函式就被會最先執行。需要注意的是constructor的第一行必須是super(props)語句。

設定元件的初始狀態

簡單解釋下bind function,當類的方法作為事件處理函式時,有可能會丟失this指向,有兩種常見的解決方案:

React元件生命週期

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

React元件生命週期

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

React 元件生命週期

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