React 源码学习

2025-04-01 1 min

scheduler 调度器

背后的数据结构是最小堆最小堆：经过排序的完全二叉树（右下角缺了一些节点的二叉树）

leftIndex = (parentIndex + 1) * 2 - 1;
rightIndex = leftIndex + 1; // 可能不存在 
parentIndex = (childIndex - 1) >>> 1;

之前的目标是作为 public api，不仅仅是为了 react，作为一个调度策略；

时间切片：可以简单理解为时间段，比如 5ms；

在单线程的机制下，如果一个任务执行时间花费过久，容易堵塞后面的任务，为了解决这个问题，React 参照操作系统，引入了时间切片（time slice）机制，在某个时间段内周期性的执行任务，周期习惯的把控制权交还给浏览器。

在 scheduler 的设计理念里，callback 的任务的初始值，task 是 scheduler 封装之后的 task，work 是指一个时间切片内的共组单元;

react 通过 MessageChannel 来模拟 requestIdleCallback（浏览器级别），而不是 setTimeout；

React 的 Scheduler 是一种抢占式调度器（Preemptive Scheduler），与 React 15 之前的合作式调度器（Cooperative Scheduler）有着显著的区别

react 通过 lane 来避免饿死现象，markStarvedLanesAsExpired