对单个 setState 调用做出反应？答案

【问题标题】：React keep to single setState call?对单个 setState 调用做出反应？
【发布时间】：2017-12-25 12:18:48
【问题描述】：

假设在一个函数中，我总是需要设置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 将导致重新渲染？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

下单：

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

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

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

还有关于批处理的讨论：

【讨论】：