React Fiber 架构的任务优先级与任务饥饿问题解决方案原理

题目描述：在 React Fiber 架构中，不同更新任务（如用户交互、动画、数据获取）具有不同优先级。React 如何实现优先级调度？当高优先级任务频繁产生时，低优先级任务可能长期得不到执行，这就是“任务饥饿”问题。请详细解释 React Fiber 的优先级机制以及如何通过“过期时间”和“连续中断”等策略防止任务饥饿。

解题过程：

1. 优先级等级划分
   React 内部定义了 5 种优先级（从高到低）：

   • 立即优先级（ImmediatePriority）：同步任务，如用户输入
   • 用户阻塞优先级（UserBlockingPriority）：如点击事件
   • 普通优先级（NormalPriority）：默认优先级
   • 低优先级（LowPriority）：如数据预加载
   • 空闲优先级（IdlePriority）：非必要任务
     每个优先级对应一个过期时间（timeout），优先级越高，过期时间越短。

2. 过期时间计算

   • 每个任务被标记一个“过期时间”（expirationTime）
   • 公式：当前时间 + 优先级对应的时间片
   • 例如：立即优先级过期时间为当前时间-1（表示已过期），普通优先级可能是当前时间+250ms
   • 任务执行时检查当前时间是否超过过期时间，超过则需立即同步执行

3. 任务调度过程

   • 所有任务进入任务队列，调度器按优先级排序
   • 每次事件循环中，调度器选择最高优先级的任务执行
   • 采用“可中断”方式执行：将任务分解为多个 Fiber 单元，每完成一个单元检查是否应让出主线程
   • 让出主线程的条件：1）当前帧时间用尽 2）有更高优先级任务到达

4. 饥饿问题检测机制

   • 每个任务记录“开始时间”（startTime）
   • 调度器维护“最早挂起时间”（earliestPendingTime），记录所有挂起任务的最早开始时间
   • 定期检查：当前时间 - 最早挂起时间 > 阈值（如5秒）时，判定低优先级任务饥饿

5. 饥饿解决方案：连续中断保护

   • 当检测到饥饿时，调度器临时提升被饥饿任务的优先级
   • 实现方式：将过期时间设置为“同步过期”（已过期状态）
   • 这样在当前任务单元完成后，饥饿任务会被立即执行
   • 但不会完全抢占当前任务，而是等待当前任务单元自然完成

6. 多批次任务协调

   • 高优先级任务完成后，React 检查是否有“过期”的低优先级任务
   • 如果有，则在下一次空闲时间立即执行
   • 通过“双重缓冲”技术：在内存中准备两套 Fiber 树，一套用于高优先级更新，一套用于低优先级恢复，防止状态丢失

7. 实际执行流程示例

   • 用户输入（高优先级）触发更新 → 打断正在渲染的列表（低优先级）
   • 输入处理完成后，检查低优先级任务是否等待超过阈值
   • 如果超过，将列表渲染任务提升为同步优先级
   • 但不会打断正在进行的任何高优先级渲染单元，只会在当前单元完成后立即执行

这个机制确保用户交互始终流畅，同时避免低优先级任务（如日志上报、预加载）永远无法执行。