React中this.setState是同步还是异步？为什么要设计成异步？

在使用react的时候，this.setState为什么是异步呢？

一直以来没有深思这个问题。昨天就此问题搜索了一下。

react创始人之一 Dan Abramov gaearon在GitHub上回答了这一问题，以下是阅读后的一些总结吧

1.保持内部的一致性

即使state是同步更新，但是props也不是。props在重新渲染父组件之前，我们无法知道。眼下所提供的对象（state，props， refs）是内部一致性，这就意味着如果只使用这些对象，则可以保证它们引用完全协调的树。

当你只使用状态时，如果它是同步刷新，这种模式可以这样工作：

console.log(this.state.value) // 0

this.setState({value: this.state.value + 1}); 

console.log(this.state.value); // 1

this.setState({value: this.state.value + 1});

console.log(this.state.value); // 2

但是，如果这个状态被提升到父组件：

this.setState({value: this.state.value + 1});

this.props.onIncrement() // 在父组件身上做同样的事情。

在典型的react应用中，依赖this.setState()在父组件里是一种常见的特定于react的方式

console.log（this.props.value）// 0

this.props.onIncrement();

console.log（this.props.value）// 0

this.props.onIncrement();

console.log（this.props.value）// 0

这是因为，在上面这种状态下。this.state会立即刷新，但this.props不会。并且我们不能在this.props不重新渲染父级的情况下立即刷新，根据具体情况，这回非常显著的降低性能。

2.启用并发更新

Dan：我们一直在解释“异步呈现的一种方式“是react可以setState()根据它们的来源调用分配不同的优先级：时间处理程序，网络响应，动画等。

例如：如果要键入消息，setState()在TextBox需要立即刷新组件中的调用。但是，如果你在键入时收到新消息，则最好将新的渲染延迟到某个阈值（例如一秒），而不是因为阻塞线程而导致打字断断续续。

原文可看这里：https://github.com/facebook/react/issues/11527