Vibe coding 跑了一年多,终于有人出来收拾残局了。
Aiden Bai——就是搞 million.js 那个——带着他的团队推了个叫 react-doctor 的东西。口号很直接:「Your agent writes bad React. This catches it.」翻译过来就是:你的 AI 写的 React 代码很烂,我来帮你抓。
不客气,但很准确。
为什么需要这么个东西
用 Claude Code、Cursor、Codex 写过 React 的人大概都有过这种体验:AI 一次性给你生成十几个组件,看着能跑,但仔细看——
useEffect 里套 useState,依赖数组漏了一半;props 传递超过四层没做 memo;Tailwind 的 class 写成了 text-sm text-xs 两种尺寸混在一起;事件处理器每次渲染都重新创建,子组件无意义地重渲染了三十次。
AI 写代码快,但它不知道 React 的性能陷阱在哪。它不知道 React.memo 什么时候有用什么时候是心理安慰。它不知道 useCallback 在某些场景下反而增加开销。
react-doctor 做的就是这件事:专门给 AI 生成的 React 代码做体检。
它能查出什么
从代码库和最近两天的更新来看,react-doctor 的检测规则覆盖了几个关键维度:
性能类:不必要的重渲染、缺失的 memo 优化、内联函数导致的子组件重复渲染、useEffect 依赖不完整。这些是 AI 最容易犯的错误——它能写出功能正确的代码,但性能意识为零。
结构类:过深的 props drilling、该用 context 的地方在用 prop 传递、组件拆分不合理。AI 倾向于把东西堆在一起,因为它没有"这个组件将来会变大"的直觉。
Tailwind 专项:最近两天刚更新的 Tailwind 版本检测,能识别 size-N 等 Tailwind v4 特有的写法是否与项目版本匹配。这种细节 AI 经常搞错,因为它训练数据里的 Tailwind 版本是混合的。
实际用下来怎么样
这个项目走的是 GitHub Action 路线,集成到 CI 里跑。你可以在 PR 上直接看到 react-doctor 的检测结果,不用本地装任何东西。
对于个人开发者来说,意义在于:vibe coding 生成的代码可以直接过一遍 doctor,再 merge。相当于给 AI 代码加了一道质量门禁。
对于团队来说,它解决了一个很实际的治理问题——每个人都在用 AI 写代码,但代码质量参差不齐。有个统一的检测标准,比在 code review 里一条条手动指出效率高得多。
跟 ESLint 的区别
有人可能会问:ESLint + react-hooks 插件不是已经在做类似的事了吗?
有重叠,但定位不同。ESLint 是通用规则引擎,覆盖面广但深度有限。react-doctor 专注于 AI 生成代码的典型缺陷模式——那些 ESLint 规则库里没有覆盖、但在实际 AI 编码中高频出现的问题。
比如 AI 特别喜欢写 useEffect(() => { fetchData(); }, []) 然后忘记处理 loading 和 error 状态。ESLint 不会报这个错,因为它语法上完全合法。但 react-doctor 知道这在 AI 生成代码中是个危险信号。
值不值得用
7.9k star 这个数字本身就说明了需求的存在。Aiden Bai 团队的履历也让人放心——million.js 在 React 性能优化领域是有实打实的技术积累的。
目前项目还比较早期(276 commits,9 个 tags),检测规则库还在快速扩充中。如果你团队里已经在大量使用 AI 写 React,值得现在接进来试试。规则会越来越多,越早接入积累的检测数据越有价值。
不过别指望它能替代 code review。它是个质检工具,不是质量保证。AI 代码里那些架构层面的问题、业务逻辑的漏洞,还是得靠人来判断。
后续观察
react-doctor 的 leaderboard 功能刚上线不久,已经在 README 上挂了个实时排行榜。这种社区驱动的玩法如果跑起来,检测规则的质量和覆盖度会有一个正向循环。
下一个值得关注的点是:它会不会扩展到 Vue、Svelte 等其他框架。如果 React 这条路跑通了,框架agnostic 的 AI 代码质检工具会是个更大的市场。
主要来源: