React
React应用开发、调试与代码审查的AI助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：React。 它的用途是：React应用开发、调试与代码审查的AI助手 完整的 Skill 内容见：https://321skill.com/skills/react-x-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我的React组件在输入时打字很卡，如何优化？” 它会分析可能的原因，如不必要的重渲染、过大的组件树或低效的状态更新，并建议使用React.memo、useMemo、useCallback或虚拟化长列表来提升性能。或者
对AI说：“我想把类组件改成函数组件，并引入Hooks。” 它会指导你如何逐步重构，正确使用useState、useEffect等Hook，并处理生命周期方法的迁移。
介绍
这个Skill专注于解决React应用开发中的核心痛点。它能帮助你构建、调试和审查React组件、状态管理、性能优化以及测试代码，是React开发者的得力助手。
当你遇到组件无限重渲染、状态更新异常、Hook顺序错误、Effect重复执行、列表滚动卡顿等常见React问题时，可以直接向它提问。它还能协助你选择合适的状态管理方案（如useState、Context、Zustand、TanStack Query等），并指导你使用React 19、Server Actions、React Compiler等新特性。
该Skill非常适合正在编写、重构React组件，或需要调试复杂React应用的前端开发者。无论是处理TypeScript类型、测试组件，还是审查AI生成的React代码，它都能提供专业建议。
请注意，它主要服务于React Web应用开发，不适用于React Native移动开发或Next.js的路由与部署相关问题。对于后者，建议使用专门的react-native或nextjs Skill。
核心特点
与通用前端开发助手相比，它深度聚焦React技术栈，能精准诊断React特有的运行时错误（如“too many re-renders”、水合不匹配）并提供解决方案；同时覆盖了从传统状态管理到最新React 19、Server Actions及React Compiler的完整知识体系。
注意事项
不适用于React Native移动应用开发或Next.js框架的路由、部署等框架层问题。
常见问题
组件无限重渲染怎么办？
检查useEffect依赖项、useState/useReducer更新逻辑，或使用React DevTools分析渲染原因。
如何选择状态管理库？
根据应用复杂度：简单状态用useState/Context，复杂共享状态用Zustand/TanStack Query，大型应用可考虑Redux。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/react-x-2/raw/index.md 读取 React 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/react-x-2/raw/index.md（查看排版版本）