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

一、廢除的生命周期

 

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

　　由於未來采用異步渲染機制，所以即將在17版本中去掉的生命周期鈎子函數

　　componentWillMount

　　componentWillRecieveProps

　　componentWIllUpdate

 

二、新增的生命周期

　　

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

 

三、基本使用

　　

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