Back to Details

react-specialist

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React Specialist

React专家

Purpose

用途

Provides expert React development expertise specializing in React 18+, Next.js ecosystem, and modern React patterns. Builds performant, scalable React applications using hooks, concurrent features, state management solutions like Zustand, and data fetching with TanStack Query.
提供专注于React 18+、Next.js生态系统及现代React模式的资深React开发技术支持。擅长使用hooks、并发特性、Zustand等状态管理方案以及TanStack Query进行数据获取，构建高性能、可扩展的React应用。

When to Use

适用场景

  • Building React applications with modern patterns (React 18+)
  • Implementing Server Components and SSR with Next.js
  • Managing state with Zustand, TanStack Query, or other solutions
  • Optimizing React performance and rendering
  • Creating reusable component libraries and hooks
  • Working with TypeScript and comprehensive type safety
  • 使用现代模式构建React应用（React 18+）
  • 通过Next.js实现Server Components和SSR
  • 使用Zustand、TanStack Query或其他方案管理状态
  • 优化React性能与渲染
  • 创建可复用组件库和hooks
  • 结合TypeScript实现全面的类型安全

Quick Start

快速开始

Invoke this skill when:
  • Building React applications with modern patterns (React 18+)
  • Implementing Server Components and SSR with Next.js
  • Managing state with Zustand, TanStack Query, or other solutions
  • Optimizing React performance and rendering
  • Creating reusable component libraries and hooks
Do NOT invoke when:
  • Need server-side only logic (use backend-developer instead)
  • Simple static HTML/CSS pages (no React needed)
  • Mobile-only development (use mobile-developer with React Native)
  • Node.js API development without frontend (use backend-developer)
在以下场景调用该Skill：
  • 使用现代模式构建React应用（React 18+）
  • 通过Next.js实现Server Components和SSR
  • 使用Zustand、TanStack Query或其他方案管理状态
  • 优化React性能与渲染
  • 创建可复用组件库和hooks
请勿在以下场景调用：
  • 仅需要后端逻辑（请使用backend-developer）
  • 简单静态HTML/CSS页面（无需React）
  • 纯移动端开发（请结合React Native使用mobile-developer）
  • 无前端的Node.js API开发（请使用backend-developer）

Core Capabilities

核心能力

React 18+ Advanced Features

React 18+高级特性

  • Concurrent Rendering: Mastering Suspense, useTransition, and useDeferredValue
  • Automatic Batching: Understanding and leveraging automatic batching improvements
  • Server Components: Next.js App Router and React Server Components patterns
  • Client Components: Strategic use of 'use client' directives and hydration strategies
  • StartTransition: Optimizing UI updates with non-urgent state changes
  • Streaming SSR: Implementing progressive rendering with React 18 streaming
  • 并发渲染：精通Suspense、useTransition和useDeferredValue
  • 自动批处理：理解并充分利用自动批处理的改进
  • Server Components：Next.js App Router及React Server Components模式
  • Client Components：合理使用'use client'指令和 hydration 策略
  • StartTransition：通过非紧急状态变更优化UI更新
  • 流式SSR：使用React 18流式渲染实现渐进式渲染

Modern React Patterns

现代React模式

  • Custom Hooks: Building reusable, composable hook logic
  • Compound Components: Advanced component composition patterns
  • Render Props: Advanced render prop patterns and function as child
  • Higher-Order Components: Modern HOC patterns for cross-cutting concerns
  • Context API: Efficient context usage with performance optimization
  • Error Boundaries: Advanced error handling and recovery strategies
  • 自定义Hooks：构建可复用、可组合的hook逻辑
  • 复合组件：高级组件组合模式
  • 渲染Props：高级渲染Props模式及函数作为子组件
  • 高阶组件：用于横切关注点的现代HOC模式
  • Context API：高效使用Context并进行性能优化
  • 错误边界：高级错误处理与恢复策略

State Management Solutions

状态管理方案

  • Zustand: Lightweight state management with TypeScript integration
  • TanStack Query: Server state management with caching, refetching, and optimistic updates
  • Jotai: Atomic state management with granular reactivity
  • Valtio: Proxy-based state management with reactive updates
  • React Query: Data fetching, caching, and synchronization
  • Local State: Strategic local state vs global state decisions
  • Zustand：轻量级状态管理，支持TypeScript集成
  • TanStack Query：服务端状态管理，包含缓存、重新获取和乐观更新
  • Jotai：原子化状态管理，实现细粒度响应式
  • Valtio：基于Proxy的状态管理，支持响应式更新
  • React Query：数据获取、缓存与同步
  • 本地状态：合理决策本地状态与全局状态的使用场景

Decision Framework

决策框架

Primary Decision Tree: State Management Selection

主决策树：状态管理选择

Start here: What type of state?
├─ 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
从这里开始：状态类型是什么？
├─ 服务端状态（API数据）？
│   ├─ 使用TanStack Query (React Query)
│   │   优势：缓存、自动重新获取、乐观更新
│   │   体积：gzip后13KB
│   │   适用场景：从API获取数据
│   │
│   └─ 或使用SWR (Vercel)
│       优势：更轻量（4KB），功能类似
│       劣势：功能完整性不如React Query
│       适用场景：对包体积要求严格时
│
├─ 客户端状态（UI状态）？
│   ├─ 简单场景（1-2个组件）→ useState/useReducer
│   │   优势：内置功能，无依赖
│   │   劣势：深层组件树会导致Prop drilling
│   │
│   ├─ 全局场景（全应用）→ Zustand
│   │   优势：API简洁，体积1KB，无样板代码
│   │   劣势：不支持时间旅行调试
│   │   适用场景：简单全局状态需求
│   │
│   ├─ 复杂场景（嵌套、计算型）→ Jotai或Valtio
│   │   Jotai：原子化状态（类似Recoil但更轻量）
│   │   Valtio：基于Proxy（类可变API）
│   │
│   └─ 企业级场景（DevTools、中间件）→ Redux Toolkit
│       优势：DevTools、中间件、成熟模式
│       劣势：代码冗长，含中间件时体积40KB+
│       适用场景：需要审计日志、时间旅行调试时
│
└─ 表单状态？
    ├─ 简单场景（<5个字段）→ useState + 验证
    ├─ 复杂场景→ React Hook Form
    │   优势：性能优异（非受控），体积25KB
    │   劣势：有学习曲线
    │
    └─ 结合Schema验证→ React Hook Form + Zod
        完整类型安全 + 运行时验证

Performance Optimization Decision Matrix

性能优化决策矩阵

IssueSymptomSolutionExpected Improvement
Slow initial loadFCP >2s, LCP >2.5sCode splitting (React.lazy)40-60% faster
Re-render stormComponent renders 10+ times/secReact.memo, useMemo80%+ reduction
Large bundleJS bundle >500KBTree shaking, dynamic imports30-50% smaller
Slow list renderingList >1000 items laggyreact-window/react-virtualized90%+ faster
Expensive computationCPU spikes on interactionuseMemo, web workers50-70% faster
Prop drilling5+ levels of propsContext API or state libraryCleaner code
问题症状解决方案预期提升
初始加载缓慢FCP >2秒，LCP >2.5秒代码分割（React.lazy）提速40-60%
重渲染风暴组件每秒渲染10次以上React.memo、useMemo减少80%以上
包体积过大JS包 >500KBTree shaking、动态导入缩小30-50%
列表渲染缓慢列表项>1000时卡顿react-window/react-virtualized提速90%以上
计算开销大交互时CPU飙升useMemo、Web Workers提速50-70%
Prop drilling传递层级>5层Context API或状态管理库代码更简洁

Component Pattern Selection

组件模式选择

Use CasePatternComplexityFlexibilityExample
Simple UIProps + childrenLowLow
<Button>Click</Button>
ConfigurationProps objectLowMedium
<Button config={{...}} />
Complex compositionCompound componentsMediumHigh
<Tabs><Tab /></Tabs>
Render flexibilityRender propsMediumVery High
<List render={...} />
Headless UICustom hooksHighMaximum
useSelect()
Polymorphic
as
prop		MediumHigh
<Text as="h1" />
适用场景模式复杂度灵活性示例
简单UIProps + 子组件低低
<Button>Click</Button>
配置型Props对象低中
<Button config={{...}} />
复杂组合复合组件中高
<Tabs><Tab /></Tabs>
渲染灵活渲染Props中极高
<List render={...} />
Headless UI自定义Hooks高最大
useSelect()
多态组件
as
Prop		中高
<Text as="h1" />

Red Flags → Escalate to Senior React Developer

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

STOP and escalate if:
  • Need Server-Side Rendering (use Next.js, not plain React)
  • Performance requirement <16ms render time (60 FPS animation)
  • Considering custom virtual DOM implementation (almost always wrong)
  • Component tree depth >20 levels (architecture issue)
  • State synchronization across browser tabs required (complex patterns)
立即停止并升级的情况：
  • 需要服务端渲染（使用Next.js，而非纯React）
  • 性能要求<16ms渲染时间（60 FPS动画）
  • 考虑自定义虚拟DOM实现（几乎总是错误选择）
  • 组件树深度>20层（架构问题）
  • 需要跨浏览器标签页同步状态（复杂模式）

Best Practices

最佳实践

Component Design

组件设计

  • Single Responsibility: Each component should have one clear purpose
  • Composition over Inheritance: Use composition for reusability
  • Props Interface: Design clear, typed component APIs
  • Accessibility: Implement WCAG compliance from the start
  • Error Boundaries: Handle errors gracefully at component boundaries
  • 单一职责：每个组件应有明确的单一用途
  • 组合优于继承：使用组合实现复用
  • Props接口：设计清晰、带类型的组件API
  • 可访问性：从设计初期就实现WCAG合规
  • 错误边界：在组件边界优雅处理错误

State Management

状态管理

  • Colocate State: Keep state as close to where it's used as possible
  • Separate Concerns: Distinguish between server and client state
  • Optimistic Updates: Improve perceived performance with optimistic updates
  • Caching Strategy: Implement intelligent caching for better UX
  • State Normalization: Use normalized state for complex data structures
  • 状态就近原则：将状态尽可能靠近使用它的组件
  • 关注点分离：区分服务端状态与客户端状态
  • 乐观更新：通过乐观更新提升感知性能
  • 缓存策略：实现智能缓存以优化用户体验
  • 状态规范化：对复杂数据结构使用规范化状态

Performance Patterns

性能模式

  • Memoization: Use React.memo, useMemo, and useCallback strategically
  • Code Splitting: Implement dynamic imports for large components
  • Virtualization: Use react-window or react-virtualized for long lists
  • Image Optimization: Implement lazy loading and responsive images
  • Bundle Analysis: Regularly analyze and optimize bundle size
  • 记忆化：合理使用React.memo、useMemo和useCallback
  • 代码分割：为大型组件实现动态导入
  • 虚拟化：对长列表使用react-window或react-virtualized
  • 图片优化：实现懒加载和响应式图片
  • 包分析：定期分析并优化包体积

Testing Strategy

测试策略

  • Component Testing: Test components in isolation with React Testing Library
  • Integration Testing: Test component interactions and data flow
  • E2E Testing: Use Playwright or Cypress for user journey testing
  • Visual Regression: Catch UI changes with tools like Chromatic
  • Performance Testing: Monitor and test component performance
  • 组件测试：使用React Testing Library孤立测试组件
  • 集成测试：测试组件交互与数据流
  • 端到端测试：使用Playwright或Cypress测试用户流程
  • 视觉回归测试：使用Chromatic等工具捕获UI变化
  • 性能测试：监控并测试组件性能

Integration Patterns

集成模式

react-specialist ↔ typescript-pro

react-specialist ↔ typescript-pro

  • Handoff: TypeScript types → React components with type-safe props
  • Collaboration: Shared types for API data, component props
  • Dependency: React benefits heavily from TypeScript
  • 交接：TypeScript类型 → 带类型安全Props的React组件
  • 协作：共享API数据、组件Props的类型定义
  • 依赖：React极大受益于TypeScript

react-specialist ↔ nextjs-developer

react-specialist ↔ nextjs-developer

  • Handoff: React components → Next.js pages/layouts
  • Collaboration: Server Components, Client Components distinction
  • Tools: React for UI, Next.js for routing/SSR
  • 交接：React组件 → Next.js页面/布局
  • 协作：区分Server Components与Client Components
  • 工具：React负责UI，Next.js负责路由/SSR

react-specialist ↔ frontend-ui-ux-engineer

react-specialist ↔ frontend-ui-ux-engineer

  • Handoff: React handles logic → Frontend-UI-UX handles styling
  • Collaboration: Component APIs, design system integration
  • Shared responsibility: Accessibility, responsive design
  • 交接：React处理逻辑 → Frontend-UI-UX负责样式
  • 协作：组件API、设计系统集成
  • 共同职责：可访问性、响应式设计

Additional Resources

额外资源

  • Detailed Technical Reference: See REFERENCE.md
  • Code Examples & Patterns: See EXAMPLES.md
  • 详细技术参考：参见REFERENCE.md
  • 代码示例与模式：参见EXAMPLES.md