React基礎篇 (3) 生命週期

2022-08-20 23:57:22 字數 1385 閱讀 6006

生命週期是react中的重要部分,理解它有助於我們更合理的書寫邏輯。

componentwillmount:在渲染前呼叫,在客戶端也在服務端。

componentdidmount: 在第一次渲染後呼叫,只在客戶端。之後元件已經生成了對應的dom結構。

可以在這個方法中呼叫settimeout, setinterval或者傳送ajax請求等操作(防止非同步操作阻塞ui)。

componentwillreceiveprops: 在元件接收到乙個新的 prop (更新後)時被呼叫。這個方法在初始化render時不會被呼叫。

shouldcomponentupdate: 返回乙個布林值。在元件接收到新的props或者state時被呼叫。

componentwillupdate: 在元件接收到新的props或者state但還沒有render時被呼叫。在初始化時不會被呼叫。

componentdidupdate: 在元件完成更新後立即呼叫。在初始化時不會被呼叫。

componentwillunmount: 在元件從 dom 中移除之前立刻被呼叫。

舉例如下:

class ani extends react.component 

setnewnumber=()=> )

}render()

}class content extends react.component

componentdidmount()

componentwillreceiveprops(newprops)

shouldcomponentupdate(newprops, newstate)

componentwillupdate(nextprops, nextstate)

componentdidupdate(prevprops, prevstate)

componentwillunmount()

render()

}

結果:

初始化:

更新狀態:

參考文件:

react 學習 3 生命週期

react 中的生命週期是指,在某乙個時刻元件會自動呼叫執行的函式。class mycomponent extends component componentwillmount render componentdidmount shouldcomponentupdate componentwillu...

React 學習筆記 (六)(生命週期)

元件載入時觸發的函式 constructor componentwillmount render componentdidmount import react,from react class lifecycle extends component 資料將要掛載 componentwillmount...

React學習筆記2 生命週期

生命週期函式指在某乙個時刻元件會自動呼叫執行的函式,react的生命週期函式主要有 父元件 在元件即將被掛載到頁面的時刻自動執行,掛載完畢不再執行 componentwillmount render 元件被掛載到頁面之後,自動被執行,掛載完畢不再執行 componentdidmount 元件被更新之...