问为什么setState在reactjs中是异步的，而不是同步的？

EN

您可以在状态值更新后调用函数：

this.setState({foo: 'bar'}, () => { 
    // Do something here. 
});

此外，如果您有许多状态需要一次更新，请将它们都分组到同一个setState中

而不是：

this.setState({foo: "one"}, () => {
    this.setState({bar: "two"});
});

只需执行以下操作：

this.setState({
    foo: "one",
    bar: "two"
});

1) setState操作是异步的，并且是批处理的，以提高性能。这在setState的文档中有解释。

setState()不会立即改变this.state，但会创建一个挂起的状态转换。在调用此方法后访问this.state可能会返回现有值。不能保证对setState的调用的同步操作，可能会对调用进行批处理以提高性能。

2)为什么他们要使setState异步，因为JS是单线程语言，而此setState不是WebAPI或服务器调用？

这是因为setState改变了状态并导致重新呈现。这可能是一个昂贵的操作，使其同步可能会使浏览器无响应。

因此，setState调用是异步的，并且是批处理的，以获得更好的UI体验和性能。

我知道这个问题很老了，但是很长一段时间以来，它一直给包括我在内的许多reactjs用户带来了很多困惑。最近，丹·阿布拉莫夫(来自react团队)写了一个很好的解释，解释了为什么setState的本质是异步的：

https://github.com/facebook/react/issues/11527#issuecomment-360199710

在更改状态的场景中，ReactJS会考虑许多变量，以决定何时应该实际更新state并重新呈现组件。

演示这一点的一个简单示例是，如果您调用setState作为对用户操作的响应，那么state可能会立即更新(尽管，同样，您不能指望它)，因此用户不会感觉到任何延迟，但是如果您调用setState来响应ajax调用响应或其他不是由用户触发的事件，那么状态更新可能会有轻微的延迟，因为用户不会真正感受到这种延迟，并且它将通过等待将多个状态更新批处理在一起并较少地重新呈现DOM来提高性能。