📦 React Component Auditor

React Component Auditor 审计 React 组件的性能瓶颈、可访问性问题、Hook 正确性、Props 设计缺陷及不必要重渲染。识别 memo 机会、闭包过期 bug、状态管理反模式。

用法 “Audit my React components for performance” “Check for unnecessary re-renders” “Review hook usage in my components” “Audit accessibility of my React app”

工作原理

• 组件发现

find src -name ".tsx" -o -name ".jsx" | head -30 grep -rn "export.*function\|export default\|React.FC\|React.memo" src/components/ | head -30

• 性能分析

重渲染检测：

• 未用 React.memo 且接收 object/array props 的组件
• 内联函数 props 导致子组件重渲染
• 事件处理器未用 useCallback
• 昂贵计算未用 useMemo
• Context 提供者触发大范围重渲染
• 状态提升过高

打包影响：

• 组件文件过大（>300 行，需拆分）
• 未 code-split 的重型库（图表、编辑器）
• Barrel 文件 re-export 导致 tree-shaking 失败

• Hook 正确性
• useEffect 缺失依赖（闭包过期）
• useEffect 依赖过多（频繁执行）
• useEffect 无清理（定时器、订阅内存泄漏）
• useState 存储可推导状态
• 自定义 Hook 未遵守 Rules of Hooks
• 用 useRef 存储应触发渲染的值

• 可访问性审计
• 交互元素无键盘支持
• icon 按钮缺 aria-label
• 图片无 alt
• 表单输入无关联 label
• 条件样式颜色对比不足
• 模态框焦点管理缺失
• 无跳转导航链接

• Props 设计
• Props 过多（>7 建议拆分）
• 布尔 Props 否定混乱（isNotVisible）
• 必填 Props 有显而易见默认值
• Children vs render props vs composition 选择
• Props drilling（>3 层）

• 状态管理
• 应为全局的局部状态（跨路由共享）
• 应为局部的全局状态（仅单组件用）
• 冗余状态（可推导）
• 多组件状态同步（应单一数据源）

输出

React Component Audit

Components: 45 | Custom Hooks: 12

🔴 Critical (3)

• useEffect 闭包过期 — UserProfile.tsx:34

userId 在依赖数组，但 fetchUser 捕获过期 token → 将 token 加入依赖或用 useCallback 包裹 fetchUser

• Context 重渲染风暴 — AppProvider.tsx

单个 Context 含 12 个值，任意变动触发所有消费者重渲染 → 拆分为 AuthContext、ThemeContext、UserContext

• 缺失键盘支持 — DropdownMenu.tsx

自定义下拉无键盘导航（Enter、Escape、方向键） → 添加 onKeyDown 与 aria-expanded

🟡 Improvements (5)

• 8 个组件可受益 React.memo（接收稳定父级 props）
• 12 处 onClick 使用内联箭头函数
• 3 处 useEffect 无清理（定时器、订阅泄漏）
• DashboardPage 接收 23 个 props — 拆分子组件
• 5 个表单缺失 htmlFor/id label 关联

✅ Good Practices

• 数据获取自定义 Hook 含 loading/error 状态
• 恰当 Suspense 边界与回退
• 路由级 Error Boundary
• 统一组件文件结构