react 生命週期函式

生命週期函式指在某一時刻元件會自動呼叫執行的函式

// 元件掛載時

componentwillmount // 元件被掛載頁面前自動執行
render // 元件掛載
componentdidmount // 元件被掛載頁面後自動執行
// 資料更新時
componentwillreceiveprops // 乙個元件從父元件接受 props 引數，且父元件 render 函式重新被執行時自動執行
shouldcomponentupdate // 元件即將被變更時執行（必須返回乙個布林值，告訴元件是否需要被更新）
componentwillupdate // 在 shouldcomponentupdate 返回 true 後，且頁面還未更新掛載時會被執行
render // 元件更新掛載
componentdidupdate // 元件更新掛載後執行
// 元件銷毀時
componentwillunmount // 元件被銷毀時執行

setup props and state

mounting（掛載）

// 元件被掛載頁面前自動執行

componentwillmount()
// 元件掛載
render()
// 元件被掛載頁面後自動執行
componentdidmount()

// 乙個元件從父元件接受 props 引數，且父元件 render 函式重新被執行時自動執行

componentwillreceiveprops()
// 元件即將被變更時執行（必須返回乙個布林值，告訴元件是否需要被更新）
shouldcomponentupdate()
// 在 shouldcomponentupdate 返回 true 後，且頁面還未更新掛載時會被執行
componentwillupdate()
// 元件更新掛載
render()
// 元件更新掛載後執行
componentdidupdate()

// 元件被銷毀時執行

componentwillunmount()

// 避免父元件改變導致每次子元件重新渲染帶來的效能問題

// next 指代接下來變化後的 props 或 state 狀態
shouldcomponentupdate
(nextprops, nextstate)

React生命週期函式

說來慚愧，準大四計算機專業學生黨第一次寫技術部落格。以前學東西沒有記錄的習慣總是容易忘記。最近在看老師的教程學習react框架，想寫點東西記錄一下學習的過程。若寫的不好，各位大佬見諒了，歡迎指正。什麼是生命週期函式？生命週期函式就是元件某一時刻會自動執行的函式。initialzation 初始化 m...

React 生命週期函式

initialization 初始化 mounting 掛載 updation 更新 unmounting setup componentwillmount props states componentwillunmont 當這個元件即將被從頁面中移除的時候，會被執行 props render co...

react生命週期函式

生命週期函式 某一時刻元件會自動呼叫執行的函式 render也是 initialization 初始化 constructor裡 mounting 掛載 componentwillmount 接下來render 生命週期函式的使用場景 不可缺少的乙個生命週期函式是render 效能優化 減少無謂的渲...