React
React应用开发、调试与代码审查的一站式助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：React。 它的用途是：React应用开发、调试与代码审查的一站式助手 完整的 Skill 内容见：https://321skill.com/skills/react-x-4/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我的React组件在输入时打字很卡，尤其是长列表滚动很慢，该怎么优化？’ 它会分析可能的原因，如不必要的重渲染、大型列表未做虚拟化、状态更新过于频繁等，并提供具体的优化策略，如使用React.memo、useCallback、虚拟滚动列表库或状态提升等。或者你说：‘帮我审查这段使用useEffect的代码，它似乎执行了两次。’ 它会检查依赖数组、组件卸载逻辑等，指出问题所在并给出修正建议。
介绍
本Skill专为解决React应用开发中的各类痛点而生。无论是编写新组件、重构旧代码，还是调试棘手的性能问题或状态管理难题，它都能提供专业的指导。
你可以通过自然语言描述你遇到的React问题，例如组件无限重渲染、状态更新异常、Hook使用不当、性能瓶颈或测试用例编写等。Skill会分析你的代码片段或问题描述，给出具体的解决方案、最佳实践建议或调试步骤。
它非常适合正在使用React进行开发的前端工程师、全栈开发者以及需要审查React代码质量的测试人员。无论是初学者在理解核心概念时遇到困惑，还是资深开发者在处理复杂状态逻辑或适配React新特性时需要建议，都能从中受益。
建议在使用时尽可能清晰地描述问题上下文，并提供相关的代码片段（如组件结构、Hook使用方式等），这样Skill能给出更精准的解答。对于涉及复杂业务逻辑或特定第三方库深度集成的问题，可能需要结合具体库的文档进行综合判断。
核心特点
与通用编程助手相比，它深度聚焦于React生态，能精准诊断如“Hydration不匹配”、“Hook调用顺序错误”、“Effect重复执行”等React特有难题；与单一功能的代码生成器不同，它覆盖了从开发、调试、性能优化到代码审查的React应用全生命周期。
注意事项
不适用于React Native移动应用开发或Next.js框架特有的路由、部署等场景，相关需求应使用专门的react-native或nextjs技能。
常见问题
这个Skill能帮我写React组件代码吗？
可以，它能根据你的需求生成或重构React组件代码，包括使用Hooks、Context、状态管理等。
遇到‘Too many re-renders’错误怎么办？
它能帮你分析导致无限重渲染的原因，常见于useEffect依赖项设置不当或在渲染中直接调用状态设置函数，并提供修复方案。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/react-x-4/raw/index.md 读取 React 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/react-x-4/raw/index.md（查看排版版本）