React this.setState的异步行为

Question

我看到setState是异步的。所以，如果我打电话：

this.setState({ variable: true });

立即致电：

this.setState({ variable: false });

在调用render之前，我保证＆＃39;变量＆＃39; React完成处理后会出错吗？换句话说，异步操作是同步的吗？渲染会被调用两次，或者会变换为＆＃39;被覆盖并使用variable = false调用一次？

Answer 1

来自setState的反应文档：

  

setState()并不总是立即更新组件。有可能   批量或推迟更新，直到稍后。这使得阅读this.state   在致电setState()潜在的陷阱之后。相反，使用   componentDidUpdate或setState回调（setState(updater, callback)），其中任何一个都保证在更新后触发   已经应用。如果需要根据以前的状态设置状态   state，请阅读下面的updater参数。

所以你的逻辑不应该依赖setState执行时间。如果您想控制渲染，则应考虑使用shouldComponentUpdate(nextProps, nextState)。

  

使用shouldComponentUpdate()让React了解组件是否正常   输出不受当前状态或道具变化的影响。该   默认行为是在每个状态更改时重新呈现，并在   绝大多数情况下你应该依赖默认行为。

Answer 2

最好不要依赖这种行为。它只会有效而不是其他人。

要可靠地设置多个状态属性，请收集所有更新并在一次调用中设置它们：

const changes = {};

if (some logic) { changes.variable = true; }

if (some more logic) { changes.variable = false; }

this.setState(changes);

Answer 3

好问题！让我好奇，所以我掀起了这个 JSFiddle 来证明这种行为。

  

React calls render synchronously after your event handler.

这意味着因为您在同一个函数中进行了两次更新，所以在函数完成之后才会重新渲染。这意味着在每次渲染中，this.state.variable都是false。