名称: react 描述: React 19性能优化指南，涵盖并发渲染、服务器组件、操作、钩子和记忆化（原react-19）。此技能应用于编写React 19组件、使用并发功能或优化重新渲染时。此技能不涵盖Next.js特定功能，如App Router、next.config.js或Next.js缓存（使用nextjs-16-app-router技能）。对于使用React Hook Form的客户端表单验证，使用react-hook-form技能。

React 19最佳实践

React 19/19.2应用程序的全面性能优化指南。包含8个类别中的41条规则，按影响从关键（并发渲染、服务器组件）到增量（组件模式）优先排序。

何时应用

编写新的React组件或重构现有组件
优化重新渲染性能或捆绑包大小
使用并发功能（useTransition、useDeferredValue、Activity）
设置服务器组件或服务器/客户端边界
实现表单操作、乐观更新或数据获取
配置React Compiler进行自动记忆化
审查React代码中的常见反模式

规则类别

类别	影响	规则数	关键主题
并发渲染	关键	6	useTransition、useDeferredValue、Activity、批处理
服务器组件	关键	6	RSC边界、数据获取、流式传输
操作与表单	高	5	表单操作、useActionState、useOptimistic
数据获取	高	5	use()钩子、cache()、Suspense、错误边界
状态管理	中高	5	派生值、上下文优化、useReducer
记忆化与性能	中	5	React Compiler、useMemo、useCallback、React.memo
效果与事件	中	5	useEffectEvent、清理、外部存储
组件模式	低中	4	组合、受控与非受控、键重置

快速参考

关键模式 — 首先正确应用这些：

在服务器组件中获取数据，而非客户端组件
将’use client’边界推至尽可能低的层级
使用startTransition进行昂贵的非阻塞更新
使用<Activity>在标签页/页面切换间保持状态

常见错误 — 避免这些反模式：

在客户端组件中为use()创建promise（导致无限循环）
过度记忆化（使用React Compiler v1.0+替代）
使用效果处理派生状态或用户事件
将’use client’放置于组件树过高位置

并发渲染 — 关键
- 1.1 使用Activity进行预渲染和状态保持 — 高（消除导航重新渲染成本，保留用户输入状态）
- 1.2 避免Suspense回退抖动 — 高（防止200-500ms布局偏移闪烁）
- 1.3 利用自动批处理减少渲染次数 — 高（在所有上下文中将多个setState调用批处理为单次渲染）
- 1.4 使用useDeferredValue处理派生昂贵值 — 关键（防止派生计算中的卡顿）
- 1.5 使用useTransition进行非阻塞更新 — 关键（在重状态更新期间保持<50ms输入延迟）
- 1.6 编写并发安全组件 — 中高（防止并发渲染中的错误）
服务器组件 — 关键
- 2.1 避免在服务器组件中使用仅客户端库 — 中高（防止构建错误，正确放置组件）
- 2.2 使用嵌套Suspense启用流式传输 — 中高（渐进加载，更快TTFB）
- 2.3 在服务器组件中获取数据 — 关键（显著减少客户端JS捆绑包，消除客户端数据瀑布）
- 2.4 最小化服务器/客户端边界交叉 — 关键（减少序列化开销，更小捆绑包）
- 2.5 仅向客户端组件传递可序列化属性 — 高（防止运行时错误，确保正确水合）
- 2.6 使用组合混合服务器和客户端组件 — 高（保持静态内容的服务器渲染）
操作与表单 — 高
- 3.1 使用表单操作替代onSubmit — 高（表单在JS未加载时工作，消除e.preventDefault()样板代码）
- 3.2 使用useActionState进行表单状态管理 — 高（声明式表单处理，自动待处理状态）
- 3.3 使用useFormStatus管理提交按钮状态 — 中高（正确加载指示器，防止重复提交）
- 3.4 使用useOptimistic实现即时UI反馈 — 高（突变0ms感知延迟，服务器失败时自动回滚）
- 3.5 使用操作在服务器端验证表单 — 中（防止仅客户端验证绕过，表单错误的单一来源）
数据获取 — 高
- 4.1 使用Promise.all并行获取数据 — 中高（消除数据瀑布，2-5倍更快）
- 4.2 使用cache()进行请求去重 — 高（消除每个服务器请求的重复获取）
- 4.3 使用错误边界与Suspense — 中（隔离故障到单个组件，防止全页面崩溃）
- 4.4 使用Suspense进行声明式加载状态 — 高（消除加载状态样板代码，启用并行数据获取协调）
- 4.5 在渲染中使用use()钩子处理promise — 高（消除useEffect+useState获取模式，与Suspense边界集成）
状态管理 — 中高
- 5.1 在渲染期间计算派生值 — 中（消除同步错误，代码更简单）
- 5.2 拆分上下文以防止不必要的重新渲染 — 中（减少上下文更改引起的重新渲染）
- 5.3 使用函数式状态更新处理派生值 — 中高（防止陈旧闭包，稳定回调）
- 5.4 使用懒初始化处理昂贵初始状态 — 中高（防止每次渲染的昂贵计算）
- 5.5 使用useReducer处理复杂状态逻辑 — 中（消除不可能状态组合，启用可单元测试的状态逻辑）
记忆化与性能 — 中
- 6.1 避免过早记忆化 — 中（移除不必要记忆化每渲染0.1-0.5ms开销）
- 6.2 利用React Compiler进行自动记忆化 — 中（自动优化，更少手动代码）
- 6.3 使用React.memo处理昂贵纯组件 — 中（跳过昂贵重新渲染，每未更改组件节省5-50ms）
- 6.4 使用useCallback获得稳定函数引用 — 中（防止子组件因引用更改重新渲染）
- 6.5 使用useMemo处理昂贵计算 — 中（在依赖项未更改的重新渲染中跳过O(n)重新计算）
效果与事件 — 中
- 7.1 始终清理效果副作用 — 中（防止内存泄漏，陈旧回调）
- 7.2 避免使用效果处理派生状态和用户事件 — 中（消除同步错误，代码更简单）
- 7.3 避免在效果中使用对象和数组依赖项 — 中（防止无限循环，不必要重新运行）
- 7.4 使用useEffectEvent处理非反应性逻辑 — 中（防止非反应性值更改引起的不必要效果重新运行）
- 7.5 使用useSyncExternalStore进行外部订阅 — 中（防止并发渲染中的撕裂，确保SSR安全的外部状态）
组件模式 — 低中
- 8.1 适当选择受控与非受控组件 — 低中（防止表单状态同步错误，启用实时验证）
- 8.2 优先组合而非属性爆炸 — 低中（减少属性传递深度，启用独立组件重用）
- 8.3 使用键重置组件状态 — 低中（强制完整组件重新挂载，消除身份更改后的陈旧状态）
- 8.4 使用渲染属性进行控制反转 — 低中（启用父控制渲染，无需子属性爆炸）

React19性能优化Skill react

React 19最佳实践

何时应用

规则类别

快速参考

目录

参考文献

相关技能