react

React 19 最佳实践

React 19 应用的全面性能优化指南。包含 8 个类别中的 40 条规则，并按影响程度排序，从关键项（并发渲染、服务端组件）到渐进优化项（组件模式）。

目录

1. 并发渲染 — CRITICAL
   • 1.1 避免 Suspense 回退界面闪烁 — HIGH（防止闪烁，让用户体验更流畅）
   • 1.2 利用自动批处理减少渲染次数 — HIGH（繁重更新时渲染次数减少 32%）
   • 1.3 对派生的高开销值使用 useDeferredValue — CRITICAL（防止派生计算造成卡顿）
   • 1.4 对非阻塞更新使用 useTransition — CRITICAL（繁重更新期间保持界面响应流畅）
   • 1.5 编写兼容并发渲染的组件 — MEDIUM-HIGH（防止并发渲染中的错误）
2. 服务端组件 — CRITICAL
   • 2.1 避免在服务端组件中使用仅限客户端的库 — MEDIUM-HIGH（防止构建错误，确保组件放置位置正确）
   • 2.2 使用嵌套 Suspense 启用流式传输 — MEDIUM-HIGH（渐进式加载，更快的 TTFB）
   • 2.3 在服务端组件中获取数据 — CRITICAL（客户端 JavaScript 减少 38%，不会出现客户端请求瀑布）
   • 2.4 尽量减少服务端与客户端边界的跨越 — CRITICAL（减少序列化开销，缩小打包体积）
   • 2.5 仅向客户端组件传递可序列化的 props — HIGH（防止运行时错误，确保正确完成水合）
   • 2.6 使用组合模式混合服务端和客户端组件 — HIGH（为静态内容保留服务端渲染）
3. 操作与表单 — HIGH
   • 3.1 使用表单 Action 代替 onSubmit — HIGH（渐进增强，代码更简洁）
   • 3.2 使用 useActionState 管理表单状态 — HIGH（声明式表单处理，自动管理待处理状态）
   • 3.3 使用 useFormStatus 管理提交按钮状态 — MEDIUM-HIGH（正确显示加载指示，防止重复提交）
   • 3.4 使用 useOptimistic 提供即时界面反馈 — HIGH（让用户感受到即时响应，失败时自动回滚）
   • 3.5 使用 Action 在服务端验证表单 — MEDIUM（安全验证，统一处理错误）
4. 数据获取 — HIGH
   • 4.1 使用 Promise.all 并行获取数据 — MEDIUM-HIGH（消除请求瀑布，速度提升 2–5 倍）
   • 4.2 使用 cache() 去重请求 — HIGH（消除每次渲染中的重复请求）
   • 4.3 将错误边界与 Suspense 配合使用 — MEDIUM（优雅地恢复错误，隔离故障）
   • 4.4 使用 Suspense 声明式管理加载状态 — HIGH（代码更简洁，协调加载界面）
   • 4.5 使用 use() Hook 在渲染期间处理 Promise — HIGH（异步组件代码更简洁，并与 Suspense 集成）
5. 状态管理 — MEDIUM-HIGH
   • 5.1 在渲染期间计算派生值 — MEDIUM（消除同步错误，代码更简洁）
   • 5.2 拆分 Context，避免不必要的重新渲染 — MEDIUM（减少 Context 变化导致的重新渲染）
   • 5.3 使用函数式状态更新计算派生值 — MEDIUM-HIGH（避免闭包捕获过期值，保持回调稳定）
   • 5.4 对开销较大的初始状态使用惰性初始化 — MEDIUM-HIGH（避免每次渲染都执行高开销计算）
   • 5.5 对复杂状态逻辑使用 useReducer — MEDIUM（状态转换更清晰，更易于测试）
6. 记忆化与性能 — MEDIUM
   • 6.1 避免过早记忆化 — MEDIUM（记忆化会产生开销，应先进行度量）
   • 6.2 利用 React Compiler 自动记忆化 — MEDIUM（自动优化，减少手动编写的代码）
   • 6.3 对开销较大的纯组件使用 React.memo — MEDIUM（props 未变化时跳过重新渲染）
   • 6.4 使用 useCallback 保持函数引用稳定 — MEDIUM（防止引用变化导致子组件重新渲染）
   • 6.5 对高开销计算使用 useMemo — MEDIUM（重新渲染时跳过高开销的重复计算）
7. 副作用与事件 — MEDIUM
   • 7.1 始终清理 Effect 的副作用 — MEDIUM（防止内存泄漏和过期回调）
   • 7.2 避免使用 Effect 处理派生状态和用户事件 — MEDIUM（消除同步错误，代码更简洁）
   • 7.3 避免在 Effect 中依赖对象和数组 — MEDIUM（防止无限循环和不必要的重复执行）
   • 7.4 对非响应式逻辑使用 useEffectEvent — MEDIUM（将响应式代码与非响应式代码分离）
   • 7.5 对外部订阅使用 useSyncExternalStore — MEDIUM（正确处理订阅，兼容 SSR）
8. 组件模式 — LOW-MEDIUM
   • 8.1 根据实际情况选择受控组件或非受控组件 — LOW-MEDIUM（数据流正确，表单处理得当）
   • 8.2 优先使用组合，避免 props 爆炸 — LOW-MEDIUM（组件更灵活、更易复用）
   • 8.3 使用 Key 重置组件状态 — LOW-MEDIUM（正确隔离状态，确保妥善重置）
   • 8.4 使用 Render Props 实现控制反转 — LOW-MEDIUM（渲染方式灵活，逻辑可共享）

参考资料

1. https://react.dev
2. https://react.dev/blog/2024/12/05/react-19
3. https://react.dev/blog/2025/10/01/react-19-2
4. https://react.dev/learn/you-might-not-need-an-effect
5. https://github.com/facebook/react

相关技能

• 关于 Next.js 16 App Router，请参阅 nextjs-16-app-router 技能
• 关于客户端表单处理，请参阅 react-hook-form 技能
• 关于使用 TanStack Query 缓存数据，请参阅 tanstack-query 技能