React
React应用开发、调试与代码审查的专家级助手。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：React。 它的用途是：React应用开发、调试与代码审查的专家级助手。 完整的 Skill 内容见：https://321skill.com/skills/react-x-8/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我的React组件在输入时打字很卡，尤其是列表很长的时候，帮我分析一下原因和优化方案。’ 它会分析你的组件结构，检查是否存在不必要的渲染、过大的状态或低效的列表渲染，并提供如使用useMemo、useCallback、虚拟滚动等具体优化建议。或者
对AI说：‘我想把这段类组件改成函数组件，并使用Hooks管理状态，请帮我重构。’ 它会根据你的代码逻辑，生成对应的函数组件代码，并合理运用useState、useEffect等Hook。
介绍
本Skill专为解决React应用开发中的各类核心问题而设计。无论是编写新组件、重构旧代码，还是处理棘手的性能与状态管理难题，它都能提供精准的指导和解决方案。
它通过分析你的代码、理解你的问题描述，来帮助你选择合适的状态管理方案（如useState、Context、Zustand等），诊断组件过度渲染、无限循环、状态陈旧或更新不及时等常见Bug，并解决诸如水合不匹配、Hook顺序错误、Effect重复执行、请求竞态等深层问题。
该Skill非常适合正在编写或维护React应用的前端开发者、全栈工程师，尤其是那些需要应对复杂组件逻辑、性能优化、TypeScript类型定义以及希望采用React 19、Server Actions、React Compiler等新特性的开发者。
使用建议：在遇到具体React编码或调试问题时，请尽可能清晰地描述你的代码结构、错误信息和期望行为。注意，它专注于React核心库，不适用于React Native移动开发或Next.js框架的路由与部署问题，相关需求请使用对应的专用Skill。
核心特点
专注于React核心库的深度开发与调试，覆盖从基础Hook使用到高级特性（如Server Components、React Compiler）的全链路问题诊断，并能审查AI生成的React代码质量。
注意事项
不适用于React Native移动应用开发或Next.js框架的路由、部署等框架特定问题。
常见问题
能帮我解决React组件无限重新渲染的问题吗？
可以，请提供相关组件代码和状态更新逻辑，我会帮你分析依赖项和渲染原因。
这个Skill支持React 19的新特性吗？
支持，包括对Server Actions、React Compiler等新特性的使用指导和问题排查。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/react-x-8/raw/index.md 读取 React 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/react-x-8/raw/index.md（查看排版版本）