react

React 19 最佳实践

React 19 应用的综合性能优化指南。包含 8 个类别中的 44 条规则，按影响程度从关键（并发渲染、服务端组件）到渐进式（组件模式）排序。涵盖 React 19.3 稳定化功能：<ViewTransition>、Fragment refs，以及服务端组件中的直接 Context 提供者。

目录

1. 并发渲染 — CRITICAL
   • 1.1 避免 Suspense 回退界面闪烁 — HIGH（防止闪烁，带来更流畅的用户体验）
   • 1.2 利用自动批处理减少渲染次数 — HIGH（减少大量更新时的渲染次数）
   • 1.3 使用 useDeferredValue 处理派生的高开销值 — CRITICAL（避免派生计算造成卡顿）
   • 1.4 使用 useTransition 执行非阻塞更新 — CRITICAL（大量更新期间保持 UI 响应流畅）
   • 1.5 编写兼容并发渲染的组件 — MEDIUM-HIGH
   • 1.6 使用 ViewTransition 为 UI 变化添加动画 — MEDIUM（使用原生 View Transition API 制作动画，无需手动管理 class）
2. 服务端组件 — CRITICAL
   • 2.1 避免在服务端组件中使用仅限客户端的库 — MEDIUM-HIGH
   • 2.2 使用嵌套 Suspense 启用流式传输 — MEDIUM-HIGH
   • 2.3 在服务端组件中获取数据 — CRITICAL（减少客户端 JavaScript，避免客户端请求瀑布）
   • 2.4 尽量减少跨越服务端／客户端边界 — CRITICAL（减少序列化开销，缩小打包体积）
   • 2.5 仅向客户端组件传递可序列化的属性 — HIGH（避免运行时错误，确保正确完成水合）
   • 2.6 使用组合模式混合服务端组件和客户端组件 — HIGH（静态内容仍由服务端渲染）
   • 2.7 在服务端组件中渲染上下文提供程序 — LOW-MEDIUM（从客户端树中移除提供程序包装组件；19.3）
3. Actions 与表单 — HIGH
   • 3.1 使用表单 Action 代替 onSubmit — HIGH（渐进增强，代码更简洁）
   • 3.2 使用 useActionState 管理表单状态 — HIGH（声明式表单处理，自动管理待处理状态）
   • 3.3 使用 useFormStatus 管理提交按钮状态 — MEDIUM-HIGH
   • 3.4 使用 useOptimistic 即时反馈 UI — HIGH（即时响应，失败时自动回滚）
   • 3.5 使用 Actions 在服务端验证表单 — MEDIUM（安全验证，统一处理错误）
4. 数据获取 — HIGH
   • 4.1 使用 Promise.all 并行获取数据 — MEDIUM-HIGH
   • 4.2 使用 cache() 去重请求 — HIGH（消除每次渲染中的重复请求）
   • 4.3 将错误边界与 Suspense 配合使用 — MEDIUM（优雅地恢复错误，隔离故障）
   • 4.4 使用 Suspense 声明式管理加载状态 — HIGH（代码更简洁，统一协调加载 UI）
   • 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（属性未变化时跳过重新渲染）
   • 6.4 使用 useCallback 保持函数引用稳定 — MEDIUM（避免因引用变化导致子组件重新渲染）
   • 6.5 使用 useMemo 处理开销较大的计算 — MEDIUM（重新渲染时跳过开销较大的重复计算）
7. Effects 与事件 — MEDIUM
   • 7.1 始终清理 Effect 的副作用 — MEDIUM（防止内存泄漏和过时回调）
   • 7.2 避免使用 Effect 处理派生状态和用户事件 — MEDIUM（消除同步错误，简化代码）
   • 7.3 避免在 Effect 中将对象和数组用作依赖项 — MEDIUM（防止无限循环和不必要的重复执行）
   • 7.4 使用 useEffectEvent 处理非响应式逻辑 — MEDIUM（将响应式代码与非响应式代码分离）
   • 7.5 使用 useSyncExternalStore 订阅外部数据源 — MEDIUM（正确处理订阅，兼容 SSR）
   • 7.6 使用 use(browser()) 进行仅限客户端的渲染 — MEDIUM（无需使用挂载标记进行双重渲染，React 19.3+）
8. 组件模式 — LOW-MEDIUM
   • 8.1 根据情况选择受控或非受控组件 — LOW-MEDIUM
   • 8.2 优先使用组合而非大量属性 — LOW-MEDIUM
   • 8.3 使用 Key 重置组件状态 — LOW-MEDIUM
   • 8.4 使用 Render Props 实现控制反转 — LOW-MEDIUM
   • 8.5 使用 Fragment Refs 将 DOM 行为附加到同级元素 — LOW-MEDIUM（无需包装元素即可访问子元素 DOM 的 ref；在 19.3 中稳定）

使用方法

先在项目根目录中运行：

npx -y @pymodel/react-frontend-skills detect  # installed vs. targeted versions

对于与任务匹配的每条规则，阅读 references/<rule-id>.md：了解其重要性，以及错误与正确的代码示例。

参考资料

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 技能
• 关于客户端表单处理，请参阅 react-hook-form 技能
• 关于使用 TanStack Query 缓存数据，请参阅 tanstack-query 技能