react生命週期

2021-08-16 23:53:00 字數 1295 閱讀 7270

mounting元件掛載相關的

componentwillmount元件將要掛載。在render函式之前執行,只執行一次,即使多次重複渲染該元件,、

或者改變元件的state的值

componentdidmount

元件已經掛載,在render之後執行,同乙個元件重複渲染只執行一次

元件更新相關的

componentwillrecetiveprops(object,nextprops)已經載入元件收到新的props之前呼叫

,注意元件初始化渲染時不會執行

shouldcomponentupdate(object nextprops,object nextstate)

元件判斷是否重新渲染時使用,該元件的介面實際是在元件接收到了新的props或者新的satate的

時候會立即呼叫

shouldcomponentwillupdate(object nextprops,object nextstate)元件將要更新

componentdidupdate(object prevprops,object prevstate)

元件已經更新

元件移除

componentwillunmount在元件將要被移除之前觸發,利用該方法來執行一些必要的

清理元件

生命週期中和props和state相關的

getdefaultprops 設定props屬性設定

getinitialstate 公升值state屬性初始值

建立階段只呼叫getdefaultprops:function()

在例項化階段

getinitialstate    設定this.state的預設值

componentwillmount  在render之前呼叫

render              渲染並返回乙個虛擬的dom

componentdidmount   在render之後呼叫,在該方法中react會使用render方法返回的虛擬的dom物件建立真實的dom結構

可以在這個方法中讀取dom結點

更新階段

componentwillreceiveprops

shouldcomponentupdate  如果返回的是false後面的方法則不執行(是否需要更新)

componentwillupdate

render

componentdidupdate

銷毀階段

componentwillunmount

移除元件

react.unmountcomponentatnode(掛載的物件)

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