SuperAPI AI 工具集

react-code-review-patterns

前端与建站

查看项目

更新于 10-16 04:28

技能介绍

用途:为 React/TypeScript 前端代码审查提供结构化检查清单与模式参考,适用于审查 React 组件、检查 TypeScript 类型安全等场景。

主要能力:按优先级给出检查项,依次为安全(无密钥泄露、防 XSS、安全使用 innerHTML)、类型安全(避免 any、显式类型、正确泛型)、React 模式(Hooks 规则、组件结构、key)、性能(记忆化、包体积、重渲染)、可访问性(ARIA、键盘导航、语义化 HTML)。

清单内容:TypeScript 检查(显式类型、泛型约束、严格空值检查、类型守卫、由 schema 生成 API 类型、字符串枚举或常量对象);React 组件检查(函数组件、props 用 interface/type、默认参数、显式 children、Fragment、稳定唯一 key);Hooks 检查(仅在顶层调用、完整依赖数组、useEffect 清理、自定义 Hook 以 use 前缀、useMemo/useCallback 用于昂贵操作);状态管理(服务端状态用 React Query、客户端状态用 Context 或 useState、表单用 React Hook Form、isLoading/isError、乐观更新);API 集成(useQuery、useMutation、错误边界、React Query 缓存);性能(记忆化回调、长列表虚拟化、React.lazy 与 Suspense、图片懒加载);可访问性(语义化标签、aria-label、tabIndex 与焦点管理、WCAG AA 对比度、label htmlFor);测试(组件测试、行为测试、getByRole/getByLabelText、waitFor/findBy、MSW 模拟 API);通用(无 console.log、注释解释 why、单组件小于 300 行、绝对路径导入)。

常见反模式:any 类型、用索引作 key、内联函数、用 useEffect 处理派生状态、// eslint-disable、直接操作 DOM、dangerouslySetInnerHTML、缺少错误边界。

使用方式与限制:资料未提供具体安装命令或调用步骤,仅说明参考文件 references/examples.md 含模式代码示例;具体用法暂未提供。