react-doctor
一个用于诊断和优化React应用性能的AI助手工具。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：react-doctor。 它的用途是：一个用于诊断和优化React应用性能的AI助手工具。 完整的 Skill 内容见：https://321skill.com/skills/react-doctor/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请使用react-doctor分析我的src/components目录下的React代码，找出性能瓶颈。”，它会扫描指定目录，分析组件结构、状态管理和副作用使用情况，生成一份报告，指出哪些组件存在不必要的重复渲染、哪些依赖数组设置不当，并给出使用React.memo、useCallback或拆分组体的具体代码建议。
介绍
React Doctor是一个专为React开发者设计的AI工具，旨在帮助诊断和解决React应用中的常见性能问题与代码缺陷。它通过分析你的代码库，识别出可能导致渲染效率低下、内存泄漏或不符合最佳实践的代码模式。
使用时，开发者只需将项目路径提供给React Doctor，它便会自动扫描代码，生成详细的诊断报告，指出潜在的性能瓶颈、不必要的重新渲染、过时的API使用等问题，并提供具体的优化建议和代码修改示例。
它非常适合希望提升应用性能、维护代码质量或学习React最佳实践的前端开发者。无论是处理遗留代码库，还是在开发新功能时进行预防性检查，React Doctor都能提供有价值的洞察。
建议在开发周期的关键节点（如功能完成、代码审查前）或遇到性能问题时使用。请注意，它提供的建议需要开发者结合具体业务逻辑进行判断和验证，自动化修改可能不适用于所有复杂场景。
核心特点
与通用的代码检查工具（如ESLint）不同，React Doctor深度聚焦于React生态特有的性能问题和模式，能识别如不当的`useMemo`/`useCallback`使用、组件拆分不合理等场景；同时，它不仅能指出问题，还能生成具体的、可执行的优化代码片段，提供“处方”而不仅仅是“诊断”。
注意事项
不适合用于非React项目或评估非性能相关的业务逻辑正确性。
常见问题
React Doctor和ESLint的React插件有什么区别？
ESLint插件主要检查代码规范和语法，而React Doctor专注于深度分析组件渲染逻辑、状态管理和性能模式，并提供具体的优化代码方案。
使用它会修改我的源代码吗？
默认情况下，它只提供诊断报告和建议，不会自动修改代码。是否采纳并实施修改由开发者决定。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/react-doctor/raw/index.md 读取 react-doctor 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/react-doctor/raw/index.md（查看排版版本）