五、为什么React中选择MessageChannel来创建任务

事件循环

我们知道，大多数设备的刷新频率是 60hz，也就是1秒钟要绘制60次，这意味着浏览器每隔 16.66ms 就要重新渲染一次。

事件循环的机制就是每一次循环，会从任务队列中取出一个任务来执行，如果还没有达到浏览器重新渲染的时间，那么就会继续循环一次，从任务队列再取一个任务来执行，以此类推，直到浏览器需要重新渲染，这个时候就会执行重新渲染的任务，执行完毕后，回到之前的流程。

requestAnimationFrame

• 专门用来做动画的，在每一次重新渲染之前执行，用这个做动画不会出现掉帧现象
• 优点就是频率和浏览器重新渲染的频率一致的

微任务：如果微任务队列里面存在任务，那么事件循环会在循环一次的时候，将整个微任务队列清空

MessageChannel

MessageChannel接口本身用来做消息通信的，允许我们创建一个消息通道，通过它的两个MessagePort来进行信息的发送和接收，这边我们用来创建一个任务（宏任务）

之前我们有说过，Scheduler是用来调度任务的，调度任务需要满足两个条件：

• js暂停，将主线程还给浏览器，让浏览器能够有序的重新渲染页面
• 暂停的js（说明还没有执行完），需要再下一次接着来执行

根据以上两个，我们就想到了事件循环，将没有执行完的js放入到任务队列，下一次事件循环的时候再取出来执行。

如何将没有执行完的任务放到任务队列里面，这里面我们就可以使用MessageChannel，因为MessageChannel能够产生宏任务

为什么不选择setTimeout

我们之前创建一个宏任务，可以采用setTimeout，这种方式，但是react团队没有采用

这是因为setTimeout在嵌套超过5层， timeout延时如果小于4ms，那么则会默认设置为4ms

为什么没有选择 requestAnimationFrame

因为这个只能在重新渲染之前，才能够执行一次，而如果我们包装成一个任务，放入到任务队列，那么只要没到重新渲染的时间，都可以一直从任务队列里面获取任务来执行

为什么没有选择包装成一个微任务

这是因为和微任务的执行机制有关系，微任务队列会在清空整个队列后才会结束。微任务会在页面更新前一直执行，达不到将主线程还给浏览器的目的