Question: React fiber 为了在浏览器环境 做到时间分,片机制 增量渲染,底层借助的 API 是什么?
Answer: 不是 requestAnimationFrame, 也不是 setTimeout, 是 MessageChannel + postMessage
可以看下 上面这张图, 这个相当于简化版本的 react 调度机制实现.
如果浏览器兼容 MessageChannel(宏任务) 就使用它 来做异步, 否则粗暴点 使用 setTimeout(宏任务)
之所以使用 MessageChannel + postMessage , 而不是 requestAnimationFrame, requestIdleCallback, setTimeout..
我想起来了, 之前看过一篇文章 1. requestAnimationFrame 如果一帧之内没有剩余时间, 则留到下一帧调用 2. requestIdleCallback 使用在浏览器空闲时才 调用, 这样会造成 渲染单元一直得不到调用 3. setTimeout 懂得都懂..
找到了一个合适的回答,之所有使用 MessageChannel 做异步机制, 除了上面 API 的缺点外, 它本身的优点在于: onmessage的回调函数的调用时机是在一帧的paint完成之后。react scheduler内部正是利用了这一点来在一帧渲染结束后的剩余时间来执行任务的