React v16.3 新生命周期介紹與使用

一丶React 16.3版本中去掉了以下的三個生命周期：

 1.componentWillMount

 2.componentWillReceiveProps

 3.componentWillUpdate

新增了兩個生命周期方法：

static getDerivedStateFromProps

getSnapshotBeforeUpdate

static getDerivedStateFromProps

  觸發時間：在元件建構之後(虛拟dom之後，實際dom挂載之前) ，以及每次擷取新的props之後。

  每次接收新的props之後都會傳回一個對象作為新的state，傳回null則說明不需要更新state.

  與componentDidUpdate一起使用，可以覆寫componentWillReceiveProps的所有用法

getSnapshotBeforeUpdate

   觸發時間: update發生的時候，在render之後，在元件dom渲染之前。

   傳回一個值，作為componentDidUpdate的第三個參數。

  配合componentDidUpdate, 可以覆寫componentWillUpdate的所有用法。

二丶建議用法

class ReactClass extends React.Component {

  // 用于初始化 state

  constructor() {}

  // 用于替換 `componentWillReceiveProps` ，該函數會在初始化和 `update` 時被調用

  // 因為該函數是靜态函數，是以取不到 `this`

  // 如果需要對比 `prevProps` 需要單獨在 `state` 中維護

  static getDerivedStateFromProps(nextProps, prevState) {}

  // 判斷是否需要更新元件，多用于元件性能優化

  shouldComponentUpdate(nextProps, nextState) {}

  // 元件挂載後調用

  // 可以在該函數中進行請求或者訂閱

  componentDidMount() {}

  // 用于獲得最新的 DOM 資料

  getSnapshotBeforeUpdate() {}

  // 元件即将銷毀

  // 可以在此處移除訂閱，定時器等等

  componentWillUnmount() {}

  // 元件銷毀後調用

  componentDidUnMount() {}

  // 元件更新後調用

  componentDidUpdate() {}

  // 渲染元件函數

  render() {}

  // 以下函數不建議使用

  UNSAFE_componentWillMount() {}

  UNSAFE_componentWillUpdate(nextProps, nextState) {}

  UNSAFE_componentWillReceiveProps(nextProps) {}

}