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

Question

我正在使用 React 16，需要在 componentDidUpdate 内调用条件 setState。 setState 是异步执行的。因此，通常，如果我需要使用 state 来计算下一个 state，我应该使用 updater 函数作为 setState< 的参数/强>。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
  };
}