何时使用全局状态与本地状态
应用就近放置原则：让状态尽可能靠近其使用者，仅在多个无关组件都需要状态时提升状态。
何时使用全局状态与本地状态 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
状态应该放在哪里
每一部分状态都有最合适的位置。选择错误的位置会导致属性逐层传递的痛苦，或不必要的全局状态复杂性。指导原则是：让状态尽可能靠近其使用者。
组件本地状态
如果只有一个组件使用某个状态，就应将它放在该组件的 useState/ref 中。不需要共享——将它保留在本地。这是最简单、最常见的情况。
// Good: UI state local to the component
function Accordion() {
const [isOpen, setIsOpen] = useState(false); // only this component cares
return (
<div>
<button onClick={() => setIsOpen(o => !o)}>Toggle</button>
{isOpen && <div>Content</div>}
</div>
);
}提升状态
当两个兄弟组件需要相同的状态时，应将它提升到它们最近的共同祖先组件中。通过属性和回调函数向下传递。这是在使用全局存储之前，React/Vue 中的标准做法。
共享上下文——中等范围共享
当需要在一个子树中共享状态，又不想逐层传递属性时，上下文（React）或 provide/inject（Vue）是合适的工具。它适用于中等范围的共享（例如一个页面或一个功能模块）。
全局存储——应用范围状态
对于满足以下条件的状态，请使用全局存储（Redux、Zustand、Pinia）：1）由许多互不相关的组件访问；2）需要在导航过程中保留；3）具有复杂的更新逻辑；4）可以从 DevTools 检查中受益。
示例：本地状态
以下情况适合使用本地状态：表单字段值、工具提示的打开/关闭状态、模态框可见性、悬停状态、动画状态，以及仅属于一个组件的加载指示器。
示例：提升的状态
以下情况适合提升状态：两个兄弟列表共享的筛选条件、选项卡组中选中的选项卡，以及两个步骤之间共享的表单数据。
示例：上下文/提供
以下情况适合使用上下文：当前主题、已认证用户、区域设置/语言、功能开关、通知堆栈——这些内容会在许多层级被使用，但更新并不频繁。
示例：全局存储
以下情况适合使用全局存储：购物车、身份验证令牌和用户对象、通知队列（消息可以从任何位置显示在提示框中），以及多个视图同时显示的实时数据。
服务端状态与客户端状态
网络数据（从 API 获取的数据）是一类特殊数据：服务端状态。它需要加载/错误处理、缓存和失效处理。React Query / SWR / TanStack Query 负责管理服务端状态，让您的存储可以专注于真正的客户端状态。
常见错误：把所有内容都放入全局存储
不要“以防万一”把所有状态都放入全局存储。本地状态成本更低、更简单，也更容易测试。过度使用全局状态会在本应相互独立的组件之间产生耦合。
决策框架
请依次思考：1）其他组件需要它吗？不需要 → 本地状态。2）相邻的兄弟组件需要它吗？需要 → 提升状态。3）一个组件子树需要它吗？需要 → 上下文/provide。4）许多互不相关的组件需要它，或者它需要通过 DevTools 检查吗？需要 → 全局存储。
快速检查
单个手风琴组件的打开/关闭状态应该存放在哪里？
回顾：状态位置
原则：让状态尽可能靠近使用者。单个组件的状态使用本地 useState/ref。兄弟组件共享状态时进行提升。子树共享状态时使用上下文/provide。应用范围且更新逻辑复杂的状态使用全局存储。服务端状态（API 数据）应放在 React Query/SWR 中，而不是全局存储中。
常见问题解答
「何时使用全局状态与本地状态」课时是免费的吗？
是的 — 「何时使用全局状态与本地状态」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「何时使用全局状态与本地状态」这节课中我会学到什么？
应用就近放置原则：让状态尽可能靠近其使用者，仅在多个无关组件都需要状态时提升状态。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「何时使用全局状态与本地状态」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- Redux Toolkit：createSlice 与 configureStore
- 使用 Zustand 管理轻量级 React 状态
- Pinia for Vue：defineStore 与 storeToRefs
- 何时使用全局状态与本地状态