本地状态和全局状态有什么区别？

Question

本地状态和全局状态有什么区别？

Accepted Answer

**本地状态**属于单个组件（或小型子树），其他地方不需要。**全局状态**在整个应用中的许多通常相距较远的组件间共享。

## 本地状态 — 限定于单个组件

```jsx
function SearchBox() {
  const [query, setQuery] = useState(""); // only THIS component needs `query`
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}
```

本地状态存在于组件内部（`useState`、`ref`、`data()`）。例如：输入值、下拉菜单是否打开、悬停状态、表单草稿。其他组件不需要关心它。

## 全局状态 — 应用范围内共享

```jsx
// the logged-in user is needed by the navbar, profile page, settings, checkout...
const user = useUserStore(s => s.user); // from a global store/context
```

全局状态是许多不相关的组件必须一致读取或更新的数据：已认证用户、主题、购物车、应用范围的通知。它存在于 Context、store (Redux/Zustand/Pinia) 或类似的地方。

## 如何决策

```text
Ask: "How many components need this, and how far apart are they?"

One component (or parent+child)         → LOCAL state
Many unrelated components / whole app    → GLOBAL state
```

## 常见误区：过度全局化

```jsx
// ❌ putting a single form's input in global state — unnecessary complexity
globalStore.setFormInput(value);

// ✅ keep it local — only this form uses it
const [value, setValue] = useState("");
```

将所有内容都设为全局会增加样板代码、耦合组件，并可能损害性能（更多重新渲染）。最佳实践是**尽可能保持状态本地化**，只有在共享真正需要时才将其提升为全局。

## 为什么这很重要

选择本地状态还是全局状态是最重要的状态决策之一。

保持状态本地化能让组件更简洁、自成一体且高效；只在数据真正共享时才使用全局状态，可以避免不必要的复杂性。

常见的反模式 — 将一切都放在全局 store 中