react生命週期

2022-06-02 02:30:17 字數 1743 閱讀 7399

1、constructor

在這個生命週期函式的作用是做初始化工作的,在呼叫當前函式的時候必須在內部呼叫super,否則this的指向會發生錯誤的。

當前生命週期函式可以用來定義當前元件所需要用到的一些狀態值。

在constructor中如果需要使用props的時候在supers中繼承過來。

2、componentwillmount:掛載前

當前生命週期函式可以用來接受外部資料,將外部資料轉換成內部的資料,在這個生命週期裡面盡量不要使用setstate因為當前生命週期執行完畢以後就會執行render。

3、render渲染

當this.state/this.props發生改變的時候render函式就會執行render

用來做最後資料最後的修改

render函式每次執行的時候都會將虛擬dom在快取乙份,當下一次render函式執行的時候會與快取中的虛擬dom進行對比(這種對比就是diff演算法)將發生改變的虛擬dom進行更新。

當前生命週期函式在新版本中被廢除掉了

4、componentdidmount:掛載後

當前生命週期我們可以通過this.ref來獲取真實的dom結構

this.refs.屬性

一般情況下我們都會在當前週期函式中做資料的請求。

5、shouldcomponentupdate資料即將更新

當前生命週期函式必須有乙個返回值,如果返回true則繼續執行下面的生命週期函式,如果返回false則不會執行下面的生命週期函式

在這個生命週期函式中我們可以做效能的優化,如果說當前資料改變後沒有必要進行render的渲染我們就可以return false 如果需要進行渲染咋返回true來減少不必要的渲染

當前生命週期函式中會有兩個引數乙個是新的props,乙個是新的state

當前生命週期函式決定的是render函式是否渲染而不是資料是否更新

6、componentwillupdate

當前週期函式用來做資料最後的更新處理

當前生命週期函式中有2個引數乙個是新的props,乙個是舊的state。

7、componentdidupdate

資料更新完畢,獲取到資料更新的dom結構,當前生命週期函式會接受2個引數,乙個舊的props,乙個舊的state

8、componentwillreceiveprops

當this.props發生改變的時候那麼當前生命週期函式就會執行

當前生命週期中有乙個引數新的props

可以用來做外部資料的處理

9、componentwillunmount:

當前生命週期用來做元件的銷毀

一般情況下用來做事件的移除

元件第一次執行的時候會執行那些生命週期

constructor

componentwillmount

render

componentdidmount

那些生命週期函式只會執行一次

constructor

componentwillmount

componentdidmount

componentwillunmount

那些生命週期函式會執行多次

render

componentwillreceiveprops

shouldcomponentupdate

componentwillupdate

componentdidupdate

React 生命週期 生命週期方法

生命週期 掛載 更新 解除安裝 元件被建立 執行初始化 並被掛載到dom中,完成元件的第一次渲染 constructor props getderivedstatefromprops props,state render componentdidmount 元件被建立時會首先呼叫元件的構造方法,接受...

react 生命週期

首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類,只呼叫一次,返回物件用於設定預設的props,對於引用值,會在例項中共享。2.getinitialstate 作用於元件的例項,在例項建立時呼叫一次,用於初始...

react生命週期

盜圖一張 第一次進入頁面列印結果 1 parent constructor 2 parent conponentwillmount 3 parent render 4 initial render constructor 5 componentwillmount 6 render 7 compone...