状态管理(State Management)MOC
本笔记作为前端状态管理知识体系的索引,涵盖 React、Vue 等框架的状态管理方案,以及通用状态管理模式。
学习路径:状态管理通常与前端框架配合使用。学习前需要掌握 React 或 Vue 基础。状态管理的性能优化可参考 性能优化 MOC。
📚 核心概念
学习状态管理的基础理论知识:
- 状态管理基础 — 状态管理的概念、问题和解决方案(理解为什么需要状态管理)
- 单向数据流 — 数据流动的原理和模式(与 React 数据流一致)
- 状态管理选型指南 — 如何选择合适的状态管理方案(根据框架选择)
⚛️ React 生态
前置要求:学习 React 状态管理前,需要掌握 React 基础,了解组件、Props、State 等概念。
Redux 系列
🗺️ 新手必看:Redux + Redux-Saga 完整学习路径 — 系统学习 Redux 和 Redux-Saga 的完整指南
- Redux — Redux 基础概念、原理和最小闭环 Demo(配合 React 使用)
- Redux Toolkit (RTK) — Redux 官方推荐工具集(推荐使用)
- Redux-Saga — 基于 Generator 的副作用管理(需要掌握 JavaScript Generator)
- Redux-Thunk — 简单的异步处理方案
其他 React 状态管理
- MobX — 响应式状态管理
- Recoil — Facebook 的原子化状态管理
- Zustand — 轻量级状态管理
- XState — 状态机管理
- Jotai — 原子化状态管理
- Valtio — 基于 Proxy 的状态管理
💚 Vue 生态
前置要求:学习 Vue 状态管理前,需要掌握 Vue 基础,了解组件、Props、响应式等概念。
Vuex 系列
Pinia 系列
- Pinia — Vue 3 官方推荐的状态管理库(Vue 3 推荐,配合 Vue 使用)
- Pinia 最佳实践 — Pinia 项目实践指南
其他 Vue 状态管理
- Composition API 状态管理 — 使用 Composition API 管理状态
- Vue 状态管理实践 — Vue 项目中的状态管理实践
🔄 通用方案
框架无关的状态管理方案和模式:
🛠 实践与最佳实践
- Redux 最佳实践 — Redux 项目中的最佳实践(配合 React 最佳实践)
- Pinia 最佳实践 — Vue 生态最佳实践(配合 Vue 最佳实践)
- 状态管理测试策略 — 如何测试状态管理逻辑(详见 测试 MOC)
- 状态管理性能优化 — 状态管理的性能优化技巧(详见 性能优化 MOC)
- 状态管理架构设计 — 大型应用的状态管理架构(参考 架构 MOC)
📖 学习资源
React 生态
Vue 生态
📌 扩展说明
添加新的状态管理方案
- React 生态:添加到
02-React生态/目录 - Vue 生态:添加到
03-Vue生态/目录 - 其他框架:创建新目录,如
06-Angular生态/、07-Svelte生态/等 - 通用方案:添加到
04-通用方案/目录
目录命名规范
- 使用
数字-分类的格式,便于排序 - 目录名使用中文,文件名使用中文或英文
- 文件命名:
框架名-功能.md或功能.md