你如何决定状态的每一部分应该存放在哪里？

Question

Accepted Answer

决定**状态存放在哪里**是最重要的架构技能之一。指导原则：将每一部分状态放在**最小范围**内，该范围仍能满足所有需要它的人——并将每*种*状态与正确的工具相匹配。

## 决策框架

```text
1. Who needs this state?
   - One component                  → local state (useState)
   - A few related components        → lift to common parent / small context
   - Many distant components         → global store or context

2. What KIND of state is it?
   - Server/remote data              → server-state library (React Query/SWR)
   - UI/client state                 → useState / Zustand / Redux
   - URL-derivable (filters, page)    → the URL (searchParams)
   - Form input                       → form library or local state

3. How OFTEN does it change?
   - Rarely, widely shared (theme)    → Context is fine
   - Frequently, widely shared        → store with selective subscriptions
```

## 类别及其位置

```text
State type     Lives in                       Examples
─────────────────────────────────────────────────────────────────
Local UI       component (useState)           input text, isOpen, hover
Shared UI      lifted parent / Context / store modal state, selected item
Server data    React Query / SWR / RTK Query  users, products (cached remote)
URL state      router / searchParams          filters, page, search query, tab
Form state     React Hook Form / local         field values, validation
Global app     Zustand / Redux / Context      auth user, theme, cart
```

## 该框架防止的常见错误

```text
❌ Server data in Redux       → use React Query (it's a cache, not UI state)
❌ Everything global "just in case" → over-coupling, extra re-renders; keep local
❌ Filters/page in state       → put in the URL (shareable, bookmarkable, back-button)
❌ Duplicating derivable values → derive instead (single source of truth)
❌ Form state in a global store → usually overkill; keep local or use a form lib
```

## URL 是未充分利用的状态

```text
Filters, pagination, search, active tab → belong in the URL.
Benefits: shareable links, browser back/forward works, survives refresh, SEO.
```

## 为什么这很重要

状态存放的位置决定了应用的简洁性、性能和可维护性。

这项技能在于抵抗将所有内容设为全局的冲动，转而**默认本地化，将每种状态与其适当的工具相匹配**（服务器数据 → React Query、URL 可推导 → URL、UI → local/store）。

正确处理这一问题可以避免最常见的架构问题——塞入 Redux 的服务器数据、导致重新渲染的过度全局化状态，以及组件状态中的过滤器。

这种判断力正是将清洁、可扩展的状态架构与混乱的架构区分开来的关键。