我应该在React 16的componentDidUpdate中使用setState条件更新吗？

Question

我正在使用React 16，需要在 componentDidUpdate 内部调用条件 setState 。 setState 是异步执行的。因此，通常，如果我需要使用 state 来计算下一个 state ，则应使用 updater 函数作为 setState < / strong>。 React 16通过从 setState 返回 null 来取消 setState 更新的可能性。因此，我应该使用 updater 函数创建条件 setState 吗？

使用更新程序的代码：

componentDidUpdate(prevProps, prevState) {
    const prevValue = prevProps.value;
    this.setState((state, props) => {
        const nextValue = props.value;
        if (prevValue === nextValue) return null;
        const isIncreasing = prevValue < nextValue;
        if (prevState.isIncreasing === isIncreasing) return null;
        return { isIncreasing };
    });
}

没有更新程序的代码：

componentDidUpdate(prevProps, prevState) {
    const prevValue = prevProps.value;
    const nextValue = this.props.value;
    if (prevValue === nextValue) return;
    const isIncreasing = prevValue < nextValue;
    if (prevState.isIncreasing === isIncreasing) return;
    this.setState({ isIncreasing });
}

Answer 1

我认为除了风格上没有别的区别。我个人更喜欢第二种方法。两种方法都会导致另一个渲染周期，因此可以使用getDerivedStateFromProps，它会在组件渲染之前运行，并且不需要条件来防止无限循环：

static getDerivedStateFromProps(props, state) {
  return {
    prevValue: props.value,
    isIncreasing: props.value > state.prevValue, // First time will always be true since state.prevValue is undefined FYI
  };
}