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