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

时间:2019-03-21
本文章向大家介绍React中this.setState是同步还是异步?为什么要设计成异步?,主要包括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