OpenClaw 代码质量诊断Agent指南

下午4点33分，AI写了300行React代码。编译通过了，跑起来也没报错。但三天后用户说"这个页面比树懒还慢"——事实证明，能跑的代码不一定是好代码。

React Doctor在GitHub上一天涨了340颗星（react-doctor by millionco），因为它解决了一个痛点：AI写代码很快，但写出来的代码质量参差不齐。

今天我们就聊聊怎么用OpenClaw构建一个自己的"代码医生"。

AI代码的质量问题

AI编码Agent（Cursor、Claude Code、OpenClaw）写代码的速度是人类的好几倍，但它们容易犯这些错：

过度渲染 - 不必要的re-render导致性能问题
内存泄漏 - useEffect清理不当、事件监听未移除
反模式 - prop drilling、上帝组件、状态管理混乱
无障碍缺失 - 缺少aria标签、键盘导航不可用
过度工程化 - 简单问题用复杂方案解决

构建代码诊断Agent

核心设计

# SOUL.md - 代码诊断Agent配置
# 角色
你是一个代码质量诊断专家，专门审查AI生成的代码。

# 诊断维度
1. 性能问题 - re-render、内存泄漏、大列表优化
2. 架构问题 - 组件拆分、状态管理、代码复用
3. 安全问题 - XSS、注入、敏感信息泄露
4. 可维护性 - 命名规范、类型安全、注释质量
5. 最佳实践 - React设计模式、Hook规则、错误处理

# 输出格式
对每个问题给出：
- 严重度: 🔴 P0 / 🟡 P1 / 🟢 P2
- 位置: 文件名:行号
- 问题: 简洁描述
- 修复: 具体代码修改建议

诊断工作流

# 代码诊断Agent的工作流程

## Step 1: 扫描代码
# 读取项目文件
exec("find src/components -name '*.tsx' -exec wc -l {} +")

## Step 2: 静态分析
# 运行ESLint和TypeScript检查
exec("npx eslint src/ --format json")
exec("npx tsc --noEmit")

## Step 3: 反模式检测
# 常见React反模式检查
检查项:
  ☐ 组件超过200行（拆分建议）
  ☐ useEffect有3个以上依赖（逻辑过于复杂）
  ☐ useState超过5个（考虑useReducer）
  ☐ 嵌套三元表达式超过2层
  ☐ 缺少key属性的列表渲染
  ☐ 未处理的Promise rejection

## Step 4: 性能分析
exec("npx react-compiler-health")  # React编译器健康检查

## Step 5: 生成诊断报告
write("code-review-report.html", 报告内容)

10大React反模式（AI最爱犯）

索引作为key - list.map((item, i) => <li key={i}>) → 用唯一ID
内联对象/函数 - 每次render创建新引用导致子组件重渲染 → useMemo/useCallback
useEffect滥用 - 什么逻辑都往useEffect塞 → 事件处理函数中处理
巨型组件 - 500行的组件 → 按职责拆分为子组件
Prop Drilling - props传5层深 → Context或状态管理库
不处理的错误 - async函数没有try-catch → 错误边界
硬编码字符串 - UI文案写在组件里 → i18n或常量文件
过度useMemo - 所有东西都memo → 只memo计算代价高的
忽略TypeScript - 到处any → 用具体类型
缺少loading/error状态 - 只写happy path → 完整的状态处理

OpenClaw中的代码审查流程

# 在OpenClaw中设置自动代码审查

## 方案1: Subagent异步审查
# 在代码提交后自动触发审查
sessions_spawn(
    task="审查以下代码的质量问题...",
    runtime="subagent",
    model="claude-sonnet-4-20250514"
)

## 方案2: cron定期审查
# 每天凌晨审查当天提交的代码
# cron: 0 2 * * *

## 方案3: 实时审查
# 在开发过程中持续提供反馈
# 通过exec监听文件变化 → 触发审查

诊断报告格式

# 代码质量诊断报告

## 📊 总览
- 检查文件: 47个
- 发现问题: 23个 (🔴 P0: 3, 🟡 P1: 12, 🟢 P2: 8)
- 代码评分: 72/100

## 🔴 P0 问题（必须修复）
1. [MemoryLeak] src/hooks/useWebSocket.ts:23
   useEffect中创建了WebSocket连接但未在cleanup中关闭
   → 添加 return () => ws.close()

2. [Performance] src/components/Dashboard.tsx:45
   大列表(1000+项)未使用虚拟滚动
   → 安装react-window: npx add react-window

3. [Security] src/api/fetch.ts:12
   用户输入未转义直接拼接到URL
   → 使用encodeURIComponent()

## 🟡 P1 问题（建议修复）
4. [AntiPattern] src/components/Form.tsx:67
   嵌套三元表达式3层 → 使用early return简化