第51节——Flux 架构

一、概念

Flux 是一种由 Facebook 提出的前端应用程序架构，旨在解决传统的 MVC（Model-View-Controller）架构在复杂应用场景下出现的一系列问题。Flux 基于单向数据流的思想，将应用程序拆分为四个主要组件：Action、Dispatcher、Store 和 View。

二、四个主要组件

1、Action（动作）

Action 是一个简单的对象，描述了用户与应用程序交互的事件。例如，用户点击按钮或者输入文本时，都会生成一个 Action。Action 通常包含两个属性：type 和 payload。type 描述了 Action 的类型，payload 描述了传递给 Action 的数据

2、Dispatcher（派发器）

Dispatcher 是 Flux 架构中的中心组件，用于将 Action 分发给 Store。Dispatcher 本质上是一个事件系统，它接收到 Action 后，根据 Action 的类型，将 Action 分发给相应的 Store。多个 Store 可以注册到同一个 Dispatcher 上，但是一个 Action 只能被一个 Store 处理

3、Store（存储器）

Store 是 Flux 架构中用于存储数据和状态的组件。Store 通常表示为一个单例对象，它包含了应用程序的全部状态和数据。当 Dispatcher 分发 Action 时，Store 根据 Action 的类型更新自己的状态和数据，并且向 View 发送变更通知。由于 Store 中的状态是只读的，因此不同的 Store 之间不会相互影响。

4、View（视图）

View 是 Flux 架构中用于呈现 UI 的组件。View 从 Store 中获取数据和状态，并且在状态变化时重新渲染自己。当用户与 View 交互时，View 发送 Action 到 Dispatcher，并触发应用程序的更新流程

三、在复杂应用场景下，MVC 架构可能会出现什么问题

1、状态和数据流不清晰

MVC 中的状态和数据流可能会变得非常复杂和难以理解，因为状态可能会在 Model、View 和 Controller 之间相互传递，从而导致数据流的不清晰。

2、双向数据绑定问题

MVC 中的 View 和 Model 可能会出现双向数据绑定的情况，这会导致状态变得不可预测，因为状态可能会在多个地方被更新。

控制器逻辑过于复杂

在 MVC 中，控制器通常承担了处理用户输入和控制数据流的任务，当应用程序变得复杂时，控制器的逻辑可能会变得非常复杂和难以维护。

Model 和 View 之间的耦合性高

在 MVC 中，Model 和 View 之间的耦合性很高，因为它们之间可能会存在依赖关系。这使得对 Model 或 View 的修改可能会影响到应用程序的其他部分

四、总结

Flux 架构的最大优点是将应用程序拆分为单向数据流，使得应用程序的数据流非常清晰，易于理解和调试。Flux 适合于大型、复杂的 Web 应用程序，可以帮助开发者编写出更可靠、易于测试和扩展的代码。同时，Flux 也为开发者提供了一种基于事件驱动的开发模式，使得应用程序的逻辑更加清晰和易于维护