react 17新增的生命週期

一、廢除的生命週期

官網文件指出使用這些生命週期的**會在未來版本的react中更容易產生bug，尤其是對於非同步渲染的版本

由於未來採用非同步渲染機制，所以即將在17版本中去掉的生命週期鉤子函式

componentwillmount

componentwillrecieveprops

componentwillupdate

二、新增的生命週期

static getderivedstatefromprops(nextprops, prevstate) {} 

在每次渲染之前都會呼叫，不管初始掛載還是後面的更新都會呼叫，這一點和componentwillreceiveprops不同（只有當父元件造成重新渲染時才呼叫

簡單的理解就說從props中獲取state，這個生命週期的功能實際上就是將傳入的props對映到state上面

getderivedstatefromprops是乙個靜態函式，也就是這個函式不能通過this訪問到class的屬性，也並不推薦直接訪問屬性。而是應該通過引數提供的nextprops以及prevstate來進行判斷，根據新傳入的props來對映到state

如果props傳入的內容不需要影響到你的state，那麼就需要返回乙個null，這個返回值是必須的，所以盡量將其寫到函式的末尾

static getderivedstatefromprops(nextprops, prevstate)  =nextprops;

//當傳入的type發生變化的時候，更新state
if (type !==prevstate.type) ;
}//否則，對於state不進行任何操作
return
null
;}

getsnapshotbeforeupdate() {} 

在最近的更改被提交到dom元素前，使得元件可以在更改之前獲得當前值，此生命週期返回的任意值都會傳給componentdidupdate()。

在最新的渲染資料提交給dom前會立即呼叫，它讓你在元件的資料可能要改變之前獲取他們

componenddidcatch(error, info)

如果乙個元件定義了componentdidcatch生命週期，則他將成為乙個錯誤邊界(錯誤邊界會捕捉渲染期間、在生命週期方法中和在它們之下整棵樹的建構函式中的錯誤，

就像使用了try catch，不會將錯誤直接丟擲了，保證應用的可用性)

三、基本使用

class a extends react.component 

//用於替換 `componentwillreceiveprops` ，該函式會在初始化和 `update` 時被呼叫
//因為該函式是靜態函式，所以取不到 `this`
//如果需要對比 `prevprops` 需要單獨在 `state` 中維護
static getderivedstatefromprops(nextprops, prevstate) {}
//判斷是否需要更新元件，多用於元件效能優化
shouldcomponentupdate(nextprops, nextstate) {}
//元件掛載後呼叫
//可以在該函式中進行請求或者訂閱
componentdidmount() {}
//用於獲得最新的 dom 資料
getsnapshotbeforeupdate() {}
//元件即將銷毀
//可以在此處移除訂閱，定時器等等
componentwillunmount() {}
//元件銷毀後呼叫
componentdidunmount() {}
//元件更新後呼叫
componentdidupdate() {}
//渲染元件函式
render() {}
}

未來版本react 17新增的生命週期

一 廢除的生命週期 官網文件指出使用這些生命週期的 會在未來版本的react中更容易產生bug，尤其是對於非同步渲染的版本 由於未來採用非同步渲染機制，所以即將在17版本中去掉的生命週期鉤子函式 componentwillmount componentwillrecieveprops compone...

React 生命週期 生命週期方法

生命週期 掛載 更新 解除安裝 元件被建立 執行初始化 並被掛載到dom中，完成元件的第一次渲染 constructor props getderivedstatefromprops props,state render componentdidmount 元件被建立時會首先呼叫元件的構造方法，接受...

react 生命週期

首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類，只呼叫一次，返回物件用於設定預設的props，對於引用值，會在例項中共享。2.getinitialstate 作用於元件的例項，在例項建立時呼叫一次，用於初始...