React的生命週期函式

2021-10-08 09:43:52 字數 1717 閱讀 7059

react的生命週期函式

生命週期函式指的是在某乙個時刻元件會自動呼叫的函式

生命週期函式針對的是元件來說的

每乙個元件都會有這些生命 週期函式

constructor函式也可以被認為是生命週期函式,它在元件一被建立呼叫了

componentwillmount()

componentwillmount函式在元件掛載到頁面之前呼叫

componentdidmount()

componentdidmount函式在元件完成掛載到頁面之後呼叫

一般我會把非同步的ajax請求放在這個函式裡,

好處:這個函式只會被執行一次,所以減少了頻繁的ajax請求

這個函式是在頁面掛載完畢之後才執行,所以這個時候請求資料比較好

其他生命週期函式也可以放ajax請求,但是或多或少會出現一些問題,

但是放在這個函式當中絕對沒問題

componentwillreceiveprops

(nextprops, nextcontext)

乙個元件要從父元件接收引數

如果這個元件第一次存在于父元件中,不會執行

只有這個元件之前已經存在于父元件中,才會被執行

並且他會在父元件的componentdidupdate函式之前執行

確認是否要進行資料的更新,

返回的是布林值

true表示可以繼續執行下乙個函式

false表示不繼續執行下面的函式,之後的所有生命週期函式都無法被執行

在實際應用中,為了避免render函式做無謂的渲染,

我們一般都會用shouldcomponentupdate的引數進行判斷,

來確認是否需要繼續進行render函式

可以提公升元件的效能

componentwillupdate

(nextprops, nextstate, nextcontext)

在元件被更新之前呼叫

當shouldcomponentupdate返回true的時候它才執行

如果返回的是false就不會執行了

componentdidupdate

(prevprops, prevstate, snapshot)

元件更新完之後才會被執行

componentwillunmount()

元件在頁面上被徹底清除的時候執行,

render()

在資料更新或者第一次掛載元件的時候都會被執行

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