React 18

关注
义项:React 前端库版本
React 18

React 18是Meta(原Facebook)旗下React团队开发的ReactJavaScript库的第18个主要版本,于2022年3月29日正式发布[1]。该版本的核心变化是引入并发渲染机制,使React能够同时准备多个版本的界面,并在此基础上提供自动批处理、startTransition等新API以及支持Suspense的流式服务端渲染[2]。React 18采取渐进式采用策略,并发特性按需启用,因此升级时通常无需重写应用代码[2]。

百科 图文
目录
  1. 定义
  2. 原理
  3. 发展历程
  4. 应用
  5. 局限
  6. 参见

定义

React 18是ReactJavaScript库的第18个主要版本,由Meta旗下React团队维护,2022年3月29日发布并可在npm上获取[1]。它属于前端开发中用于构建用户界面的库,本次发布包含开箱即用的性能改进、新的API,以及支持Suspense的流式服务端渲染[1]。

与以往主要版本不同,React 18把并发渲染作为底层机制引入,而不是要求开发者整体切换到某种“并发模式”[2]。并发特性是选择性启用的,只有使用了相应新功能时才会触发,因此社区可以逐步迁移[2]。React团队表示,多数应用可在较短时间内完成升级,无需重写代码[3]。

原理

并发渲染是React 18多数新功能所依赖的底层机制,它使React能够同时准备界面的多个版本,从而提升应用的实际性能与感知性能[3]。其关键属性是渲染可被中断:React可以开始渲染一次更新,中途暂停,之后再继续,甚至完全放弃这次渲染[1]。为在中断情况下保持界面一致,React会等到整棵树计算完毕后,再统一执行对DOM的修改[1]。

在并发渲染之上,React 18把更新区分为紧急更新与过渡更新两类[4]。打字、点击、按下等直接交互属于紧急更新,需要立即响应;而界面从一个视图切换到另一个视图属于过渡更新,用户并不在意看到中间的每个取值[4]。开发者可以用startTransition把某些状态更新标记为非紧急,React会让紧急更新打断非紧急更新[5]。

React 18还配套提供了新的渲染入口。react-dom/client导出了createRoot与hydrateRoot,分别用于替代ReactDOM.render和ReactDOM.hydrate;不采用新的根节点创建方式,React 18的新功能将无法生效[5]。服务端方面,react-dom/server新增了renderToPipeableStream与renderToReadableStream,用于在Node环境以及Deno、Cloudflare Workers等边缘运行时中流式输出并支持Suspense[5]。此外,自动批处理会把promise、setTimeout、原生事件处理器中的多次状态更新合并为一次重渲染[4]。

发展历程

2021年6月8日,React团队公布React 18的发布计划,宣布已启动下一个主要版本的开发,组建了React 18工作组,并发布了Alpha版本供第三方库作者试用和反馈[2]。2021年11月15日,团队更新称React 18进入beta阶段[6]。

2022年3月29日,React 18.0正式发布[1]。该版本同时发布了新的客户端与服务端渲染API,并对严格模式增加开发期检查:组件首次挂载时,严格模式会自动卸载并重新挂载,以检验副作用是否对重复挂载具备韧性[5]。React 18还新增了useId、useTransition、useDeferredValue等Hook[5]。

2024年4月26日,React团队发布了18.3.1版本[7]。该版本在功能上与18.2保持一致,额外加入了对即将在React 19中弃用或变更的API的告警,官方建议先升级到18.3.1以提前识别迁移问题[8]。

应用

React 18适用于浏览器端界面开发,也可通过新的服务端渲染API配合Suspense实现流式输出[5]。在使用React.lazy进行代码分割时,Suspense同样可用;在Relay、Next.js、Hydrogen、Remix等框架中,Suspense还可用于数据获取[4]。

跨端开发框架Taro自v3.5起默认使用React 18,新建项目或将旧项目升级后可选用其新特性[9]。在移动端应用领域,与React 18兼容的首个React Native版本为0.69.0,但只有迁移到新架构才能使用自动批处理、startTransition、useDeferredValue等新特性[10]。函数组件库与测试工具也需同步适配,例如Material UI在React 18及以下版本中需要将react-is解析为与react相同的版本,以避免运行时类型检查错误。

局限

并发渲染在技术上属于破坏性变更,因为渲染可中断,组件在启用并发特性时的行为会略有不同,部分组件可能需要额外的迁移工作[1]。React 18要求运行环境提供Promise、Symbol、Object.assign等现代浏览器特性,若需支持Internet Explorer等旧环境,应引入polyfill[7]。

生态兼容性是升级的主要制约。React团队指出,库需要一段时间才能完成并发兼容改造[4]。在React Native的旧架构下,即使package.json中安装了React 18,应用仍以React 17模式运行,无法使用并发特性[10]。在Taro中,受小程序环境限制,新的服务端Suspense等特性无法在小程序内使用,且其所依赖的React生态库也需同步支持React 18[9]。此外,Server Components在React 18发布时仍属实验性,计划在18.x的次要版本中推出首个版本[4]。

参见

  • React —— React 18所属的JavaScript用户界面库。

  • React Native —— 与React 18配套使用、需要新架构才能启用并发特性的移动端框架。

  • 并发渲染 —— React 18引入的核心底层渲染机制。

  • Suspense —— React 18在服务端与数据获取场景中扩展支持的声明式加载机制。

  • 服务端渲染 —— React 18提供流式渲染API的一类应用场景。

  • Taro —— 自v3.5起默认采用React 18的跨端开发框架。

参考资料

  1. React v18.0 – React 中文文档 [引用日期2026-10-14]
  2. The Plan for React 18 – React [引用日期2026-10-14]
  3. React 18 的有关计划 – React 中文文档 [引用日期2026-10-14]
  4. title: "React v18.0" [引用日期2026-10-14]
  5. React v18.0 – React Blog [引用日期2026-10-14]
  6. The Plan for React 18 • Blog React [引用日期2026-10-14]
  7. CHANGELOG [引用日期2026-10-14]
  8. ecosyste.ms 上的网页 [引用日期2026-10-14]
  9. React 18 | Taro 文档 [引用日期2026-10-14]
  10. [ [引用日期2026-10-14]
词条评价
词条统计

浏览次数:3 次

阅读量:0 次 · 阅读完成量:0 次

最近更新:2026-10-13T21:59:37Z

历史版本

本条目引用的词条
前端开发 移动端应用 React Native React 并发渲染 Suspense 服务端渲染 Taro