Skip to content

第五章:并发更新与等待边界 ​

并发更新与等待边界

课程首页 / 上一站

“并发”描述 React 可以暂停、放弃并重启一段渲染工作,不是 JavaScript 组件在多个线程同时修改 DOM。浏览器主线程上的昂贵 JavaScript 仍会占用时间;这些 API 帮你安排更新优先级和等待边界,不会凭空让计算消失。

阅读顺序 ​

  1. Transition 与优先级:先把输入等紧急更新与昂贵结果更新分开。
  2. Suspense、懒加载与错误边界:再处理“渲染所需资源尚未就绪”和“加载失败”。
  3. useDeferredValue 与响应预算:最后让消费方暂时读取旧值,并用可观察指标判断是否值得。

完成本章后,你会得到可响应的筛选器、懒加载报表和带陈旧提示的搜索列表。三篇都使用 React 19 稳定版与 Vite,不使用实验性或 canary API。

本章成果 ​

  • 快速输入时输入框立即回显,慢列表允许被更新的输入打断;pending 是提示,不是网络完成保证。
  • 懒加载模块未就绪时,普通更新可以显示 fallback,Transition 可保留既有边界的旧内容;模块或渲染失败交给 Error Boundary。
  • 能明确说出:普通 Effect fetch 不会自动触发 Suspense;延迟值不是固定毫秒防抖,也不会减少网络请求。

答案见本章答案册。

本章类错误边界以前置维护篇错误恢复为基础;不熟悉类实例时从维护篇第一节顺读。

用心记录每一步成长