浅析React中setState()的异步和同步机制

场景引入

相信大家在使用React的时候都会遇到关于setState()的问题，例如以下场景:

本意是改变输入框时，对应替换state.text。但是如果在setState() 后打印一下就会发现，state的改变总是‘慢一拍’

比如你输入123时，控制台会先后打印 ’ ’ ,‘1’, ‘12’ 。 经过思考和翻看文档，不难发现，这是因为setState()是异步的。如果换一种场景，在输入123后点击按钮，获取输入框的内容:

打印出来的是’123’而不是’12’。这也证明了state的改变只是’慢一拍’而不是’少一拍’。那么React为什么要引用这个异步机制呢？

原理

原理可以用这张图来描述，即在react中，setState通过一个队列机制实现state的更新。当执行setState时，会把需要更新的state合并后放入状态队列，而不会立刻更新this.state，当进入组件可更新状态时，这个队列机制就会高效的批量的更新state。

保证内部的一致性

目前 React 提