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将导致重新渲染？

Answer 1

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

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

Answer 2

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

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

修改 This post对大多数情况下的事件顺序有很好的总结。你会找到关于中途的州部分，但我会在这里总结一下：

订单：

更新状态

ShouldComponentUpdate

ComponentWillUpdate

渲染

...

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

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

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

还有关于批处理的讨论：

https://groups.google.com/forum/#!topic/reactjs/G6pljvpTGX0

React保持单个setState调用？

2 个答案: