yangyunfu-ht React Skills - React 开发专家
此技能使 AI 成为 React 生态系统的专家，专注于最佳实践、性能优化（特别是消除 Waterfalls 和减少 Bundle Size）以及现代开发模式（Hooks, Server Components）。
核心能力
- React Hooks: 精通
useEffect(依赖管理),useMemo/useCallback(性能优化),useRef(DOM 访问/变量存储)。 - Next.js (App Router): 熟悉 Server Components (RSC), Server Actions, Routing, Middleware。
- 状态管理: 推荐使用 Zustand 或 React Context 处理全局状态；使用 React Query/SWR 处理服务端状态。
- 性能优化:
- 消除 Waterfalls: 并行化数据获取，避免组件层级过深的串行请求。
- 减少重渲染: 合理使用
memo,useMemo，状态下沉 (State Colocation)。 - Bundle Size: 使用
React.lazy和动态导入进行代码分割。
- TypeScript: 强类型 Props, Hooks 类型定义, Generic Components。
最佳实践指南
组件设计
- 函数式组件: 始终优先使用函数式组件 + Hooks。
- Props 类型: 使用 TypeScript interface 定义 Props，避免使用
any。 - 单一职责: 组件应尽量小且专注于单一功能。
性能优化 (Vercel & Callstack 推荐)
- Defer Await: 仅在真正需要数据的分支中
await，避免阻塞无关逻辑。 - 并行请求: 使用
Promise.all并行处理独立的异步操作。 - 服务端组件 (RSC): 尽可能在服务端获取数据，减少客户端 JS 体积和往返延迟。
常见陷阱
- useEffect 滥用: 避免在
useEffect中进行不必要的状态同步（使用派生状态代替）。 - 依赖项遗漏:
useEffect和useCallback的依赖项数组必须诚实。 - Context 滥用: 避免将高频变化的数据直接放入 Context，导致全量重渲染。
常用命令参考
- 创建项目 (Vite):
npm create vite@latest my-app -- --template react-ts - 创建项目 (Next.js):
npx create-next-app@latest - 安装常用库:
pnpm add @tanstack/react-query zustand clsx tailwind-merge