用途
本技能是一份面向 AI 智能体的 React 19/19.2 最佳实践指南,用于在编写、重构、审计或现代化 React 代码时提供规则和模式参考。它包含 49 条规则,分为 9 个类别,按影响程度从关键(并发渲染、Server Components)到跨领域的代码库卫生(去重、死代码、边界一致性)进行优先级排序。内容反映 React 19 的主要变化:ref 作为普通 prop(forwardRef 已弃用)、原生文档元数据、资源预加载 API、useActionState、useOptimistic、use() 钩子以及 <Context> 作为 provider。
主要能力
规则文件描述模式形态而非 API 名称,并设有“可识别的形态”部分,列出同一问题可能出现的 2–4 种语法伪装。部分高价值规则(如表单操作、ref-as-prop、派生状态、context、use() 钩子、useCallback/memo 配对)还附带具体的“伪装形态”错误/正确示例对,帮助识别非 grep 友好的情况。
规则类别包括:
- 并发渲染(关键,6 条):useTransition、useDeferredValue、Activity、批处理、渲染纯度。
- Server Components(关键,6 条):RSC 边界、数据获取、流式传输、可序列化 props。
- Actions 与表单(高,5 条):表单操作、声明式表单状态、useOptimistic、服务器验证。
- 数据获取(高,7 条):use() 钩子、cache()、Suspense、文档元数据、资源提示。
- 状态管理(中高,5 条):派生值、context 拆分、函数式更新、reducer。
- 记忆化与性能(中,5 条):React Compiler、useMemo、useCallback、React.memo。
- Effects 与事件(中,5 条):useEffectEvent、清理、外部存储、派生状态反模式。
- 组件模式(低中,5 条):ref-as-prop、组合、受控与非受控、key 重置。
- 代码库卫生(跨领域,5 条):去重、合并、死代码、边界一致性、prop 形态漂移。
使用方式
当用户要求审查、重构、现代化或审计 React 代码(单文件或整个仓库)时,应遵循 references/_review-algorithm.md,不要即兴发挥。该文档有四个不可协商的要点:
- 两种模式:绝不拒绝整个仓库的审计。选择模式 A(范围限定,约 ≤20 个文件)或模式 B(整树:清点遍历 + 定向扫描 + 完整类别 9)。算法说明了如何处理“审计我的代码库”而不将 800 个文件全部放入上下文。
- 判断优于 grep:每条规则命名的是模式形态,而非语法标记。在扫描前阅读每条规则的“可识别的形态”部分——grep 能找到容易的违规,但会遗漏高价值的违规(例如作者为避开 forwardRef 而手动钻取的 callback ref;onSubmit 在做 useActionState 的工作;形如派生状态的 useState+useEffect;隐藏 fetch 流程的自定义钩子)。grep 是触发器,绝不是裁决。
- 类别优先,而非文件优先——带有强制函数。按优先级顺序(关键 → … → 跨领域)一次扫描一个类别,覆盖所有范围内文件。算法要求范围声明、每类别进度行和最终覆盖表(类别 × 文件,单元格 ∈ {clean, N findings, n/a})。输出中缺失某个类别会立即显现。
- 代码库级发现来自类别 9。单文件规则无法告诉你“这两个组件应该合并”或“这个钩子是死代码”。类别 9(代码库卫生)在最后扫描完整清单,产生删除/去重/复用/合并的发现。
单文件临时问题(“这个钩子没问题吧?”)可以直接查阅相关规则。算法是为多文件和整个仓库的情况而存在的。
适用场景
- 编写新的 React 组件或重构现有组件。
- 审计或现代化一个目录、PR 或整个仓库(参见 references/_review-algorithm.md 了解所需流程)。
- 从 React 18 迁移到 React 19(forwardRef → ref-as-prop,<Context.Provider> → <Context>,useFormState → useActionState)。
- 优化重渲染性能或包体积。
- 使用并发特性(useTransition、useDeferredValue、Activity)。
- 设置 Server Components 或服务器/客户端边界。
- 实现表单操作、乐观更新或数据获取。
- 配置 React Compiler 自动记忆化。
- 审查 React 代码中的常见反模式或过时的 React 18 惯用法。
- 发现单文件规则无法看到的代码库级问题:跨文件重复逻辑、近似重复组件、死代码、不需要客户端的 'use client' 文件、prop 形态漂移(见类别 9)。
限制
资料未提供关于收费、价格、平台支持范围、具体效果或使用步骤的更多信息。本技能为规则指南,不包含可执行代码或安装命令。