React 组件审计工具

对 React 组件进行性能瓶颈、无障碍访问问题、钩子使用正确性、属性设计缺陷以及不必要的重新渲染检查。识别记忆化机会、过时闭包错误和状态管理反模式。

使用方式

"审计我的 React 组件性能"
"检查不必要的重新渲染"
"审查组件中的钩子使用情况"
"审计 React 应用的无障碍访问性"

工作原理

1. 组件发现

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

2. 性能分析

重新渲染检测：

• 未使用 React.memo 且接收对象/数组类型属性的组件
• 内联函数作为属性传递导致子组件重新渲染
• 事件处理函数未使用 useCallback 包裹
• 耗时计算未使用 useMemo 优化
• 上下文提供者触发大面积重新渲染
• 状态提升过度（状态所在组件层级过高）

打包影响：

• 单个组件文件过大（超过 300 行 —— 建议拆分）
• 未进行代码分割的重型依赖（图表库、编辑器等）
• barrel 文件导出导致树摇失败

3. 钩子正确性

• useEffect 依赖项缺失（存在过时闭包问题）
• useEffect 依赖项过多（执行频率过高）
• useEffect 缺少清理函数（定时器、订阅等导致内存泄漏）
• 使用 useState 处理派生状态（应通过计算得出）
• 自定义钩子违反钩子规则
• 使用 useRef 存储本应由 useState 管理的值（不会触发重新渲染）

4. 无障碍访问审计

• 交互元素缺少键盘支持
• 图标按钮缺少 aria-label
• 图片缺少 alt 文本
• 表单输入项缺少关联标签
• 条件样式中的颜色对比度不足
• 模态框和对话框中焦点管理不当
• 缺少跳转导航链接

5. 属性设计

• 属性过多（超过 7 个建议拆分组件）
• 布尔属性命名含糊不清（如 isNotVisible）
• 具有明显默认值的必填属性
• children 模式与渲染属性或组合方式的选择
• 属性穿透过深（超过 3 层嵌套）

6. 状态管理

• 本地状态应为全局状态（跨路由共享）
• 全局状态应为本地状态（仅在单个组件内使用）
• 重复状态（可从其他状态推导）
• 多组件间状态同步（应遵循单一数据源原则）

输出结果

## React 组件审计报告

**组件数量：** 45 | **自定义钩子数量：** 12

### 🔴 严重问题（3项）
1. **useEffect 中的过时闭包** — UserProfile.tsx:34
   `userId` 在依赖数组中，但 `fetchUser` 捕获了过时的 `token`
   → 将 `token` 添加到依赖项，或对 `fetchUser` 使用 `useCallback`

2. **上下文引发的重新渲染风暴** — AppProvider.tsx
   单个上下文包含 12 个值，任意变更都会重新渲染所有消费者
   → 拆分为 AuthContext、ThemeContext、UserContext

3. **缺少键盘支持** — DropdownMenu.tsx
   自定义下拉菜单无键盘导航（Enter、Escape、方向键）
   → 添加 `onKeyDown` 处理器并设置 `aria-expanded`

### 🟡 改进建议（5项）
4. 8 个组件可受益于 `React.memo`（父组件稳定）
5. 12 个 `onClick` 处理函数使用内联箭头函数
6. 3 个 `useEffect` 缺少清理函数（存在定时器或订阅泄漏风险）
7. DashboardPage 组件拥有 23 个属性 —— 建议拆分为子组件
8. 5 个表单中输入框缺少 `htmlFor` / `id` 标签关联

### ✅ 良好实践
- 数据获取类自定义钩子包含加载和错误状态
- 正确使用 Suspense 边界并配置 fallback
- 路由级别设置错误边界
- 组件文件结构保持一致