React
专为React应用开发、调试与代码审查设计的AI助手技能。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：React。 它的用途是：专为React应用开发、调试与代码审查设计的AI助手技能。 完整的 Skill 内容见：https://321skill.com/skills/react-x/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我这个React组件在输入时打字很卡，长列表滚动也很慢，帮我分析一下原因并优化。”，它会分析你的组件代码，识别出可能导致性能问题的原因（如不必要的重渲染、大型列表未虚拟化），并提供具体的优化方案，如使用useMemo、useCallback或引入虚拟列表库。或者，你可以说：“我想用TypeScript为这个组件定义props类型，但不太确定如何设计。”，它会根据组件的用途和现有JavaScript代码，生成类型安全且合理的TypeScript接口或类型定义。
介绍
本技能专门针对React应用开发中遇到的各种问题提供解决方案。它能够协助开发者编写和重构组件，处理状态管理、性能优化、调试错误以及代码审查等任务。
当你在开发React应用时，无论是遇到组件无限重渲染、状态更新不及时、Hook顺序错误、Hydration不匹配，还是需要选择合适的状态管理库（如useState, Context, Zustand, Redux），本技能都能提供针对性的指导和建议。
它非常适合前端开发、全栈开发以及正在学习React的高校学生。无论是日常开发、解决疑难杂症，还是审查AI生成的React代码，都能从中获得帮助。
请注意，本技能专注于React核心库及其生态（如Server Components, React Compiler），不适用于React Native移动开发或Next.js的路由与部署问题，这些场景请使用对应的专用技能。
核心特点
与通用编程助手不同，本技能深度聚焦React技术栈，能精准诊断React特有的错误（如“too many re-renders”、hydration mismatch），并提供从状态管理选型到React 19新特性（如Server Actions、React Compiler）采纳的一站式指导。
注意事项
不适用于React Native移动应用开发或Next.js框架的路由、部署等特定问题。
常见问题
这个技能能帮我调试React组件无限重渲染的问题吗？
可以，它能分析可能导致无限循环的代码（如useEffect依赖、状态更新）并提供修复建议。
它能帮我审查AI生成的React代码质量吗？
是的，它可以审查AI生成的React代码，检查Hook使用规则、组件设计、性能隐患和TypeScript类型定义。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/react-x/raw/index.md 读取 React 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/react-x/raw/index.md（查看排版版本）