📘 状态管理概述 状态提升 · 单向数据流

1. 什么是状态

状态 (State) 是应用中随时间变化的数据集合，它决定了组件或页面的呈现与行为。简单来说，状态就是“记忆”——记录用户操作、服务器响应、UI 临时数据等。

在 React/Vue 等框架中，状态驱动视图更新 —— UI = f(state)。

2. 状态管理的必要性

随着应用规模增长，组件间共享数据变得复杂。没有良好的状态管理，会出现以下问题：

• 数据不一致 — 多个副本不同步，导致 UI 错乱。
• 调试困难 — 状态分散，难以追踪变化来源。
• 性能浪费 — 不必要的渲染和重复请求。
• 可维护性低 — 逻辑散落在各个组件，难以重构。

✅ 状态管理提供 单一数据源 (Single Source of Truth)、可预测的更新流程，让应用更健壮。

对比维度	无状态管理	有状态管理
数据流	混乱，多向传递	单向数据流，清晰
调试	console.log 满飞	DevTools 时间旅行
协作	容易冲突	统一规范
扩展性	难以支撑大型应用	模块化，可扩展

3. 前端状态管理发展历程

从原生 DOM 操作到现代响应式架构，状态管理经历了四个关键阶段：

📖 阶段详解

时期	代表方案	核心思想
2006 ~ 2012	jQuery, 原生 JS	直接操作 DOM，状态散落在全局变量或 data-* 属性
2012 ~ 2015	Backbone, Angular 1	MVC 模式，双向绑定，但数据流仍较混乱
2015 ~ 2019	Redux, Vuex, MobX	单向数据流，集中式 Store，纯函数 reducer，可预测
2020 ~ 至今	Recoil, Zustand, Pinia, Jotai	原子化、组合式、细粒度响应，拥抱 hooks 与 Composition API

💡 关键里程碑：单向数据流

2014 年 Facebook 提出 Flux 架构，强调 单向数据流 —— Action → Dispatcher → Store → View。随后 Redux 将其发扬光大，成为前端状态管理的事实标准。

// Redux 单向数据流示例 (纯函数 reducer)
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT': return { count: state.count + 1 };
    case 'DECREMENT': return { count: state.count - 1 };
    default: return state;
  }
}
// 状态提升至 store，组件通过 dispatch 触发更新

如今，状态提升 (Lifting State Up) 与 单向数据流 已成为 React、Vue 等框架的设计哲学，也是本课程的核心。