深入理解React – 6 – 并发渲染

React的 Concurrent Renderer 并发渲染器

React18之后引入了并发渲染器，concurrent renderer，根节点使用createRoot， 他主要有以下两个特点

• 时间切片
• 优先级调度

时间切片

因为浏览器16.6ms刷新一次，如果单个任务执行时间超过16.6ms就会造成卡顿，因此并发模式引入了一个shouldYield的判断，会每隔5ms打断一次，这就是时间切片。打断之后会重新恢复调度渲染，通过这种打断和恢复实现了并发。

另外scheduler可以通过优先级来对任务进行排序，这样就实现了高优先级先处理。

每次的setState渲染都是有scheduler维护的，它有一个任务队列，上个任务执行完毕再执行下一个，被打断的任务会被添加到任务队列里。

优先级调度

Schedular处理事件的优先级是按照如下排列的

* var ImmediatePriority = 1
* var UserBlockingPriority = 2
* var NormalPriority = 3
* var LowPriority = 4
* var IdlePriority = 5

ImmediatePriority是指离散型的事件，如click, keydown, input等
UserBlockingPriority指连续性的事件，如scroll, drag, mouseOver等

而React处理的优先级采用的是Lane。 React是使用二进制来存储这个lane优先级的