新增加的生命週期有：1、getDerivedStateFromProps，用來控制props更新state的過程；2、getSnapshotBeforeUpdate，用來讀取最新的DOM資料；3、componendDidCatch。
本教學操作環境：Windows7系統、react17.0.1版、Dell G3電腦。
學習React，生命週期很重要，我們了解完生命週期的各個元件，對寫入高效能元件會有很大的幫助.
React 生命週期分為三種狀態1 .初始化2.更新3.銷毀
一、廢除的生命週期
# 官網文件指出使用這些生命週期的程式碼會在未來版本的react中更容易產生bug，尤其是對於非同步渲染的版本
由於未來採用非同步渲染機制，所以即將在17版中去掉的生命週期鉤子函數
componentWillMount
componentWillRecieveProps
# componentWIllUpdate
# componentWIll上
getDerivedStateFromProps(nextProps, prevState)
用於取代componentWillReceiveProps，可以用來控制props 更新state 的過程；它傳回一個物件表示新的state；如果不需要更新，返回 null 即可
在每次渲染之前都會調用，不管初始掛載還是後面的更新都會調用，這一點和componentWillReceiveProps不同（只有當父組件造成重新渲染時才呼叫
簡單的理解就說從props取得state，這個生命週期的功能其實就是將傳入的props對應到state上面
getDerivedStateFromProps是一個靜態函數，也就是這個函數不能透過this存取到class的屬性，也不推薦直接存取屬性。而是應該透過參數提供的nextProps以及prevState來進行判斷，根據新傳入的props來對應到state
如果props傳入的內容不需要影響到你的state，那麼就需要回傳一個null，這個回傳值是必須的，所以盡量將其寫到函數的結尾
static getDerivedStateFromProps(nextProps, prevState) {
const {type} = nextProps;
// 当传入的type发生变化的时候，更新state
if (type !== prevState.type) {
return {
type,
};
}
// 否则，对于state不进行任何操作
return null;
}getSnapshotBeforeUpdate()
在最近的變更提交到DOM元素前，使得元件可以在更改之前獲得當前值，此生命週期傳回的任意值都會傳給componentDidUpdate()。
#用於替換componentWillUpdate，函數會在update後DOM 更新前被調用，用於讀取最新的DOM 數據，返回值將作為componentDidUpdate 的第三個參數
#在最新的渲染數據提交給DOM前會立即調用，它讓你在組件的資料可能要改變之前獲取他們
componendDidCatch(error, info)
如果一個元件定義了componentDidCatch生命週期，則他將成為一個錯誤邊界(錯誤邊界會捕捉渲染期間、在生命週期方法中和在它們之下整棵樹的構造函數中的錯誤，
#就像使用了try catch，不會將錯誤直接拋出了，保證應用的可用性)
三、基本使用
class A extends React.Component {
// 用于初始化 state
constructor() {}
// 用于替换 `componentWillReceiveProps` ，该函数会在初始化和 `update` 时被调用
// 因为该函数是静态函数，所以取不到 `this`
// 如果需要对比 `prevProps` 需要单独在 `state` 中维护
static getDerivedStateFromProps(nextProps, prevState) {}
// 判断是否需要更新组件，多用于组件性能优化
shouldComponentUpdate(nextProps, nextState) {}
// 组件挂载后调用
// 可以在该函数中进行请求或者订阅
componentDidMount() {}
// 用于获得最新的 DOM 数据
getSnapshotBeforeUpdate() {}
// 组件即将销毁
// 可以在此处移除订阅，定时器等等
componentWillUnmount() {}
// 组件销毁后调用
componentDidUnMount() {}
// 组件更新后调用
componentDidUpdate() {}
// 渲染组件函数
render() {}
}【相關推薦：Redis影片教學】
以上是react新增加的生命週期有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
