react的生命週期

2021-09-01 23:22:41 字數 1954 閱讀 6802

react的生命週期

靜態屬性中設定預設屬性,在沒有設定的情況下走預設設定

2、 constructor

建構函式使用需要super();的配合 ,若沒有super()的配合會報錯

在這裡面設定狀態 this.state ===> this.state = 後面是物件

3、componentwillmount

元件經過上面的步驟初始化資料後,將要渲染元件

在元件渲染之前我們可以做些什麼,在這裡進行設定

一般用的比較少

不建議在這處使用ajax請求

4、render

元件根據render裡return後面的內容進行渲染,將react生成的虛擬dom結構渲染成真實的dom結構

return後面若要換行需要用( ) 括起來

render())}

5、componentdidmount

元件渲染完成,這是的dom節點生成,可以在這個地方發起ajax請求,通過setstate後更換資料,元件重新渲染

6、shouldcomponentupdate(nextprops,nextstate)

元件是否需要更新

shouldcomponentupdate(nextprops,nextstate)
7、componentwillupdate(nextprops,nextstate)

在shouldcomponentupdate返回true以後,元件重新進入到渲染的流程,在更新之前做點什麼

8、componentdidupdate

元件更新完成之後做什麼

9、componentwillunmount

元件解除安裝

這裡可以清除定時器,移除所有的監聽事件

10、componentwillreceiveprops (nextprops)

componentwillreceiveprops(newprops)

//return 為true接收屬性

對於這些生命週期 在使用的時候建議都輸出下arguments看看到底有哪些屬性,我們操作的時候又需要哪些屬性

import react, from 'react';

import reactdom, from 'react-dom';

class hello extends component;

constructor()

}handleclick = ()=>)

};componentwillmount();

componentdidmount();

componentwilunmount();

shouldcomponentupdate(nextprops,nextstate)

componentwillupdate()

componentdidupdate()

destroy()

render()

按鈕 )}

}class child extends component

componentdidmount()

componentwillreceiveprops(newprops)

shouldcomponentupdate(newprops,nextstate)

componentwillupdate()

componentwillunmount()

render())}

}reactdom.render(,window.root);

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