React
React应用开发、调试与代码审查的专属助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：React。 它的用途是：React应用开发、调试与代码审查的专属助手 完整的 Skill 内容见：https://321skill.com/skills/react-x-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我的React组件在输入时卡顿严重，如何优化？’，它会分析你的组件代码，检查是否存在不必要的重渲染，并建议使用useMemo、useCallback或虚拟化列表等技术进行性能优化。
对AI说：‘帮我审查这段AI生成的useEffect代码，看看有没有潜在的竞态问题’，它会检查依赖数组和异步操作，指出问题并提供修复方案。
介绍
本Skill专为React应用开发的全生命周期提供支持。它能够帮助开发者构建、调试和审查React应用，覆盖从组件、状态管理、性能优化到测试的各个环节。
当你在编写或重构组件、选择状态管理方案（如useState、Context、Zustand、TanStack Query、Redux）时，它可以提供最佳实践指导。遇到组件过度重渲染、无限循环、状态陈旧不更新、水合不匹配或Hook顺序错误等问题时，它能帮你快速定位根因。
无论是处理Effect重复执行、请求竞态、输入卡顿、长列表滚动缓慢，还是希望采用React 19、Server Actions、React Compiler等新特性，抑或是使用Testing Library测试组件、在TypeScript中定义Props类型、审查AI生成的React代码，这个Skill都能提供专业的帮助。
它非常适合正在构建或维护React应用的前端开发者、全栈工程师以及需要审查React代码质量的团队成员。建议在遇到具体React问题时直接询问，或在进行代码重构前寻求最佳实践建议，以获得最精准的指导。
核心特点
专注于React框架本身，提供从基础概念（如组件、Hooks）到高级特性（如Server Components、React Compiler）的深度、针对性支持，而非泛泛的前端开发建议。其调试能力尤其突出，能精准定位React特有的运行时错误（如无限重渲染、水合错误）和性能问题。
注意事项
不适用于React Native移动应用开发或Next.js框架的路由、部署等特定功能，相关需求应使用专门的react-native或nextjs Skill。
常见问题
这个Skill能帮我调试React组件无限重渲染的问题吗？
可以，它能分析组件依赖项、状态更新逻辑，帮你找出导致无限循环的原因并提供修复方案。
它能指导我如何从useState迁移到Zustand进行状态管理吗？
是的，它能根据你的应用场景，对比不同状态管理方案的优劣，并给出具体的迁移步骤和代码示例。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/react-x-7/raw/index.md 读取 React 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/react-x-7/raw/index.md（查看排版版本）