React
React 应用构建、调试与审查的 AI 助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：React。 它的用途是：React 应用构建、调试与审查的 AI 助手 完整的 Skill 内容见：https://321skill.com/skills/react-x-3/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我写一个React组件，使用useState和useEffect实现一个计数器，并添加TypeScript类型定义。”它会生成完整的组件代码，包含类型注解、最佳实践和注释。又比如：“我的列表组件在输入时卡顿，请帮我优化。”它会分析代码，建议使用React.memo、useMemo或虚拟列表，并给出改造后的代码。
介绍
本 Skill 专门解决 React 开发中的常见痛点：组件重渲染过多、无限循环（“too many re-renders”）、状态过期不更新、水合不匹配、hook 顺序错误、Effect 重复触发或 fetch 竞态、输入卡顿、长列表滚动慢等。同时帮你选择合适的状态管理方案（useState、Context、Zustand、TanStack Query、Redux），并适配 React 19、Server Actions、React Compiler 等新特性。
使用时，只需描述你的问题或需求，例如“我的组件每次输入都重新渲染”或“帮我用 TypeScript 写一个带虚拟列表的搜索框”。它会自动分析代码上下文，给出修复方案、优化建议或完整代码实现。也可用于审查 AI 生成的 React 代码，检查其质量与合规性。
适合前端开发者、全栈工程师、测试工程师，尤其是正在重构或优化 React 项目、准备升级到 React 19、或需要快速定位复杂 bug 的团队。也适合在学习 React 时遇到疑难杂症的学生。
建议在使用时尽量提供完整的代码片段和错误信息，以便更精准地定位问题。注意本 Skill 不涵盖 React Native（移动端）和 Next.js 路由/部署相关场景，这些请使用专门的 react-native 或 nextjs 技能。
核心特点
相比通用代码助手，这个 Skill 深度聚焦 React 生态，能精准识别并修复 React 特有的问题（如 Hooks 规则、hydration 错误、Server Components 限制），并提供针对 React 19 和 React Compiler 的最新最佳实践。
注意事项
不适用于 React Native（移动端）或 Next.js 路由和部署，应使用专门的 react-native 或 nextjs 技能。
常见问题
如何解决 React 组件无限重渲染？
描述你的组件代码，它会分析并指出问题，例如缺少依赖项、状态更新逻辑错误或副作用中调用了 setState 导致循环。
如何优化长列表滚动性能？
可以请求使用虚拟列表（如 react-window 或 react-virtuoso），或显式指定稳定的 key。该 Skill 会给出具体实现建议和代码示例。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/react-x-3/raw/index.md 读取 React 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/react-x-3/raw/index.md（查看排版版本）