react中的生命週期函式和應用場景(有點囉嗦)

2021-09-19 16:48:33 字數 1148 閱讀 7888

1,定義:☞某一時刻元件會自動呼叫執行的函式,每個元件都會有自己的生命週期函式

地1欄

constructor中進行頁面的初始化

第2欄

componentwillmount在元件即將被掛載到頁面的時刻自動執行;componentdidmount在元件被掛載到頁面之後自動執行;二者只執行一次,就是元件第一次在頁面執行的時候

一般情況下將ajax請求放在componentdidmount中執行

第3欄

1,shouldcomponentupdate 元件更新之前執行shouldcomponentupdate ()

shouldcoponentupdate(nextprops,nextstate)  else
此處的nextprops,nextstate 引數指的是將要更新的資料,它們與當前的資料進行對比,決定shouldcomponentupdate的return的值,決定函式是否需要繼續往下執行這樣做的意義:避免元件做無謂的執行,提高效能2,componentwillupdate 元件更新之前執行,它的執行取決於shouldcomponentupdate的return結果

3,緊接著會執行render函式

4,元件更新完成此時執行 componentdidupdate()

5,componentwillreceiveprops 執行的條件: 1,乙個元件要從父元件中接收引數

2,若此元件第一次存在于父元件中,則不執行;此元件之前已經存在過且進行了第二次甚至更多次的執行,則componentwillreceiveprops執行

注意注意:render生命周函式是唯一需要存在的,它繼承於 component,因為沒有內建render函式所以得自定義render函式

第4欄

在組建即將被剔除時執行componentwillupmount

應用場景

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 效能優化 減少無謂的渲...