react 18 并发模式通过 fiber 和 scheduler 自动时间切片，无需手动切分；应使用 starttransition 标记可中断更新、usedeferredvalue 延迟派生状态，并以 createroot 启用并发渲染。
React 18 的并发模式本身不提供“手动切分长任务”的 API，它通过 Fiber 架构和 Scheduler 自动完成时间切片（Time Slicing），你不需要也不应该自己用 setTimeout 或 requestIdleCallback 去模拟。真正要做的，是让 React 知道哪些更新可以被延迟、哪些必须立即响应——靠的是语义化标记，而不是手写切片逻辑。
用 startTransition 标记可中断的更新
这是最常用也最直接的方式。把非紧急的 UI 更新（如搜索结果渲染、列表筛选、图表重绘）包裹在 startTransition 中，React 就会自动将其降级为低优先级，并启用时间切片：
- 更新不会阻塞用户输入，输入框能保持即时响应
- 渲染过程会被拆成多个小片段，在每帧空闲时执行
- 若期间有高优事件（如点击、键盘输入），当前渲染会暂停，优先处理交互
示例：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
const [results, setResults] = useState([]);
const handleSearch = (query) => {
startTransition(() => {
setResults(fetchSearchResults(query)); // 这个 setState 会被自动切片
});
};
用 useDeferredValue 延迟派生状态
适合处理“输入即变但无需立刻反映”的场景，比如搜索框输入后实时过滤大量数据。它不是切分计算，而是让 React 自动推迟对某个值的响应，同时保持原始值（如输入内容）同步更新：
-
query实时更新（保证输入框不卡） -
deferredQuery会滞后几帧，React 在空闲时才用它触发后续渲染 - 底层仍依赖时间切片与优先级调度，你无需干预
示例：
const query = useInput('');const deferredQuery = useDeferredValue(query);
// 下面这个组件只在 deferredQuery 变化时才重新渲染
确保根节点启用并发渲染
自动切片的前提是整个应用运行在并发模式下。必须用 createRoot 替代旧的 ReactDOM.render：
- 不启用
createRoot，即使用了useTransition，也不会触发时间切片 - 服务端渲染需配合
Suspense和流式 HTML 输出才能发挥完整效果
正确入口写法：
import { createRoot } from 'react-dom/client';const root = createRoot(document.getElementById('root'));
root.render(
避免手动“切片”反模式
不要试图自己用 for 循环 + setTimeout 拆分渲染逻辑，或用 requestIdleCallback 手动调度组件更新。这类做法：
- 绕过 React 的 Lane 优先级模型，失去中断和插队能力
- 无法与
Suspense、useTransition协同工作 - 容易破坏 Fiber 树一致性，引发竞态或内存泄漏
React 的时间切片是深度集成在协调器（Reconciler）和调度器（Scheduler）之间的协作机制，关键在于声明意图，而非控制执行节奏。
