你的AI搭档又在写烂代码了?这个工具专治React代码癌

用 AI 写代码两年了，我越来越觉得不对劲。

项目跑得通，功能也能用，但每次 code review 的时候，总有种说不上来的难受。组件嵌套深得像千层饼，useEffect 满天飞，key 清一色用 index。你说它错了吧，它没报错。你说它对吧，三个月后维护的人（大概率是你自己）想哭。

这不是你的问题。这是 AI 写 React 的通病。

最近 GitHub 上有个项目火了——react-doctor，一周拿了八千多星。作者说的话特别扎心："Your agent writes bad React. This catches it." 你那个 AI 搭档写的 React 代码太烂了，这个工具就是来抓它的。

AI 写 React，到底烂在哪

先别急着喷。我不是说 AI 不能用。实际上我现在每天的工作流已经离不开 Copilot 和 Claude 了。但用久了你会发现，AI 生成的 React 代码有几个非常典型的毛病：

第一，滥用 useEffect。 数据能直接算出来的东西，AI 非要用 useEffect 去 setState。你让它写个搜索框，它给你搞三个 useEffect 联动，一个监听输入变化，一个做防抖，一个更新结果。实际上一个 useMemo 就能解决的事，它硬生生写了 40 行。

第二，状态管理一团乱。 派生状态存到 useState 里、props 同步到本地 state 导致不同步、多个 state 级联更新……这些 ESLint 查不出来的逻辑问题，AI 特别喜欢写。

第三，性能陷阱。 匿名函数到处传、列表渲染不传 key、useCallback 和 useMemo 要么不用要么乱用。组件一多页面直接卡死。

第四，安全漏洞。 dangerouslySetInnerHTML 随手就来，用户输入不 sanitize，直接把 XSS 漏洞写进生产环境。

这些毛病 ESLint 查一部分，但很多逻辑层面的问题它管不了。你需要的不是 lint，是 doctor。

react-doctor 怎么治

安装就一行命令：

npx -y react-doctor@latest .

跑完之后它会给你一个 0 到 100 的健康分：75 以上算健康，50 到 74 需要修，50 以下——恭喜你，你的 AI 确实需要管教了。

它扫描的维度有六个：

State & Effects — 检查滥用 useEffect、派生状态、级联更新
Performance — 渲染性能、不必要的重渲染
Architecture — 组件拆分、职责划分
Security — XSS 风险、敏感数据暴露
Accessibility — 无障碍标准
Dead Code — 无用代码和僵尸组件

而且它自动识别你用的是什么框架——Next.js、Vite、React Native 都行，React 版本不同规则也会自动切换。

不只是扫描，还能给 AI 立规矩

react-doctor 最骚的操作是这个：它能直接装进你的 AI 编程助手。运行：

npx -y react-doctor@latest install

它会检测你装了哪些 AI 编程工具——Claude Code、Cursor、Codex、OpenCode 等等 50 多种都支持——然后把 React 最佳实践规则注入进去。下次你让 AI 写组件，它就不会再给你整那些烂活了。

这就相当于给你的 AI 请了个家教。它写代码之前先过一遍自己的规矩，写出来的东西质量明显不一样。

CI/CD 里也能用

如果你团队在做 code review，可以直接把它加到 GitHub Actions 里。PR 提交后自动跑一次扫描，有问题直接在评论区贴出来。配置也就十几行：

name: React Doctor
on:
  pull_request:
    branches: [main]
jobs:
  react-doctor:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v5
      - uses: millionco/react-doctor@main

有了这个，代码质量不再是 review 时候靠运气。每次 PR 自动给分，低于阈值直接拦住。

需要注意什么

用了一段时间，几个小提醒：

第一次跑可能会有大量告警，别慌。它自带 ignore 机制，可以在配置里按文件、按规则、按 override 三种粒度屏蔽误报。
如果你已经在用 ESLint 或 oxlint，它的配置会自动合并，不用重复定义规则。
支持 inline suppression——某些特殊情况确实需要绕开规则时，一行注释就能搞定，不影响其他地方的扫描。

说真的，试试看

我自己的项目跑了一轮，得分 68。修完一轮后涨到 82，页面响应速度肉眼可见地提升了。不是因为我的代码变好了，而是之前那些 AI 埋的坑终于被填上了。

现在前端团队都在用 AI 写代码，这是趋势，挡不住的。但 AI 写的代码质量参差不齐也是事实。与其抱怨，不如给 AI 套个缰绳。react-doctor 就是这个缰绳。

一行命令，不欠技术债。

项目地址：https://github.com/millionco/react-doctor