React中setState是同步的还是异步的？调和阶段setState干了什么？

目录

setState执行过程

异步的情况：

同步的情况：

调和阶段setState干了什么？

---

setState执行过程

在React的 setState 函数实现中，会根据一个变量isBatchingUpdate 判断是直接更新 this.state还是放到队列中回头再说，而且isBatchingUpdate 默认是 false，也就是表示 setState 会同步更新this.state，但是，有一个函数batchedUpdate，这个函数会isBatchingUpdate修改为true.而当React 在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由 React 控制的事件处理过程 setState 不会同步更新 this.state

异步的情况：

由React控制的事件处理函数，以及生命周期函数调用setState时表现为异步 。

大部分开发中用到的都是React封装的事件，比如onChange、onClick、onTouchMove等（合成事件中），这些事件处理函数中的setState都是异步处理的。

同步的情况：

React控制之外的事件中调用setState是同步更新的。

比如原生js绑定的事件setTimeout/setInterval，ajax，promise.then内等 React 无法掌控的 APIs情况下，setState是同步更新state的

调和阶段setState干了什么？

• 当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态
• 这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。 为此，React将构建一个新的 React 元素树（您可以将其视为 UI 的对象表示）
• 一旦有了这个树，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较（ diff ）
• 通过这样做， React 将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间

---