元件被建立插入dom中的時候,它的生命週期如下:
constructor()
static getderivedstatefromprops()
render()
componentdidmount()
constructor()建構函式
元件被載入時,最先呼叫(僅僅一次)
其中的作用是定義狀態變數
第乙個語句為super(props)
componentwillmount()
元件即將被裝載、渲染到頁面上(render()被呼叫之前)呼叫(僅僅呼叫一次)
在函式中呼叫setstate中改變狀態,react等setstate完成後再渲染元件
render()
在componentwillmount()之後,在componentdidmount()之前
生成虛擬的dom節點
渲染掛載元件
初始化頁面、接收新的props(父元件更新)
componentdidmount()
在render()之後被呼叫,僅僅呼叫一次
元件真正被裝載之後。
componentwillunmount
元件被解除安裝時呼叫
在該函式中執行任何必要的清理,定時器
componentwillupdate
元件即將更新,不能修改屬性和狀態
componentwillupdate()
元件已經更新
shouldcomponentupdate()
元件接收新的屬性或者新的狀態的時候呼叫(可以返回false,接受資料後不更新,阻止render呼叫,之後的函式將不被執行)
componentwillreceiveprops
元件將接收到屬性的時候呼叫,
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...