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

}