React生命週期

元件的生命週期分成三個狀態：

在元件被渲染到頁面上之前執行，在元件的整個生命週期內只執行一次

- 這個時候是做如下操作的好時機：

- 發起ajax請求
- 設定 setinterval、settimeout 等計時器操作
- 讀取本地儲存資料

元件被渲染到頁面上後立馬執行，在元件的整個生命週期內只執行一次。

- 這個時候是做如下操作的好時機：

- 某些依賴元件 dom 節點的操作

在初始化時不會被呼叫，可能在以下兩種情況下被呼叫：

* 當元件 shouldcomponentupdate 返回 true 且接收到新的props或者state但還沒有render時被呼叫

* 或者呼叫 forceupdate 時將觸發此函式

在元件完成更新後立即呼叫。在初始化時不會被呼叫。

* 在此處是做這些事情的好時機：

* 執行依賴新 dom 節點的操作。
* 依據新的屬性發起新的網路請求。
>注意：一定要在確認屬性變化後再發起ajax請求，否則極有可能進入死迴圈：didupdate -> ajax -> changeprops -> didupdate -> ...）

在元件從 dom 中移除之前立刻被呼叫。

* 此處最適合做以下操作

- 清除定時器、
- 終止ajax請求

該方法在初始化render時不會被呼叫，可能在以下兩種情況下被呼叫：

* 元件接收到了新的屬性。新的屬性會通過 nextprops 獲取到。

* 元件沒有收到新的屬性，但是由於父元件重新渲染導致當前元件也被重新渲染。

需要返回乙個布林值來決定是否重新渲染元件，在元件接收到新的props或者state時被呼叫。

* 在初始化時或者使用forceupdate時不被呼叫。

* 可以在你確認不需要更新元件時使用。

ps：這是乙個詢問式的生命週期函式，如果返回true，元件將觸發重新渲染過程，如果返回false 元件將不會觸發重新渲染。因此，合理地利用該函式可以一定程度節省開銷，提高系統的效能

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