当前位置：首页 > news >正文

npm 包 scheduler 介绍

news 2025/7/9 9:55:46

npm 包 scheduler 介绍

scheduler 是一个用于浏览器环境下协作调度（cooperative scheduling）的 npm 包。它目前被 React 内部广泛使用，并计划未来将其变得更加通用，适用于更多场景。

基本信息

最新版本：0.26.0
发布时间：3个月前（持续活跃维护）
依赖数：0（无依赖，轻量级）
周下载量：超过4200万次
许可证：MIT
仓库地址：GitHub - facebook/react
主页：react.dev

主要用途

scheduler 主要用于任务调度，尤其是在需要将大量计算任务分批处理、避免阻塞主线程的场景下。它通过“协作调度”机制，让高优先级任务优先执行，低优先级任务延后执行，从而提升前端应用的响应速度和用户体验。

目前，React 的并发特性（如 Concurrent Mode）就是基于 scheduler 实现的。虽然该包的公共 API 还未最终确定，但它已经在 React 生态中扮演着重要角色。

安装方法

你可以通过 npm 直接安装：

npm i scheduler

主要特性

协作调度：允许开发者将任务分片，避免长时间阻塞主线程。
优先级管理：支持为不同任务分配不同优先级，保证关键任务优先执行。
无依赖：包本身没有依赖，体积小，易于集成。
TypeScript 支持：通过 @types/scheduler 提供类型声明。

基本用法

scheduler 提供了几个核心 API，常用的有 unstable_scheduleCallback 和 unstable_cancelCallback，用于调度和取消任务。以下是一个简单的使用示例：

import { unstable_scheduleCallback, unstable_NormalPriority } from 'scheduler';// 调度一个普通优先级的任务
const callbackId = unstable_scheduleCallback(unstable_NormalPriority, () => {console.log('执行任务');// 可以返回一个函数用于任务中断时的清理return () => {console.log('任务被中断或取消');};
});// 取消任务
// unstable_cancelCallback(callbackId);

常用优先级

unstable_ImmediatePriority：最高优先级，立即执行
unstable_UserBlockingPriority：用户交互相关
unstable_NormalPriority：普通优先级
unstable_LowPriority：低优先级
unstable_IdlePriority：空闲时执行

更详细的用例

1. 不同优先级任务调度对比

import {unstable_scheduleCallback,unstable_ImmediatePriority,unstable_UserBlockingPriority,unstable_NormalPriority,unstable_LowPriority,unstable_IdlePriority
} from 'scheduler';unstable_scheduleCallback(unstable_LowPriority, () => {console.log('低优先级任务');
});
unstable_scheduleCallback(unstable_ImmediatePriority, () => {console.log('立即执行任务');
});
unstable_scheduleCallback(unstable_NormalPriority, () => {console.log('普通优先级任务');
});
// 输出顺序通常为：立即执行任务 -> 普通优先级任务 -> 低优先级任务

2. 任务分片处理大计算量

import { unstable_scheduleCallback, unstable_NormalPriority, shouldYield } from 'scheduler';function bigTask() {let i = 0;function work() {while (i < 1e6) {// 每处理一部分就检查是否需要让出主线程if (shouldYield()) {console.log('让出主线程，防止卡顿');unstable_scheduleCallback(unstable_NormalPriority, work);return;}i++;}console.log('大任务处理完毕');}work();
}unstable_scheduleCallback(unstable_NormalPriority, bigTask);

3. 如何中断/取消任务

import { unstable_scheduleCallback, unstable_cancelCallback, unstable_NormalPriority } from 'scheduler';const callbackId = unstable_scheduleCallback(unstable_NormalPriority, () => {console.log('执行任务');
});// 某些情况下需要取消任务
unstable_cancelCallback(callbackId);

4. 与 setTimeout 的对比

scheduler 的任务调度比 setTimeout 更智能，能根据主线程空闲情况动态调整执行时机，减少页面卡顿。

// setTimeout 方式，可能导致主线程阻塞
setTimeout(() => {// 大量计算
}, 0);// scheduler 方式，自动分片，响应更流畅
import { unstable_scheduleCallback, unstable_NormalPriority } from 'scheduler';
unstable_scheduleCallback(unstable_NormalPriority, () => {// 大量计算
});