反应setState语法

Question

我的问题很简单，我发现状态在这样的几个地方正在更新，并且想知道为什么要使用这种语法：

const showFlagRev = this.state.showFlag;
this.setState({showFlag: !showFlagRev});

使用此语法：

this.setState(prevState => ({showFlag: !prevState.showFlagRev}));

这是否有任何原因，或者这只是一种旧的（也许更清晰？）在React应用程序中更新状态的方式？

非常感谢任何参考资料（文档，文章，示例）！

Answer 1

来自docs：

setState()的这种形式也是异步的，并且在同一周期内的多个调用可以一起批处理。例如，如果您尝试在同一周期内多次增加项目数量，则将导致以下结果：

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

后续调用将覆盖同一周期中先前调用的值，因此数量只会增加一次。如果下一个状态取决于当前状态，我们建议使用updater函数形式，而不是：

this.setState((state) => {
  return {quantity: state.quantity + 1};
});