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

Question

我正在使用 React 16，需要在 componentDidUpdate 中调用条件 setState。 setState 异步执行。所以，通常，如果我需要使用 state 来计算我的下一个 state 我应该使用 updater 函数作为 setState 的参数。 React 16 添加了通过从 setState 返回 null 来取消 setState 更新的可能性。那么，我是否应该使用 updater 函数来创建条件 setState?

使用 updater 的代码:

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
  };
}

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

Should I use setState conditional updates in componentDidUpdate in React 16?

javascript

setstate

reactjs