前言
學習react,生命週期很重要,我們了解完生命週期的各個元件,對寫高效能元件會有很大的幫助.
ract生命週期
react 生命週期分為三種狀態 1. 初始化 2.更新 3.銷毀
初始化
1、getdefaultprops()
設定預設的props,也可以用dufaultprops設定元件的預設屬性.
2、getinitialstate()
在使用es6的class語法時是沒有這個鉤子函式的,可以直接在constructor中定義this.state。此時可以訪問this.props
3、componentwillmount()
元件初始化時只呼叫,以後元件更新不呼叫,整個生命週期只呼叫一次,此時可以修改state。
4、 render()
react最重要的步驟,建立虛擬dom,進行diff演算法,更新dom樹都在此進行。此時就不能更改state了。
5、componentdidmount()
元件渲染之後呼叫,只呼叫一次。
更新
6、componentwillreceiveprops(nextprops)
元件初始化時不呼叫,元件接受新的props時呼叫。
7、shouldcomponentupdate(nextprops, nextstate)
react效能優化非常重要的一環。元件接受新的state或者props時呼叫,我們可以設定在此對比前後兩個props和state是否相同,如果相同則返回false阻止更新,因為相同的屬性狀態一定會生成相同的dom樹,這樣就不需要創造新的dom樹和舊的dom樹進行diff演算法對比,節省大量效能,尤其是在dom結構複雜的時候
8、componentwillupdata(nextprops, nextstate)
元件初始化時不呼叫,只有在元件將要更新時才呼叫,此時可以修改state
9、render()
元件渲染
10、componentdidupdate()
元件初始化時不呼叫,元件更新完成後呼叫,此時可以獲取dom節點。
解除安裝
11、componentwillunmount()
元件將要解除安裝時呼叫,一些事件監聽和定時器需要在此時清除。
react生命週期詳解
1 生命週期指的是元件從初始化開始到結束的過程 或者是生命週期是描述react元件從開始到結束的過程 2 每個react元件都具有生命週期 3 react都對元件通過生命週期給予的鉤子函式進行管理 指的是系統某些狀態和引數發生改變的時候,系統立馬去通知對應處理的函式 叫做鉤子函式。一方面有變動。另一...
React生命週期詳解
react生命週期 一 舊版 二 新版 從圖中,我們可以清楚知道react的生命週期分為三個部分 例項化 存在期和銷毀時。舊版生命週期如果要開啟async rendering,在render函式之前的所有函式,都有可能被執行多次。舊版的react生命週期看圖就可以啦,我們就不詳細講解了,下面我們來詳...
react生命週期詳解
react的生命週期從廣義上分為三個階段 掛載 渲染 解除安裝 因此可以把react的生命週期分為兩類 掛載解除安裝過程和更新過程。react的生命週期圖 react生命週期圖 constructor 中完成了react資料的初始化,它接受兩個引數 props和context,當想在函式內部使用這兩...