当前位置：首页 > React

react如何调度

2026-01-13 11:32:09React

React 调度机制概述

React 的调度机制通过 Fiber 架构 和 Scheduler 模块实现任务优先级管理与时间切片（Time Slicing），确保高优先级更新（如用户交互）能快速响应，低优先级任务（如数据预加载）不阻塞渲染。

Fiber 架构的作用

Fiber 是 React 16 引入的虚拟 DOM 数据结构，将渲染任务拆分为多个可中断的单元。每个 Fiber 节点保存组件信息及任务状态，通过链表结构实现任务的分片执行。

双向链表结构：Fiber 节点通过 child、sibling、return 指针关联，支持深度优先遍历的中断与恢复。
任务分片：React 在每一帧（通常 16ms）内执行部分任务，剩余时间交还浏览器处理绘制或输入响应。

Scheduler 模块

React 使用独立的 scheduler 包管理任务优先级，基于浏览器的 requestIdleCallback 和 MessageChannel 实现。

优先级划分：
- Immediate：同步执行（如受控输入更新）。
- UserBlocking：用户交互相关（如点击事件）。
- Normal：默认优先级（如普通状态更新）。
- Low/ Idle：可延迟任务（如离屏内容渲染）。
时间切片：
通过 performance.now() 获取当前帧剩余时间，在时间耗尽时暂停任务，通过宏任务（如 setTimeout）恢复后续处理。

并发模式（Concurrent Mode）

React 18 引入的并发模式进一步优化调度，允许渲染过程被更高优先级任务打断：

可中断渲染：
长列表渲染过程中，用户点击按钮会中断当前渲染，优先处理交互。
自动批处理：
多个状态更新合并为单一渲染周期，减少重复计算。

代码示例：优先级控制

通过 unstable_runWithPriority 或 startTransition 显式设置优先级：

import { unstable_runWithPriority } from 'scheduler';
import { startTransition } from 'react';

// 高优先级任务
unstable_runWithPriority(
  UserBlockingPriority,
  () => updateState(newState)
);

// 低优先级任务（React 18）
startTransition(() => {
  setNonUrgentData(data);
});