React如何实现时间切片

火星思想2025-04-25 16:16

大家好，我是有一点想法的thinkmars，目前在准备面试与工作，借着间隙时间学习复习，写一点基础文章，欢迎想找工作的人与我一起学习，一起讨饭吃~

React的时间切片实现原理可以这样通俗理解：

底层机制 ： React利用浏览器的requestIdleCallbackAPI（或自己实现的polyfill）来获取空闲时间段。这就像向浏览器申请："等你有空的时候告诉我，我来干活"。
任务分割：当React需要渲染大量组件时，它会：

把整个渲染工作分解成多个小单元（通常是组件树的一个小分支）
每个单元工作约5ms左右（相当于一个"时间片"）

执行流程：

javascript 复制代码

while (还有工作未完成 && 当前帧还有剩余时间) {
  执行一个工作单元();
  检查剩余时间();
}

优先级调度： React维护了5种优先级：

立即执行（用户交互等）
用户阻塞（比如hover效果）
普通（数据更新）
低优先级（预加载内容）
空闲（比如日志上报）

中断与恢复：如果时间片用完但工作没完成：

保存当前进度（就像游戏存档）
把控制权交还浏览器
等下次有空闲时间时继续

实际代码结构：

javascript 复制代码

function workLoop(deadline) {
  while (workInProgress && deadline.timeRemaining() > 0) {
    workInProgress = performUnitOfWork(workInProgress);
  }
  requestIdleCallback(workLoop);
}
requestIdleCallback(workLoop);

关键点：React通过这种机制保证了主线程不会被长时间占用，用户操作总能及时响应，实现了"丝滑"的用户体验。