React生命週期詳解

2021-09-19 03:48:42 字數 1268 閱讀 5407

前言

學習react,生命週期很重要,我們了解完生命週期的各個元件,對寫高效能元件會有很大的幫助.

ract生命週期

react 生命週期分為三種狀態 1. 初始化 2.更新 3.銷毀

初始化

1、getdefaultprops()

設定預設的props,也可以用dufaultprops設定元件的預設屬性.

2、getinitialstate()

在使用es6的class語法時是沒有這個鉤子函式的,可以直接在constructor中定義this.state。此時可以訪問this.props

3、componentwillmount()

元件初始化時只呼叫,以後元件更新不呼叫,整個生命週期只呼叫一次,此時可以修改state。

4、 render()

react最重要的步驟,建立虛擬dom,進行diff演算法,更新dom樹都在此進行。此時就不能更改state了。

5、componentdidmount()

元件渲染之後呼叫,只呼叫一次。

更新

6、componentwillreceiveprops(nextprops)

元件初始化時不呼叫,元件接受新的props時呼叫。

7、shouldcomponentupdate(nextprops, nextstate)

react效能優化非常重要的一環。元件接受新的state或者props時呼叫,我們可以設定在此對比前後兩個props和state是否相同,如果相同則返回false阻止更新,因為相同的屬性狀態一定會生成相同的dom樹,這樣就不需要創造新的dom樹和舊的dom樹進行diff演算法對比,節省大量效能,尤其是在dom結構複雜的時候

8、componentwillupdata(nextprops, nextstate)

元件初始化時不呼叫,只有在元件將要更新時才呼叫,此時可以修改state

9、render()

元件渲染

10、componentdidupdate()

元件初始化時不呼叫,元件更新完成後呼叫,此時可以獲取dom節點。

解除安裝

11、componentwillunmount()

元件將要解除安裝時呼叫,一些事件監聽和定時器需要在此時清除。

react生命週期詳解

1 生命週期指的是元件從初始化開始到結束的過程 或者是生命週期是描述react元件從開始到結束的過程 2 每個react元件都具有生命週期 3 react都對元件通過生命週期給予的鉤子函式進行管理 指的是系統某些狀態和引數發生改變的時候,系統立馬去通知對應處理的函式 叫做鉤子函式。一方面有變動。另一...

React生命週期詳解

react生命週期 一 舊版 二 新版 從圖中,我們可以清楚知道react的生命週期分為三個部分 例項化 存在期和銷毀時。舊版生命週期如果要開啟async rendering,在render函式之前的所有函式,都有可能被執行多次。舊版的react生命週期看圖就可以啦,我們就不詳細講解了,下面我們來詳...

react生命週期詳解

react的生命週期從廣義上分為三個階段 掛載 渲染 解除安裝 因此可以把react的生命週期分為兩類 掛載解除安裝過程和更新過程。react的生命週期圖 react生命週期圖 constructor 中完成了react資料的初始化,它接受兩個引數 props和context,當想在函式內部使用這兩...