React 生命週期

react 生命週期

設定預設的props，也可以用dufaultprops設定元件的預設屬性.

2、getinitialstate()

在使用es6的class語法時是沒有這個鉤子函式的，可以直接在constructor中定義this.state。此時可以訪問this.props

3、componentwillmount()

元件初始化時只呼叫，以後元件更新不呼叫，整個生命週期只呼叫一次，此時可以修改state。

4、 render()

react最重要的步驟，建立虛擬dom，進行diff演算法，更新dom樹都在此進行。此時就不能更改state了。

5、componentdidmount()

元件渲染之後呼叫，只呼叫一次。

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 生命週期 生命週期方法

生命週期 掛載 更新 解除安裝 元件被建立 執行初始化 並被掛載到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...