React v16 生命周期

React 16 生命周期

react-life-cycle.jpg

React 16.3 新增的生命周期方法

getDerivedStateFromProps()
getSnapshotBeforeUpdate()

逐渐废弃的生命周期方法：

componentWillMount()
componentWillReceiveProps()
componentWillUpdate()

一般将生命周期分成三个阶段：

• 创建阶段（Mounting）
• 更新阶段（Updating）
• 卸载阶段（Unmounting）

从 React v16 开始，还对生命周期加入了错误处理（Error Handling）。

下面分析一下生命周期的各个阶段。

创建阶段 Mounting

组件实例创建并插入 DOM 时，按顺序调用以下方法：

constructor()
static getDerivedStateFromProps()
componentWillMount()/UNSAFE_componentWillMount()（being deprecated）
render()
componentDidMount()

有定义 getDerivedStateFromProps 时，会忽略componentWillMount()/UNSAFE_componentWillMount()

static getDerivedStateFromProps()
static getDerivedStateFromProps(nextProps, prevState)

当创建时、接收新的 props 时、setState 时、forceUpdate 时会执行这个方法。

这是一个 静态方法，参数 nextProps 是新接收的 props，prevState 是当前的 state。返回值（对象）将用于更新 state，如果不需要更新则需要返回 null。

下面是官方文档给出的例子

class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {
    isScrollingDown: false,
    lastRow: null,
  };
 
  static getDerivedStateFromProps(props, state) {
    if (props.currentRow !== state.lastRow) {
      return {
        isScrollingDown: props.currentRow > state.lastRow,
        lastRow: props.currentRow,
      };
    }
 
    // Return null to indicate no change to state.
    return null;
  }

这个方法的常用作用也很明显了：父组件传入新的 props 时，用来和当前的 state 对比，判断是否需要更新 state。以前一般使用 componentWillReceiveProps 做这个操作。

这个方法在建议尽量少用，只在必要的场景中使用，一般使用场景如下：

无条件的根据 props 更新 state，当 props 和 state 的不匹配情况更新 state

之前有些人会把异步请求放在这个生命周期，其实大部分情况下都推荐把异步数据请求放在 componentDidMount() 中。
在服务端渲染时，通常使用 componentWillMount() 获取必要的同步数据，但是可以使用 constructor() 代替它。

可以使用 setState，不会触发 re-render

更新阶段 Updating

componentWillReceiveProps()/UNSAFE_componentWillReceiveProps()（being deprecated）
static getDerivedStateFromProps()
shouldComponentUpdate()
componentWillUpdate()/UNSAFE_componentWillUpdate()（being deprecated）
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

有 getDerivedStateFromProps 或者 getSnapshotBeforeUpdate 时，componentWillReceiveProps()/UNSAFE_componentWillReceiveProps() 和 componentWillUpdate()/UNSAFE_componentWillUpdate() 不会执行 （详情查看源码）

componentWillReceiveProps()/UNSAFE_componentWillReceiveProps()（弃用）

UNSAFE_componentWillReceiveProps(nextProps)

这个方法在接收新的 props 时触发，即使 props 没有变化也会触发。

一般用这个方法来判断 props 的前后变化来更新 state，如下面的例子：

class ExampleComponent extends React.Component {
state = {
isScrollingDown: false,
};

componentWillReceiveProps(nextProps) {
if (this.props.currentRow !== nextProps.currentRow) {
this.setState({
isScrollingDown:
nextProps.currentRow > this.props.currentRow,
});
}
}
}

这个方法将被弃用，推荐使用 getDerivedStateFromProps 代替。

可以使用 setState

static getDerivedStateFromProps()

同 Mounting 时所述一致。

shouldComponentUpdate()

在接收新的 props 或新的 state 时，在渲染前会触发该方法。

该方法通过返回 true 或者 false 来确定是否需要触发新的渲染。返回 false， 则不会触发后续的 UNSAFE_componentWillUpdate()、render() 和 componentDidUpdate()（但是 state 变化还是可能引起子组件重新渲染）。

所以通常通过这个方法对 props 和 state 做比较，从而避免一些不必要的渲染。

PureComponent 的原理就是对 props 和 state 进行浅对比（shallow comparison），来判断是否触发渲染。

总结
虽然 React 有做向下兼容，但是推荐尽量避免使用废弃的生命周期，而是拥抱未来，用新的生命周期替换它们。

如果你不想升级 React，但是想用新的生命周期方法，也是可以的。使用 react-lifecycles-compat polyfill，可以为低版本的 React（0.14.9+）提供新的生命周期方法。