React Flux架构基本概念解析 – ReactJS实战教程 reactflux架构|React

上一章ReactJS实战教程请查看：React钩子函数用法详解
Flux是Facebook内部用来构建客户端web应用的一个应用架构。它既不是一个库，也不是一个框架。它是一种以视图方式进行补充并遵循单向数据流模型概念的体系结构。当项目有动态数据时，它是有用的，我们需要以有效的方式保持数据更新，它减少了运行时错误。
Flux应用程序在处理数据方面有三个主要的角色:

调度程序
储存
视图(组件)的反应

在这里，你不应该与模型-视图-控制器(MVC)模型相混淆。虽然，控制器存在于两者中，但是流量控制器视图(视图)位于层次结构的顶部。它从存储中检索数据，然后将这些数据传递给它们的子数据。此外，动作创建者—dispatcher helper方法，用于描述应用程序中可能发生的所有更改，它可以作为Flux更新周期的第四部分。
Flux结构和数据流

文章图片
在Flux应用中，数据是单向流动的，这个数据流是流量模式的核心。调度程序、存储和视图是具有输入和输出的独立节点。操作是包含新数据和类型属性的简单对象。现在，让我们一个一个地看看flux架构的各个组件。
调度程序dispatcher
它是React Flux应用程序的中心枢纽，负责管理Flux应用程序的所有数据流。它是对商店的回调的注册表。它本身没有真正的智能，只是充当一种将操作分发到储存的机制。所有存储都注册自己并提供一个回调。它是一个处理所有修改存储的事件的地方。当操作创建者向dispatcher提供新操作时，所有存储将通过注册表中的回调接收该操作。
dispatcher的API有5个方法。这些都是:

编号	方法	解释
1.	register()	它用于注册储存的操作处理程序回调。
2.	unregister()	它用于注销储存的回调。
3.	waitFor()	它用于等待指定的回调先运行。
4.	dispatch()	它用于调度一个动作。
5.	isDispatching()	它用于检查调度程序当前是否正在调度操作。

储存
它主要包含应用程序状态和逻辑，它类似于传统MVC中的模型。它用于维护应用程序内的特定状态，响应操作更新自身，并发出更改事件来警告控制器视图。
视图View
它也被称为控制器-视图。它位于链的顶部，用于存储用于生成操作和接收来自存储的新数据的逻辑。它是一个React组件，侦听更改事件并从存储中接收数据并重新呈现应用程序。
操作action【React Flux架构基本概念解析 – ReactJS实战教程】dispatcher方法允许我们触发对存储的调度并包含数据的有效负载，我们称之为操作。它是将数据传递给调度程序的操作创建者或助手方法。
Flux的优点