generic-react-code-reviewer

用途

React Code Reviewer 用于按照生产质量标准审查 React/TypeScript 代码。它适用于完成功能后、提交代码前或审查拉取请求时，检查代码中的缺陷、安全漏洞、性能问题、无障碍缺口，以及是否符合 CLAUDE.md 工作流。该技能扩展自通用代码审查技能（Generic Code Reviewer），后者提供完整的代码审查方法、P0/P1/P2 优先级体系和判断标准。

主要能力

提交前验证

通过阅读 diff 进行验证，而不是运行测试、lint 或构建阶梯；检查重点是以下列出的各项内容。

React 专属检查

TypeScript 严格模式

要求 tsconfig.json 中启用以下设置：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

检查要点包括：用户输入或 API 响应不得使用 any 类型；外部数据先用 unknown 验证，再用类型守卫；可复用工具中使用泛型而非 any。

组件模式

模式	检查项
Props	已定义接口，无 `any`
State	使用 Zustand/useState 并带类型
Events	事件处理器带类型
Refs	`useRef<ElementType>(null)`

Hook 依赖数组

P1 问题示例：缺少依赖。

// P1 Issue: Missing dependencies
useEffect(() => {
  fetchData(userId); // userId missing from deps
}, []); // ❌

// Correct
useEffect(() => {
  fetchData(userId);
}, [userId]); // ✓

规则：启用 react-hooks/exhaustive-deps ESLint 规则。

状态管理（Zustand/Redux）

检查 store 切片是否正确带类型；action 返回 void（直接更新状态）；派生状态的 selector 是否记忆化；大于 1MB 的大数据应放在 IndexedDB，而非 localStorage。

React Query/SWR 模式

// Proper typing
const { data } = useQuery<User>({
  queryKey: ["user", id],
  queryFn: () => fetchUser(id),
});

// Check: staleTime, cacheTime configured
// Check: error boundaries for query failures

性能（P1）

包体积目标

目标	阈值
初始包	< 100KB gzipped
懒加载分块	每块 < 50KB
JS 总量	< 300KB

懒加载

大于 20KB 的重型组件必须懒加载：

const HeavyChart = lazy(() => import('./HeavyChart'));
const RichTextEditor = lazy(() => import('./RichTextEditor'));

<Suspense fallback={<Skeleton />}>
  <HeavyChart />
</Suspense>

记忆化

// Expensive calculations
const sortedItems = useMemo(() =>
  items.sort((a, b) => a.date - b.date),
  [items]
);

// Callback stability for child components
const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

// Component memoization (when props are stable)
export const Item = memo(function Item({ data }: Props) {
  return <div>{data.name}</div>;
});

动画（仅 GPU 加速）

/* ✓ DO animate */
transform: translateY(-4px);
opacity: 0.5;

/* ❌ NEVER animate */
width, height, margin, padding, top, left

无障碍（P1）

焦点管理

// Modal focus trapping
useEffect(() => {
  if (isOpen) {
    const firstFocusable = modalRef.current?.querySelector("button, input");
    firstFocusable?.focus();
  }
}, [isOpen]);

// Escape to close
useEffect(() => {
  const handleEscape = (e: KeyboardEvent) => {
    if (e.key === "Escape") onClose();
  };
  window.addEventListener("keydown", handleEscape);
  return () => window.removeEventListener("keydown", handleEscape);
}, [onClose]);

JSX 中的 ARIA

// Icon-only buttons require labels
<button aria-label="Close modal">
  <X className="w-5 h-5" />
</button>

// Dialogs
<div role="dialog" aria-modal="true" aria-labelledby="title">
  <h2 id="title">Confirm Action</h2>
</div>

使用方式

该技能通过阅读代码 diff 进行审查，不依赖运行测试、lint 或构建。使用时将其应用于待审查的 React/TypeScript 代码变更，按照上述检查项逐项核对。

快速审查清单

React 专属（添加到基础清单）：

[ ] Hook 依赖正确
[ ] 重型组件已懒加载
[ ] 状态管理带类型
[ ] 在有益处使用记忆化
[ ] 模态框中的焦点管理

适用场景

完成功能后
提交代码前
审查拉取请求时

限制

该技能扩展自通用代码审查技能，完整方法、P0/P1/P2 优先级体系和判断标准需参考基础技能。完整的安全、性能、无障碍标准参考 Code Review Standards，UI 一致性参考 Design Patterns。关于收费、价格、平台等信息暂未提供。