什么是 JavaScript 中的架构 Flux 组件?
如果您在过去几年一直关注 JavaScript 世界,那么您可能听说过"flux"架构的概念。简而言之,flux 是一种管理应用程序中数据流的模式。它最初设计用于 React,但可以与任何其他 JavaScript 框架一起使用。
有几种不同的方法可以实现 flux,但它们都共享一些关键组件−
Dispatcher − 这是一个中心对象,负责管理应用程序中的所有数据流。所有更新都从调度程序开始。
Stores − 这些是包含应用程序数据的对象。它们可以被视为模型,但它们也有发出更改事件的能力。
Views− 这些是构成用户界面的 React 组件。它们监听来自商店的更改事件并相应地更新自身。
在本教程中,我们将仔细研究每个组件,并了解它们如何协同工作。
调度程序
调度程序是 flux 应用程序的中心枢纽。它负责管理所有数据流。所有更新都从调度程序开始。
调度程序是一个单例对象,这意味着应用程序中只有一个实例。它也是一个事件发射器。当发生操作时,调度程序会发出一个带有操作类型和任何相关数据的事件。
调度程序将这些事件广播到商店,然后商店会相应地更新自身。视图会监听来自存储的更改事件并进行自我更新。
存储
存储是包含应用程序数据的对象。它们可以被视为模型,但它们也能够发出更改事件。
当存储从调度程序接收到操作时,它可以选择相应地更新自身。一旦它更新了数据,它就会发出更改事件。
视图会监听这些更改事件并进行自我更新。
视图
视图是组成用户界面的 React 组件。它们会监听来自存储的更改事件并进行自我更新。
在 flux 应用程序中,所有更新都从调度程序开始。调度程序会发出带有操作类型和任何相关数据的事件。存储会接收这些事件并进行自我更新。一旦存储更新了数据,它们就会发出更改事件。视图会监听这些更改事件并自行更新。
结论
Flux 是一种管理应用程序中数据流的模式。它最初设计用于 React,但可以与任何其他 JavaScript 框架一起使用。
有几种不同的方法可以实现 flux,但它们都共享几个关键组件:调度程序、存储和视图。
调度程序是 flux 应用程序的中心枢纽。它负责管理所有数据流。所有更新都从调度程序开始。
存储是包含应用程序数据的对象。它们可以被视为模型,但它们也有发出更改事件的能力。
视图是构成用户界面的 React 组件。它们监听来自存储的更改事件并相应地更新自身。