react16的异步渲染具体指哪里异步了？

Question

问题：react16实现了异步渲染，
1.这个异步渲染实现原理是啥？
2.跟vue的异步更新dom类似吗？
在vue中如果数据发生变化，vue会开启队列缓存，然后在浏览器的下一个tick会开始Vue 刷新队列
并执行实际 (已去重的) 工作。
3.那么react提到的异步渲染也是指在下一个tick实现实际的更新dom的操作吗？

Answer 1

题主看这篇文章：

https://zhuanlan.zhihu.com/p/...

同道中人。

之前知道setState是异步，但不知道其内部机制以及render触发的时机。以此去阅读源码，可惜我还没能摸清细节就迎来了Fiber更新，阅读难度骤然上升，直至今天仍没全部搞懂，但是对大体的机制有一些自己的了解，这里抛砖引玉，谈谈个人看法，同时希望能有更了解内部机制的大神来谈谈，比如司徒正美。

=======================================================

首先明确“异步”指的是“并非每次setState都会触发re-render”。实际上楼上的回答已经涉及到了实现原理，即setState本质上是更新一个队列，然后在后续逻辑中根据队列内容计算state,触发更新。

以class组件的更新过程为例，可以大致看出具体的实现。完整代码点击链接查看，这里摘取部分代码分析：

上述代码是componentWillReceiveProps执行的过程，这里先不管setState方法的实现。可以看cwr仅仅是被执行了，没有跟渲染或者状态相关的代码。

这是状态计算的代码，是与生命周期分离的。updateClassInstance最终返回是否需要更新的结果，接下来的代码在这里

re-render是在这里进行的。所以看出setState和render完全是分离的。只有在该走的生命周期结束后才会统一render。

这里还没有介绍setState的内部实现，你可以自己去看一下，fiber调度部分可以跳过，大概能看出是在更新队列。（我要去跑步没时间写了）

Answer 2

react里有updateQuque和事务机的概念，你可以了解下。因为react本身的容错机制做得很好，如果你做了setState后进入生命周期时又触发setState的操作，react不会报错，反而会推进下一个batchUpdate中，并标记一系列dirtyComp，在后续的事物周期再次处理

Answer 3

给你贴preact源码

function setState(state, callback) {
    let s = this.state;
    if (!this.prevState) this.prevState = extend({}, s);
    extend(s, typeof state==='function' ? state(s, this.props) : state);
    if (callback) this._renderCallbacks.push(callback);
    enqueueRender(this);
}

function enqueueRender(component) {
    if (!component._dirty && (component._dirty = true) && items.push(component)==1) {
        (options.debounceRendering || defer)(rerender); // 异步呀
    }
}

完