React 18 是一次重大的版本升级(发布于2022年),引入了并发渲染
(Concurrent Rendering) 和一系列新特性
,旨在提升应用性能、用户体验和开发灵活性
。
一、核心新特性
-
并发模式(Concurrent Mode)
React 18 的核心是
并发渲染
能力,允许React 在渲染过程中中断并优先处理高优先级任务(如用户输入)
,再返回继续渲染,显著提升复杂应用的响应速度。-
关键特性:
-
可中断渲染:避免长时间任务阻塞主线程。
-
自动批处理:将多个状态更新合并为单次渲染,减少重复渲染(包括异步操作和原生事件处理)。
-
过渡更新(Transition):通过 startTransition 或 useTransition 标记低优先级更新(如搜索输入),避免界面卡顿。
-
-
-
新的根 API:createRoot
-
替换旧 API
:弃用ReactDOM.render()
,改用ReactDOM.createRoot(rootElement).render(<App />)
,以启用并发模式。 -
渐进升级:旧应用可逐步迁移,无需一次性重构。
-
-
新的 Hooks
-
useTransition:管理非紧急更新的过渡状态,返回 isPending 标志以展示加载状态。
javascriptconst [isPending, startTransition] = useTransition(); startTransition(() => { // 低优先级状态更新(如搜索过滤) });
-
useDeferredValue:延迟某个值的更新,保持当前 UI 响应,适用于输入防抖或大型列表渲染。
javascriptconst deferredValue = useDeferredValue(value);
-
useId:生成跨服务端和客户端的唯一 ID,解决 SSR 中 ID 不一致问题(如表单 id)。
-
useSyncExternalStore:用于第三方状态库(如 Redux)集成并发模式,确保外部存储的同步。
-
-
服务端组件(Server Components)
-
实验性功能:允许在服务端渲染组件,减少客户端 JS 体积,提升首屏加载速度。
-
特性:
-
服务端组件无状态,仅在服务端执行。
-
可直接访问后端数据源(如数据库)。
-
客户端组件通过 加载服务端内容。
-
-
-
Suspense 增强
-
支持数据获取: 不仅用于懒加载组件,还可包裹异步数据请求,显示加载状态。
-
嵌套 Suspense:允许多层降级加载 UI,细化加载体验。
-
二、性能优化
-
自动批处理(Automatic Batching)
React 17 问题:仅在事件处理函数中批处理状态更新,setTimeout 或原生事件中的更新会触发多次渲染。
React 18 改进:所有场景(包括 Promise、setTimeout 等)的状态更新默认自动批处理,减少渲染次数。
-
流式服务端渲染(Streaming SSR)
特性:通过 renderToPipeableStream 或 renderToReadableStream 实现流式 HTML 传输,配合 逐步发送内容,用户无需等待整个页面加载完成。
-
优化 hydrate 过程
选择性注水(Selective Hydration):优先对用户可见部分进行注水(交互准备),提升首屏交互就绪时间。
三、API 改进与废弃
-
严格模式(Strict Mode)
增强开发环境下双渲染
:故意重复调用组件函数(如 render、useEffect),帮助发现副作用问题。弃用警告:明确提示 findDOMNode、unstable_createPortal 等旧 API 的废弃。
-
弃用
ReactDOM.render 和 ReactDOM.hydrate
必须使用createRoot 或 hydrateRoot
以启用新特性。
四、开发者工具优化
React DevTools 支持并发模式:
-
可视化展示并发渲染的优先级和任务分片。
-
跟踪 Suspense 和过渡状态的执行流程。