React 保持单个 setState 调用？

Question

假设在一个函数中，我总是需要设置someState，只有当condition为真时才需要设置someOtherState。

这样比较好:

this.setState({ someState });

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

还是这个？

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

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

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

Answer 1

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

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

编辑 This post 对大多数情况下的事件顺序有很好的总结。您会在大约一半的位置找到状态部分，但我会尝试在这里进行总结：

订单执行：

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

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

(Link 限制: facebook.github.io)/react/docs/react-component.html#setstate

这里还有关于批处理的讨论：

Answer 2

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

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

React keep to single setState call?