【react】---17新增的生命週期

1、廢除的生命週期

 

　　官網文檔指出使用這些生命週期的代碼會在將來版本的react中更容易產生bug，尤爲是對於異步渲染的版本

　　因爲將來採用異步渲染機制，因此即將在17版本中去掉的生命週期鉤子函數

　　componentWillMount

　　componentWillRecieveProps

　　componentWIllUpdate

 

2、新增的生命週期

　　

　 static 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，不會將錯誤直接拋出了，保證應用的可用性)

 

3、基本使用

　　

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() {} }