react生命週期總結

2021-09-29 08:00:14 字數 1203 閱讀 1059

元件被建立插入dom中的時候,它的生命週期如下:

constructor()

static getderivedstatefromprops()

render()

componentdidmount()

constructor()建構函式

元件被載入時,最先呼叫(僅僅一次)

其中的作用是定義狀態變數

第乙個語句為super(props)

componentwillmount()

元件即將被裝載、渲染到頁面上(render()被呼叫之前)呼叫(僅僅呼叫一次)

在函式中呼叫setstate中改變狀態,react等setstate完成後再渲染元件

render()

在componentwillmount()之後,在componentdidmount()之前

生成虛擬的dom節點

渲染掛載元件

初始化頁面、接收新的props(父元件更新)

componentdidmount()

在render()之後被呼叫,僅僅呼叫一次

元件真正被裝載之後。

componentwillunmount

元件被解除安裝時呼叫

在該函式中執行任何必要的清理,定時器

componentwillupdate

元件即將更新,不能修改屬性和狀態
componentwillupdate()

元件已經更新
shouldcomponentupdate()

元件接收新的屬性或者新的狀態的時候呼叫(可以返回false,接受資料後不更新,阻止render呼叫,之後的函式將不被執行)
componentwillreceiveprops

元件將接收到屬性的時候呼叫,

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...