React Doctor：一键扫描 React 代码反模式
React Doctor 是高性能 CLI 扫描器：检查 React 项目的反模式、可访问性问题与性能风险。本文讲解功能、验证方法与工作流集成。
npx react-doctor@latest . 即可扫描整个 React 项目，输出反模式清单（无效重渲染、hooks 误用、无障碍缺失、性能隐患）并按严重度分级。由 million.js 作者开发，Rust 级速度，适合接入 CI 做质量门禁。
解决什么问题
团队都知道 React 最佳实践——难的是在十万行代码库里持续一致地执行。人工 Code Review 覆盖不全，反模式在快节奏迭代中悄悄堆积。React Doctor 把"资深 React 评审者"变成了可执行的 CLI。
核心能力
- 反模式检测：useEffect 依赖缺失、不必要的 state、prop drilling 信号；
- 性能风险：渲染中的昂贵计算（缺 memo）、大列表缺 key 或 key 用 index、无效重渲染链；
- 可访问性：img 缺 alt、表单控件缺 label、交互元素无键盘支持；
- 按严重度分级：error/warning 分级输出，先修高价值问题。
验证流程
cd your-react-project
npx react-doctor@latest .
输出按文件组织的问题清单：位置、规则、修复建议。首次扫描老项目可能数百条——按规则类型分批修复，先扫 error 级。
工作流集成
- CI 质量门禁：错误级问题非零退出码，阻止合并；
- pre-commit：仅扫描变更文件（配 lint-staged）；
- 技术债看板：全量扫描结果定期跟踪，量化治理进度；
- 与 ESLint 互补：react-doctor 的模式检测与 eslint-plugin-react 的规则集有重叠也有独有——两者可并行。
常见问题（FAQ）
Q：和 ESLint React 插件冲突吗？
不冲突——react-doctor 专注"代码库级模式分析"（跨组件的重渲染链等），ESLint 擅长单文件规则。两者输出有重叠时以项目规范为准取舍。
Q：支持哪些 React 版本/框架？
支持现代 React（hooks 时代），Next.js/Remix 项目同样可扫——它分析的是组件代码而非框架配置。
Q：误报怎么处理？
任何静态分析都有误报。用行内注释标记豁免，并在团队规范中明确"哪些规则可以豁免"——工具服务于团队约定，不是反之。
参考文档
本文依据公开文档整理，示例需按项目依赖版本验证；不将文档中的性能描述视为本项目实测结果。
