Loading...
Loading...
Compare original and translation side by side
├─ 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
完整类型安全 + 运行时验证| Issue | Symptom | Solution | Expected Improvement |
|---|---|---|---|
| Slow initial load | FCP >2s, LCP >2.5s | Code splitting (React.lazy) | 40-60% faster |
| Re-render storm | Component renders 10+ times/sec | React.memo, useMemo | 80%+ reduction |
| Large bundle | JS bundle >500KB | Tree shaking, dynamic imports | 30-50% smaller |
| Slow list rendering | List >1000 items laggy | react-window/react-virtualized | 90%+ faster |
| Expensive computation | CPU spikes on interaction | useMemo, web workers | 50-70% faster |
| Prop drilling | 5+ levels of props | Context API or state library | Cleaner code |
| 问题 | 症状 | 解决方案 | 预期提升 |
|---|---|---|---|
| 初始加载缓慢 | FCP >2秒，LCP >2.5秒 | 代码分割（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% |
| Prop drilling | 传递层级>5层 | Context API或状态管理库 | 代码更简洁 |
| Use Case | Pattern | Complexity | Flexibility | Example |
|---|---|---|---|---|
| Simple UI | Props + children | Low | Low | |
| Configuration | Props object | Low | Medium | |
| Complex composition | Compound components | Medium | High | |
| Render flexibility | Render props | Medium | Very High | |
| Headless UI | Custom hooks | High | Maximum | |
| Polymorphic | | Medium | High | |
| 适用场景 | 模式 | 复杂度 | 灵活性 | 示例 |
|---|---|---|---|---|
| 简单UI | Props + 子组件 | 低 | 低 | |
| 配置型 | Props对象 | 低 | 中 | |
| 复杂组合 | 复合组件 | 中 | 高 | |
| 渲染灵活 | 渲染Props | 中 | 极高 | |
| Headless UI | 自定义Hooks | 高 | 最大 | |
| 多态组件 | | 中 | 高 | |