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