一、廢除的生命週期
官網文件指出使用這些生命週期的**會在未來版本的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;
}
在最近的更改被提交到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...
React16新增生命週期與舊版本生命週期的區別
舊版本生命週期 react16新增生命週期 總結 1.react16新的生命週期棄用了componentwillmount componentwillreceiveporps，componentwillupdate 2.新增了getderivedstatefromprops getsnapshotb...
React16 新增的生命週期
圖源出處 新增的生命週期getderivedstatefromprops getsnapshotbeforeupdate componentdidcatch getderivedstatefromerror 廢棄的生命週期 react17去除，react16不允許和新的生命週期同時使用 compon...