Flux 是由 Facebook 提出的一种前端应用架构思想,主要用于管理 单向数据流,尤其是在 React 应用中。它并不是一个库,而是一种设计模式,核心理念可以总结如下:
1. 核心思想
单向数据流(Unidirectional Data Flow):数据沿着一个方向流动,避免了双向绑定带来的复杂状态管理问题。
流程可以概括为:
Action → Dispatcher → Store → View (React Component)
2. 核心概念
Action(动作)
-
描述“发生了什么”,通常是一个对象,包含 type 和相关数据。
-
例如:用户点击按钮触发 ADD_TODO 的 Action。
Dispatcher(分发器)
-
接收 Action 并分发给注册的 Store。
-
是 Flux 中的中央枢纽,确保所有 Store 能同步收到 Action。
Store(状态存储)
-
保存应用的状态和业务逻辑,类似于 MVC 的 Model,但不会直接修改 View。
-
当 Store 里的状态变化时,会通知 View 更新。
View(视图)
-
React 组件,根据 Store 的状态渲染界面。
-
用户操作触发新的 Action,从而再次更新 Store。
3. 特点
-
单向数据流:减少复杂的状态同步问题。
-
集中管理状态:每个 Store 负责特定部分状态,便于维护。
-
可预测性强:状态变化都由 Action 驱动,易于调试。
简单类比:
-
Action → 命令
-
Dispatcher → 指挥官
-
Store → 仓库(存状态)
-
View → 展示给用户的界面