javascript - 对单个 setState 调用做出反应？

Question

假设在一个函数中，我总是需要设置someState，并且只需要设置someOtherState是否condition为真。

最好这样做：

this.setState({ someState });

if (condition) {
  this.setState({ someOtherState });
}

或这个？

if (condition) {
  this.setState({ someState, someOtherState });
} else {
  this.setState({ someState });
}

我知道 React 已经过优化，因此快速连续调用setState通常不会导致重新渲染。但是这种行为是否得到保证，或者代码是否应该做出这样的假设？

例如。假设它通过在固定时间间隔上重新渲染来工作，如果第一个setState在该间隔块结束之前被调用，那么第二个setState将导致重新渲染？

score 2 · Accepted Answer

为什么不使用三元运算符？如果条件为真，则将其设置为新状态。否则，使用旧的。

this.setState(prevState => ({
  someState,
  someOtherState: condition ? newSomeOtherState : prevState.someOtherState
}))

score 0 · Accepted Answer

React 批处理 setState 调用，因此执行顺序更新调用应该只触发一次渲染调用。

如果您在 React 托管事件函数（React 事件系统）中，您可以假设它将被批处理。例如，如果它是一个 AJAX 调用，或者像 Promise 或 setTimeout 之类的其他延迟函数，它们将不会被批处理。

编辑这篇文章很好地总结了大多数情况下的事件顺序。您会在大约一半的地方找到 state 部分，但我会在这里尝试总结一下：

订单进行：

如果你在其中一个函数中调用多个函数，React 足够聪明，可以等到它们完成后再运行批量更新。

有关 setState 的详细信息，请参阅此处的 React 文档：

（链接限制：facebook.github.io）/react/docs/react-component.html#setstate

以及关于批处理的讨论：

2 回答 2