React 18 是一次重大的版本升级（发布于2022年），引入了并发渲染（Concurrent Rendering） 和一系列新特性，旨在提升应用性能、用户体验和开发灵活性。

一、核心新特性

1. 并发模式（Concurrent Mode）
   React 18 的核心是并发渲染能力，允许 React 在渲染过程中中断并优先处理高优先级任务（如用户输入），再返回继续渲染，显著提升复杂应用的响应速度。

   • 关键特性：

     • 可中断渲染：避免长时间任务阻塞主线程。

     • 自动批处理：将多个状态更新合并为单次渲染，减少重复渲染（包括异步操作和原生事件处理）。

     • 过渡更新（Transition）：通过 startTransition 或 useTransition 标记低优先级更新（如搜索输入），避免界面卡顿。

2. 新的根 API：createRoot

   • 替换旧 API：弃用 ReactDOM.render()，改用 ReactDOM.createRoot(rootElement).render(<App />)，以启用并发模式。

   • 渐进升级：旧应用可逐步迁移，无需一次性重构。

3. 新的 Hooks

   • useTransition：管理非紧急更新的过渡状态，返回 isPending 标志以展示加载状态。

     const [isPending, startTransition] = useTransition();
     startTransition(() => {// 低优先级状态更新（如搜索过滤）
     });
     

   • useDeferredValue：延迟某个值的更新，保持当前 UI 响应，适用于输入防抖或大型列表渲染。

     const deferredValue = useDeferredValue(value);
     

   • useId：生成跨服务端和客户端的唯一 ID，解决 SSR 中 ID 不一致问题（如表单 id）。

   • useSyncExternalStore：用于第三方状态库（如 Redux）集成并发模式，确保外部存储的同步。

4. 服务端组件（Server Components）

   • 实验性功能：允许在服务端渲染组件，减少客户端 JS 体积，提升首屏加载速度。

   • 特性：

     • 服务端组件无状态，仅在服务端执行。

     • 可直接访问后端数据源（如数据库）。

     • 客户端组件通过 加载服务端内容。

5. Suspense 增强

   • 支持数据获取： 不仅用于懒加载组件，还可包裹异步数据请求，显示加载状态。

   • 嵌套 Suspense：允许多层降级加载 UI，细化加载体验。

二、性能优化

1. 自动批处理（Automatic Batching）
   React 17 问题：仅在事件处理函数中批处理状态更新，setTimeout 或原生事件中的更新会触发多次渲染。

   React 18 改进：所有场景（包括 Promise、setTimeout 等）的状态更新默认自动批处理，减少渲染次数。

2. 流式服务端渲染（Streaming SSR）
   特性：通过 renderToPipeableStream 或 renderToReadableStream 实现流式 HTML 传输，配合 逐步发送内容，用户无需等待整个页面加载完成。

3. 优化 hydrate 过程
   选择性注水（Selective Hydration）：优先对用户可见部分进行注水（交互准备），提升首屏交互就绪时间。

三、API 改进与废弃

1. 严格模式（Strict Mode）增强开发环境下双渲染：故意重复调用组件函数（如 render、useEffect），帮助发现副作用问题。

   弃用警告：明确提示 findDOMNode、unstable_createPortal 等旧 API 的废弃。

2. 弃用 ReactDOM.render 和 ReactDOM.hydrate必须使用 createRoot 或 hydrateRoot 以启用新特性。

四、开发者工具优化

React DevTools 支持并发模式：

• 可视化展示并发渲染的优先级和任务分片。

• 跟踪 Suspense 和过渡状态的执行流程。