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