react如何调度
React 调度机制概述
React 调度机制是 React 内部用于优化渲染性能的核心模块，主要解决高优先级任务（如用户交互）和低优先级任务（如数据加载）之间的协调问题。React 通过 Scheduler（调度器）实现任务的分片与优先级管理，确保关键交互的流畅性。
时间切片（Time Slicing）
React 将渲染工作分解为多个小任务单元，避免长时间占用主线程导致页面卡顿。每个任务单元执行时间控制在 5ms 左右，剩余时间交还给浏览器处理其他任务（如动画或输入响应）。这一过程通过 requestIdleCallback 的 polyfill 实现。
优先级系统
React 内部定义了多种优先级，例如：
- ImmediatePriority：同步执行，用于紧急任务（如用户输入）。
- UserBlockingPriority：用户交互相关（如点击事件）。
- NormalPriority：默认优先级（如普通状态更新）。
- LowPriority 和 IdlePriority：可延迟的任务（如后台数据预加载）。
优先级通过 lane 模型（React 17+）管理，不同优先级对应不同的二进制位，方便快速比较与合并。
并发模式（Concurrent Mode）
在并发模式下，React 可中断低优先级渲染，优先处理高优先级更新。例如：
// 使用 startTransition 标记非紧急更新
import { startTransition } from 'react';
startTransition(() => {
setState(newState); // 低优先级更新
});调度流程示例
- 任务入队：更新触发时，React 根据优先级将任务加入调度队列。
- 调度循环：调度器循环处理队列，高优先级任务优先执行。
- 中断与恢复：若当前帧时间耗尽，暂停任务并让出主线程，下一帧恢复。
性能优化 API
- useDeferredValue：延迟派生值的更新，避免阻塞渲染。
const deferredValue = useDeferredValue(value); - Suspense：配合懒加载或数据获取，显示占位内容直至资源就绪。
底层实现
React 调度器核心逻辑类似以下伪代码：
function workLoop(deadline) {
while (currentTask && deadline.timeRemaining() > 0) {
currentTask = performUnitOfWork(currentTask);
}
if (currentTask) requestIdleCallback(workLoop);
}注意事项
- 调度行为在 React 18 后默认启用，无需手动开启并发模式。
- 避免在单个组件中频繁触发高优先级更新，可能导致调度开销增加。
- 使用开发者工具的 "Scheduling" 面板可观察任务优先级分布。
