react-specialist

React 专家

用途

提供专业的 React 开发能力，专注于 React 18+、Next.js 生态系统和现代 React 模式。使用 hooks、并发特性、Zustand 等状态管理方案，以及 TanStack Query 数据获取功能，构建高性能、可扩展的 React 应用。

使用场景

• 使用现代模式（React 18+）构建 React 应用
• 使用 Next.js 实现 Server Components 和 SSR
• 使用 Zustand、TanStack Query 或其他方案管理状态
• 优化 React 性能和渲染
• 创建可复用的组件库和 hooks
• 使用 TypeScript，确保全面的类型安全

快速开始

在以下情况下调用此技能：

• 使用现代模式（React 18+）构建 React 应用
• 使用 Next.js 实现 Server Components 和 SSR
• 使用 Zustand、TanStack Query 或其他方案管理状态
• 优化 React 性能和渲染
• 创建可复用的组件库和 hooks

以下情况下不要调用：

• 需要纯服务端逻辑（请改用 backend-developer）
• 简单的静态 HTML/CSS 页面（无需 React）
• 仅面向移动端的开发（请改用使用 React Native 的 mobile-developer）
• 不涉及前端的 Node.js API 开发（请改用 backend-developer）

核心能力

React 18+ 高级特性

• 并发渲染：精通 Suspense、useTransition 和 useDeferredValue
• 自动批处理：理解并利用自动批处理的改进
• Server Components：Next.js App Router 和 React Server Components 模式
• Client Components：策略性使用 'use client' 指令和 hydration 策略
• StartTransition：通过非紧急状态更改优化 UI 更新
• 流式 SSR：使用 React 18 流式渲染实现渐进式渲染

现代 React 模式

• 自定义 Hooks：构建可复用、可组合的 hook 逻辑
• 复合组件：高级组件组合模式
• Render Props：高级 render prop 模式和函数作为子组件
• 高阶组件：用于横切关注点的现代 HOC 模式
• Context API：通过性能优化高效使用 context
• 错误边界：高级错误处理和恢复策略

状态管理方案

• Zustand：轻量级状态管理，集成 TypeScript
• TanStack Query：服务端状态管理，支持缓存、重新获取和乐观更新
• Jotai：具备细粒度响应性的原子化状态管理
• Valtio：基于代理的状态管理，支持响应式更新
• React Query：数据获取、缓存和同步
• 本地状态：策略性地决定使用本地状态还是全局状态

决策框架

主要决策树：状态管理方案选择

从这里开始： 状态属于什么类型？

├─ Server state (API data)?
│   ├─ Use TanStack Query (React Query)
│   │   Pros: Caching, auto-refetching, optimistic updates
│   │   Cost: 13KB gzipped
│   │   Use when: Fetching data from APIs
│   │
│   └─ Or SWR (Vercel)
│       Pros: Lighter (4KB), similar features
│       Cons: Less feature-complete than React Query
│       Use when: Bundle size critical
│
├─ Client state (UI state)?
│   ├─ Simple (1-2 components) → useState/useReducer
│   │   Pros: Built-in, no dependencies
│   │   Cons: Prop drilling for deep trees
│   │
│   ├─ Global (app-wide) → Zustand
│   │   Pros: Simple API, 1KB, no boilerplate
│   │   Cons: No time-travel debugging
│   │   Use when: Simple global state needs
│   │
│   ├─ Complex (nested, computed) → Jotai or Valtio
│   │   Jotai: Atomic state (like Recoil but lighter)
│   │   Valtio: Proxy-based (mutable-looking API)
│   │
│   └─ Enterprise (DevTools, middleware) → Redux Toolkit
│       Pros: DevTools, middleware, established patterns
│       Cons: Verbose, 40KB+ with middleware
│       Use when: Need audit log, time-travel debugging
│
└─ Form state?
    ├─ Simple (<5 fields) → useState + validation
    ├─ Complex → React Hook Form
    │   Pros: Performance (uncontrolled), 25KB
    │   Cons: Learning curve
    │
    └─ With schema validation → React Hook Form + Zod
        Full type safety + runtime validation

性能优化决策矩阵

问题	症状	解决方案	预期改进
初始加载缓慢	FCP >2s，LCP >2.5s	代码拆分（React.lazy）	快 40-60%
重复渲染过多	组件每秒渲染 10+ 次	React.memo，useMemo	减少 80%+
打包体积过大	JS 包 >500KB	Tree shaking，动态导入	缩小 30-50%
列表渲染缓慢	列表超过 1000 项时卡顿	react-window/react-virtualized	快 90%+
计算开销大	交互时 CPU 占用飙升	useMemo，web workers	快 50-70%
属性层层传递	属性传递超过 5 层	Context API 或状态库	代码更简洁

组件模式选择

用例	模式	复杂度	灵活性	示例
简单 UI	Props + children	低	低	<Button>Click</Button>
配置	Props 对象	低	中	<Button config={{...}} />
复杂组合	复合组件	中	高	<Tabs><Tab /></Tabs>
渲染灵活性	渲染 Props	中	非常高	<List render={...} />
无头 UI	自定义钩子	高	最高	useSelect()
多态	as prop	中	高	<Text as="h1" />

危险信号 → 升级给资深 React 开发者

如果遇到以下情况，请停止并升级处理：

• 需要服务器端渲染（使用 Next.js，而不是纯 React）
• 性能要求为渲染时间 <16ms（60 FPS 动画）
• 考虑自定义虚拟 DOM 实现（几乎总是错误的做法）
• 组件树深度 >20 层（架构问题）
• 需要跨浏览器标签页同步状态（复杂模式）

最佳实践

组件设计

• 单一职责：每个组件都应有一个明确的用途
• 组合优于继承：使用组合实现可复用性
• Props 接口：设计清晰、类型明确的组件 API
• 无障碍性：从一开始就实现 WCAG 合规性
• 错误边界：在组件边界妥善处理错误

状态管理

• 状态就近放置：尽可能让状态靠近其使用位置
• 关注点分离：区分服务器状态和客户端状态
• 乐观更新：通过乐观更新提升感知性能
• 缓存策略：实施智能缓存，改善用户体验
• 状态规范化：对复杂数据结构使用规范化状态

性能模式

• 记忆化：有策略地使用 React.memo、useMemo 和 useCallback
• 代码拆分：为大型组件实现动态导入
• 虚拟化：对长列表使用 react-window 或 react-virtualized
• 图像优化：实现延迟加载和响应式图像
• 包分析：定期分析并优化包大小

测试策略

• 组件测试：使用 React Testing Library 独立测试组件
• 集成测试：测试组件交互和数据流
• 端到端测试：使用 Playwright 或 Cypress 测试用户流程
• 视觉回归：使用 Chromatic 等工具捕获 UI 变化
• 性能测试：监控并测试组件性能

集成模式

react-specialist ↔ typescript-pro

• 交接：TypeScript 类型 → 带类型安全 Props 的 React 组件
• 协作：共享 API 数据和组件 Props 类型
• 依赖关系：React 能从 TypeScript 中获益良多

react-specialist ↔ nextjs-developer

• 交接：React 组件 → Next.js 页面/布局
• 协作：区分服务端组件和客户端组件
• 工具：React 用于 UI，Next.js 用于路由/SSR

react-specialist ↔ frontend-ui-ux-engineer

• 交接：React 负责逻辑 → Frontend-UI-UX 负责样式
• 协作：组件 API、设计系统集成
• 共同职责：无障碍性、响应式设计

其他资源

• 详细技术参考：参见 REFERENCE.md
• 代码示例与模式：参见 EXAMPLES.md