react

用途

本技能是一份面向 React 19 应用的性能优化指南，包含 8 个类别、共 44 条规则，按影响程度从关键（并发渲染、服务端组件）到渐进（组件模式）排序。它同时覆盖 React 19.3 的稳定特性：<ViewTransition>、Fragment refs，以及 Server Components 中直接使用 Context Provider。

主要能力（规则分类）

并发渲染 — 关键

避免 Suspense 回退抖动（HIGH）
利用自动批处理减少渲染（HIGH）
对派生昂贵值使用 useDeferredValue（CRITICAL）
对非阻塞更新使用 useTransition（CRITICAL）
编写并发安全组件（MEDIUM-HIGH）
用 ViewTransition 为 UI 变化添加动画（MEDIUM）

服务端组件 — 关键

避免在服务端组件中使用仅客户端库（MEDIUM-HIGH）
用嵌套 Suspense 启用流式渲染（MEDIUM-HIGH）
在服务端组件中获取数据（CRITICAL）
最小化服务端/客户端边界穿越（CRITICAL）
仅向客户端组件传递可序列化 props（HIGH）
用组合方式混合服务端与客户端组件（HIGH）
在服务端组件中渲染 Context Provider（LOW-MEDIUM，19.3）

Actions 与表单 — HIGH

用 Form Actions 替代 onSubmit（HIGH）
用 useActionState 管理表单状态（HIGH）
用 useFormStatus 处理提交按钮状态（MEDIUM-HIGH）
用 useOptimistic 实现即时 UI 反馈（HIGH）
在服务端用 Actions 校验表单（MEDIUM）

数据获取 — HIGH

用 Promise.all 并行获取数据（MEDIUM-HIGH）
用 cache() 做请求去重（HIGH）
将 Error Boundaries 与 Suspense 配合使用（MEDIUM）
用 Suspense 实现声明式加载状态（HIGH）
在渲染中使用 use() Hook 处理 Promise（HIGH）

状态管理 — MEDIUM-HIGH

在渲染期间计算派生值（MEDIUM）
拆分 Context 以避免不必要的重渲染（MEDIUM）
对派生值使用函数式状态更新（MEDIUM-HIGH）
对昂贵的初始状态使用惰性初始化（MEDIUM-HIGH）
对复杂状态逻辑使用 useReducer（MEDIUM）

记忆化与性能 — MEDIUM

避免过早记忆化（MEDIUM）
利用 React Compiler 实现自动记忆化（MEDIUM）
对昂贵的纯组件使用 React.memo（MEDIUM）
用 useCallback 保持函数引用稳定（MEDIUM）
用 useMemo 处理昂贵计算（MEDIUM）

副作用与事件 — MEDIUM

始终清理 Effect 副作用（MEDIUM）
避免用 Effect 处理派生状态和用户事件（MEDIUM）
避免在 Effect 中使用对象和数组依赖（MEDIUM）
用 useEffectEvent 处理非响应式逻辑（MEDIUM）
用 useSyncExternalStore 处理外部订阅（MEDIUM）
用 use(browser()) 实现仅客户端渲染（MEDIUM，React 19.3+）

组件模式 — LOW-MEDIUM

恰当选择受控与非受控组件
优先使用组合而非 props 爆炸
用 Key 重置组件状态
用 Render Props 实现控制反转
用 Fragment Refs 将 DOM 行为附加到兄弟节点（19.3 稳定）

使用方式

在项目根目录运行：

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

针对上述每条与任务匹配的规则，阅读 references/<rule-id>.md，其中包含该规则为何重要，以及错误与正确代码的对比。

适用场景

适用于使用 React 19 构建前端应用、需要按优先级进行性能优化与遵循最佳实践的开发场景，尤其涉及并发渲染、服务端组件、表单 Actions、数据获取与状态管理等主题。

限制

本技能为规则与参考文档集合，具体安装、收费、价格、平台支持等信息暂未提供。

参考链接

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

技能介绍

用途