React 18 需要掌握的核心知识点

React 18 引入了多项重要更新和优化，以下是需要掌握的核心知识点：

1. 并发渲染（Concurrent Rendering）

• React 18 的核心改进是并发渲染，允许 React 在渲染过程中中断、暂停或优先处理高优先级任务（如用户交互），从而提升应用的响应速度。
• 通过 createRoot 启用并发模式，替代旧版的 ReactDOM.render。
• 并发特性支持 Suspense、startTransition 和 useDeferredValue 等新 API。

2. 自动批处理（Automatic Batching）

• React 18 默认对所有状态更新（包括 setTimeout、Promise 和原生事件）进行批处理，减少不必要的渲染。
• 在 React 17 及之前，批处理仅适用于 React 事件（如 onClick），而 React 18 扩展至所有场景。
• 如需强制同步更新，可使用 ReactDOM.flushSync。

3. Transitions（过渡更新）

• 通过 startTransition 和 useTransition 将非紧急更新（如搜索筛选）标记为低优先级，避免阻塞用户交互。
• 示例：

  import { startTransition } from 'react';
  startTransition(() => {
    setSearchQuery(input); // 低优先级更新
  });
  

• 与 debounce/setTimeout 不同，startTransition 可被中断且不会冻结 UI。

4. Suspense 与流式 SSR

• React 18 支持服务器端 Suspense，允许逐步渲染页面，优先显示关键内容，再加载次要部分。
• 流式 SSR 通过 renderToPipeableStream 和 renderToReadableStream 实现，提升首屏加载速度。

5. 新的 Hooks

• useId：生成唯一 ID，适用于无障碍访问（a11y）。
• useTransition：管理过渡状态，返回 isPending 标志。
• useDeferredValue：延迟更新非关键 UI，如搜索建议。
• useSyncExternalStore：优化外部状态库（如 Redux）的集成。
• useInsertionEffect：适用于 CSS-in-JS 库，在 DOM 变更前注入样式。

6. 严格模式（Strict Mode）

• React 18 的严格模式会模拟组件的挂载、卸载和重新挂载，帮助发现潜在问题（如内存泄漏）。
• 仅在开发环境生效，不影响生产构建。

7. Fiber 架构与状态更新机制

• React 18 仍基于 Fiber 架构，但优化了调度策略，支持任务中断和恢复。
• setState 在 React 18 中默认采用批量更新，而非真正的异步。

8. Server Components（实验性）

• 允许部分组件在服务端渲染，减少客户端 JS 体积（如 Next.js 13+ 已支持）。

学习建议

• 从 createRoot 和自动批处理入手，逐步掌握 useTransition 和 Suspense。
• 实践项目时，优先优化高频交互场景（如搜索、列表筛选）。

如需更深入的学习，可参考 React 官方文档或相关教程。