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