Flux

Facebook提出Flux应用架构解决数据模型处理,Flux是一种思想,跟React本身没有必然联系,基于Flux思想的框架有Redux、Reflux、Flummox等产品。

单向数据流:

界面总是基于内部数据模型的一种呈现,但是用于在界面的输入也会回输到内部数据模型上,这是一种数据的双向流动,双向传递流动很难把握,在复杂情况下,有些操作会触发一连串的变化,有些变化还可能是异步的。

为此,Flux引入了单向数据流的思想,当需要插入新的数据或改变原有数据时,数据流完全重新开始。

Flux

Flux中Store的变化由事件Action激发,经由动作分发器Dispatcher派发到存储Store(数据模型)中,并引起Store中数据发生变更,从而影响视图的变化。

Flux

Action是一个Javascript Plain Object,主要记录对State的操作信息,包含两方面内容:类型(type)和载荷(payload),type属性是预先定义好的常量标识符,代表特定的action,载荷用于传递具体的数据,action的接收者负责解读和处理这个数据。

{
  type: 'ADD_STUDENT',
  name: 'Yoga',
}

Dispatcher分发器是Flux应用中的调度枢纽,主要职责是把action分发给Store。Dispatcher维护着一个庞大的需要接受Action的Store回调函数列表,并接受注册。Dispatcher把Action传递给所有登记在册的Store,类似于广播,不是订阅某些Action,而是监听所有Action。

每个Store都会预先在Dispatcher中注册Action响应回调函数,回调函数接受Action作为参数,根据Action type识别Action并调用对应的处理函数。Store中包含应用所有的数据,Store是应用中唯一数据发生变更的地方。

整个view是一个树形嵌套结构,这个嵌套结构的根部是一个特殊的view,成为控制视图Controller View(根组件),控制视图兼具控制功能,它一方面负责接收Store的广播事件,另一方面也从Store中获取数据(调用其getter函数)。

Article
Tagcloud
DVA Java Express Architecture Azure CI/CD database ML AWS ETL nest sql AntV Next Deep Learning Flutter TypeScript Angular DevTools Microsoft egg Tableau SAP Token Regexp Unit test Nginx nodeJS sails wechat Jmeter HTML2Canvas Swift Jenkins JS event GTM Algorithm Echarts React-Admin Rest React hook Flux Redux ES6 Route Component Ref AJAX Form JSX Virtual Dom Javascript CSS design pattern