React 16.X 中 props 改变后在哪个生命周期中处理？

React面试题 5月前 0 57

在React 16.x版本中，当props发生改变时，我们常常在getDerivedStateFromProps或componentDidUpdate生命周期方法中处理。

getDerivedStateFromProps: 这个静态方法在每次重新渲染时都会触发（无论是props改变还是state改变）。它返回一个对象来更新状态，或者返回来表示不需要更新任何内容。这是一个很好的地方来根据新的props值更新你的组件状态。

static getDerivedStateFromProps(props, state) {
  if (props.count !== state.count) {
    return {
      count: props.count,
    };
  }
  return ;
}

componentDidUpdate: 这个方法在更新后会被立即调用。首次渲染不会执行此方法。在这个方法中，你可以进行网络请求或者更新DOM。同时，也可以比较旧的props和新的props，然后执行相应的逻辑。

componentDidUpdate(prevProps) {
  if (this.props.count !== prevProps.count) {
    this.setState({
      count: this.props.count,
    });
  }
}

需要注意的是，getDerivedStateFromProps的使用应该非常谨慎，因为它在每次渲染时都会运行，可能会带来性能问题。大部分情况下，你可能需要使用componentDidUpdate。