第五章:并发更新与等待边界
“并发”描述 React 可以暂停、放弃并重启一段渲染工作,不是 JavaScript 组件在多个线程同时修改 DOM。浏览器主线程上的昂贵 JavaScript 仍会占用时间;这些 API 帮你安排更新优先级和等待边界,不会凭空让计算消失。
阅读顺序
- Transition 与优先级:先把输入等紧急更新与昂贵结果更新分开。
- Suspense、懒加载与错误边界:再处理“渲染所需资源尚未就绪”和“加载失败”。
- useDeferredValue 与响应预算:最后让消费方暂时读取旧值,并用可观察指标判断是否值得。
完成本章后,你会得到可响应的筛选器、懒加载报表和带陈旧提示的搜索列表。三篇都使用 React 19 稳定版与 Vite,不使用实验性或 canary API。
本章成果
- 快速输入时输入框立即回显,慢列表允许被更新的输入打断;pending 是提示,不是网络完成保证。
- 懒加载模块未就绪时,普通更新可以显示 fallback,Transition 可保留既有边界的旧内容;模块或渲染失败交给 Error Boundary。
- 能明确说出:普通 Effect fetch 不会自动触发 Suspense;延迟值不是固定毫秒防抖,也不会减少网络请求。
答案见本章答案册。
本章类错误边界以前置维护篇错误恢复为基础;不熟悉类实例时从维护篇第一节顺读。