React 组件审计器

对 React 组件进行审计，识别性能瓶颈、可访问性问题、Hook 使用错误、Props 设计缺陷以及不必要的重渲染。可发现适合应用 React.memo 的场景、陈旧闭包（stale closure）缺陷，以及状态管理反模式。

使用方式

"审计我的 React 组件性能"
"检查是否存在不必要的重渲染"
"审查组件中 Hook 的使用情况"
"审计我的 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 但接收对象/数组类型 props 的组件
• 内联函数类 props 导致子组件重渲染
• 作为 props 传递的事件处理器未使用 useCallback
• 开销较大的计算未使用 useMemo
• Context Provider 触发大范围重渲染树
• 状态放置在错误的组件中（提升层级过高）

包体积影响：

• 大型组件文件（>300 行 —— 建议拆分）
• 未做代码分割的重型依赖（如图表库、编辑器）
• Barrel 文件的重复导出导致 Tree-shaking 失效

3. Hook 正确性

• useEffect 缺少依赖项（引发陈旧闭包缺陷）
• useEffect 依赖项过多（执行过于频繁）
• useEffect 缺少清理函数（定时器、订阅等造成内存泄漏）
• 对派生状态（derived state）使用 useState（应改为计算得出）
• 自定义 Hook 未遵循 Hook 规则
• 对本应触发重渲染的值误用 useRef（应使用 useState）

4. 可访问性审计

• 交互式元素缺乏键盘支持
• 图标按钮缺少 aria-label
• 图片缺失 alt 文本
• 表单输入控件未关联 label
• 条件样式中的颜色对比度不合规
• 模态框（modal）与对话框（dialog）中焦点管理缺失
• 缺失跳过导航链接（skip navigation link）

5. Props 设计

• Props 过多（>7 个，表明组件应拆分）
• 布尔型 Props 命名存在歧义否定（例如 isNotVisible）
• 必填 Props 实际具有明显默认值
• Children 模式 vs 渲染 Props（render props）vs 组合（composition）的选择不当
• Props 钻取过深（>3 层）

6. 状态管理

• 本应全局化的本地状态（跨路由共享）
• 本应本地化的全局状态（仅在一个组件中使用）
• 冗余状态（可由其他状态推导得出）
• 多个组件间手动同步状态（应采用单一数据源）

输出示例

## React 组件审计报告

**组件总数：** 45 | **自定义 Hook 数量：** 12

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

2. **Context 引发重渲染风暴** — AppProvider.tsx  
   单一 Context 包含 12 个值，任一值变更均导致所有消费者重渲染  
   → 拆分为 AuthContext、ThemeContext 和 UserContext

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

### 🟡 改进建议（5 项）
4. 8 个组件可受益于 React.memo（其父组件 props 稳定）
5. 12 个 onClick 处理器中使用了内联箭头函数
6. 3 个 useEffect 缺少清理函数（存在定时器与订阅泄漏风险）
7. DashboardPage 接收 23 个 props —— 建议拆分为多个子组件
8. 5 个表单中存在 input 元素未通过 htmlFor/id 关联 label

### ✅ 良好实践
- 使用自定义 Hook 封装数据获取逻辑，并统一处理 loading/error 状态
- 正确配置 Suspense 边界并提供 fallback
- 在路由层级使用 Error Boundary
- 组件文件结构保持一致