react生命週期函式(學習筆記)

2021-10-09 23:24:30 字數 1513 閱讀 1658

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

react宣告週期的四個大階段:

initialization:初始化階段。

mounting: 掛載階段。

updation: 更新階段。

unmounting: 銷毀階段

render()函式,就是乙個生命週期函式,它在state發生改變時自動執行。這就是乙個標準的自動執行函式。

constructor不算生命週期函式。我們叫建構函式,它是es6的基本語法。雖然它和生命週期函式的性質一樣,但不能認為是生命週期函式。

mounting階段叫掛載階段,伴隨著整個虛擬dom的生成,它裡邊有三個小的生命週期函式,分別是:

componentwillmount : 在元件即將被掛載到頁面的時刻執行。

render : 頁面state或props發生變化時執行。

componentdidmount : 元件掛載完成時被執行。

componentwillmount和componentdidmount這兩個生命週期函式,只在頁面重新整理時執行一次,而render函式是只要有state和props變化就會執行。

react生命週期中的updation階段,也就是元件發生改變的更新階段,它有兩個基本部分組成,乙個是props屬性改變,乙個是state狀態改變。1-shouldcomponentupdate—元件發生改變前執行

2-componentwillupdate—元件更新前,shouldcomponentupdate函式之後執行

3-render----開始掛載渲染

4-componentdidupdate----元件更新之後執行

shouldcomponentupdate函式會在元件更新之前,自動被執行。比如寫入

它要求返回乙個布林型別的結果,必須有返回值,返回true,就同意元件更新;返回false,就反對元件更新。

componentwillupdate在元件更新之前,在shouldcomponenupdate之後被執行。但是如果shouldcomponentupdate返回false,這個函式就不會被執行了。

componentdidupdate在元件更新之後執行。

componentwillreceiveprops 函式

凡是元件都有生命週期函式,所以子元件也是有的,並且子元件接收了props,這時候函式就可以被執行了。

子元件接收到父元件傳遞過來的引數,父元件render函式重新被執行,這個生命週期就會被執行。

也就是說這個元件第一次存在於dom中,函式是不會被執行的;

如果已經存在於dom中,函式才會被執行。

componentwillunmount,它是在元件去除時執行。

shouldcomponentupdate函式,改善react元件效能的例子。

nextprops:變化後的屬性;nextstate:變化後的狀態;

shouldcomponentupdate

(nextprops,nextstate)

else

}

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