React
React应用开发、调试与代码审查的专家级助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：React。 它的用途是：React应用开发、调试与代码审查的专家级助手 完整的 Skill 内容见：https://321skill.com/skills/react-x-10/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我的React组件在使用useEffect获取数据时，控制台警告有内存泄漏，该怎么修复？’ 它会分析你的useEffect清理函数，指出可能缺少的依赖项或未正确执行的清理逻辑，并提供修复代码示例。或者，你可以说：‘我想把类组件改写成函数组件，并使用Hooks管理状态。’ 它会指导你如何逐步迁移，并解释useState和useEffect如何替代this.state和生命周期方法。
介绍
这个Skill专为解决React应用开发中的各类痛点而生。无论是编写新组件、重构旧代码，还是应对棘手的运行时错误（如无限重渲染、状态更新延迟、水合不匹配），它都能提供精准的指导和解决方案。它覆盖了从基础的状态管理（useState, Context）到高级库（Zustand, TanStack Query, Redux）的选择，以及性能优化、表单处理、测试和TypeScript类型定义等全流程。
使用时，你可以直接描述你遇到的React问题或想要实现的功能。例如，当组件出现“Too many re-renders”错误时，向它展示错误信息和相关代码片段，它会帮你分析原因并提供修复方案。它也能在你采用React 19、Server Actions或React Compiler等新技术时提供迁移建议。
这个Skill非常适合前端开发、全栈开发以及正在学习React的高校学生。无论你是初学者在摸索Hook的使用顺序，还是资深开发者在优化大型列表的滚动性能或调试竞态条件，都能从中获得帮助。
建议在使用时，尽可能提供清晰的代码上下文和具体的错误信息，这将有助于获得更准确的解答。请注意，它主要专注于React核心库及其生态，对于Next.js的路由、部署或React Native移动开发相关问题，建议使用专门的Skill。
核心特点
与通用编程助手不同，它深度聚焦于React生态，能精准诊断React特有的错误（如Hook规则违反、水合错误），并提供符合React最佳实践（如Server Components、并发特性）的现代化解决方案。
注意事项
不适用于React Native移动应用开发，也不处理Next.js框架特有的路由、服务端渲染配置及部署问题。
常见问题
如何解决React组件无限重渲染的问题？
检查useEffect依赖项、useState setter函数是否在渲染中被直接调用，或使用useMemo/useCallback优化。
React Server Components和传统组件有什么区别？
Server Components在服务端渲染，不发送客户端bundle，用于获取数据或减少bundle大小；客户端组件用于交互。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/react-x-10/raw/index.md 读取 React 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/react-x-10/raw/index.md（查看排版版本）