React Flux 概念

Flux 是一种应用程序架构，Facebook 在内部使用它来构建带有 React 的客户端 Web 应用程序。它既不是一个库，也不是一个框架。它是一种架构，它补充了 React 作为视图，并遵循单向数据流模型的概念。当项目具有动态数据，并且我们需要以有效的方式保持数据更新时，它非常有用。它可以减少运行时错误。

Flux 应用程序在处理数据时有三个主要角色

1. 调度器
2. 存储
3. 视图（React 组件）

在这里，您不应与 Model-View-Controller (MVC) 模型混淆。虽然，控制器都存在，但 Flux 控制器视图（视图）位于层次结构的顶部。 它从存储中检索数据，然后将数据传递给其子级。 此外，操作创建者 - 调度程序帮助程序方法用于描述应用程序中所有可能的变化。 它可以作为 Flux 更新周期的第四部分很有用。

结构和数据流

在 Flux 应用程序中，数据沿单一方向流动（单向）。 此数据流是 Flux 模式的核心。 调度程序、存储和视图是具有输入和输出的独立节点。 这些操作是包含新数据和类型属性的简单对象。 现在，让我们逐一看看 Flux 架构的各个组件。

调度器

它是 React Flux 应用程序的中心枢纽，并管理 Flux 应用程序的所有数据流。 它是存储的回调注册表。 它本身没有真正的智能，只是充当将操作分发到存储的机制。 所有存储都注册自己并提供回调。 它是一个处理所有修改存储的事件的地方。 当操作创建者向调度程序提供新操作时，所有存储都会通过注册表中的回调接收该操作。

调度程序的 API 有五个方法。 这些是

存储

它主要包含应用程序状态和逻辑。 它类似于传统 MVC 中的模型。 它用于维护应用程序中的特定状态，根据操作更新自身，并发出更改事件以提醒控制器视图。

视图

它也称为控制器视图。 它位于链的顶部，用于存储生成操作和从存储接收新数据的逻辑。 它是一个 React 组件，监听更改事件并从存储接收数据并重新渲染应用程序。

具体操作

调度程序方法允许我们触发到存储的调度，并包含数据有效负载，我们称之为操作。 它是操作创建者或帮助程序方法，用于将数据传递给调度程序。

Flux 的优势

• 它是一种单向数据流模型，易于理解。
• 它是开源的，更像是一种设计模式，而不是像 MVC 架构这样的正式框架。
• Flux 应用程序更易于维护。
• Flux 应用程序的各个部分是解耦的。