React
专注于React应用开发、调试与代码审查的全栈助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：React。 它的用途是：专注于React应用开发、调试与代码审查的全栈助手 完整的 Skill 内容见：https://321skill.com/skills/react-x-6/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我的React组件在输入时打字非常卡顿，这是代码片段，请帮我分析性能瓶颈并提供优化建议。’，它会分析你的组件结构、状态更新和渲染逻辑，指出可能导致卡顿的原因（如不必要的重渲染、大型列表未虚拟化），并给出具体的优化方案，如使用useMemo、useCallback或虚拟化列表库。或者，
对AI说：‘我在将类组件重构为函数组件，遇到了状态逻辑迁移的问题，这是原代码...’，它会指导你如何将生命周期方法和this.state转换为React Hooks（useState, useEffect等），并确保逻辑一致。
介绍
这个Skill专门解决React开发者在构建、调试和审查应用时遇到的各种核心问题。它覆盖了从组件设计、状态管理、性能优化到测试和TypeScript类型定义的全流程，帮助开发者高效应对日常开发中的挑战。
使用方式非常直接：当你遇到React相关的具体问题时，可以直接向AI描述你的代码、错误信息或优化目标。例如，你可以粘贴一段导致无限重渲染的组件代码，询问如何修复；或者在采用新的React 19特性时，请求最佳实践指导。
它非常适合前端开发、全栈开发以及需要频繁编写或审查React代码的工程师。无论是初学者在搭建第一个组件，还是资深开发者在重构复杂状态逻辑，都能从中获得针对性帮助。
建议在使用时，尽可能提供具体的代码片段、错误堆栈或性能指标，这样AI能给出更精准的解决方案。同时，它主要聚焦于React核心库及常见生态（如状态管理、测试库），对于React Native移动开发或Next.js框架的特定路由、部署问题，建议使用对应的专用Skill。
核心特点
与通用编程助手相比，它深度集成了React的最新特性和最佳实践（如React 19、Server Components、React Compiler），并能精准诊断React特有的错误模式，如Hydration不匹配、Hook调用顺序错误、Effect重复执行等。
注意事项
不适用于React Native移动应用开发或Next.js框架的路由、部署等框架特定问题。
常见问题
这个Skill能帮我调试‘Too many re-renders’错误吗？
可以，请提供相关组件代码和状态设置，我会帮你分析重渲染原因并提供优化方案。
它能指导我如何从Context迁移到Zustand吗？
是的，我可以根据你的应用场景，提供状态管理方案选型建议和具体的迁移代码示例。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/react-x-6/raw/index.md 读取 React 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/react-x-6/raw/index.md（查看排版版本）