react的生命週期

1、元件生命週期的執行次數是什麼樣子的？

只執行一次： constructor、componentwillmount、componentdidmount

執行多次：render 、子元件的componentwillreceiveprops、componentwillupdate、componentdidupdate
有條件的執行：componentwillunmount（頁面離開，元件銷毀時）
不執行的：根元件（reactdom.render在dom上的元件）的componentwillreceiveprops（因為壓根沒有父元件給傳遞props）

parent: constructor --> componentwillmount --> render -->

child: constructor --> componentwillmount --> render -->

parent: componentwillreceiveprops --> componentwillupdate --> render -->

child: componentwillreceiveprops --> componentwillupdate --> render -->

那如果是觸發parent的setstate呢

parent： componentwillupdate --> render --> 

child:     componentwillreceiveprops --> componentwillupdate --> render --> 
componentdidupdate (child) -->  componentdidupdate (parent)

child： componentwillupdate --> render -->  componentdidupdate (child)

1、如圖：完成前的順序是從根部到子部，完成時時從子部到根部。（類似於事件機制）

2、每個元件的紅線（包括初次和更新）生命週期時一股腦執行完畢以後再執行低一級別的紅線生命週期。

3

、第一級別的元件

setstate

是不能觸發其父元件的生命週期更新函式，只能觸發更低一級別的生命週期更新函式。

3、很牛的shouldcomponentupdate

import react,  from 'react'

class example extends purecomponent 
}

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