设计模式--Flux架构(模式)

1 简介

Application architecture for building user interfaces.
用于构建用户界面的应用程序体系结构。
核心是单向数据流。

2 Flux介绍

Flux是Facebook用于构建客户端Web应用程序的应用程序体系结构。

3 Flux机制

它通过利用单向数据流来补充React的可组合视图组件。
Flux工作流程图如下:
在这里插入图片描述

  • View: 应用的界面。这里创建响应用户操作的action。
  • Dispatcher: 中心枢纽,传递所有的action,负责把它们运达每个Store。
  • Store: 维护一个特定application domain的状态。它们根据当前状态响应action,执行业务逻辑,同时在完成的时候发出一个change事件。这个事件用于view更新其界面。

在这里插入图片描述
1、Action,它是用来描述一个行为的对象,每个action里都包含了某个行为的相关信息。比如, {actionName: ‘CREATE_POST’, data: {‘content’: ‘new stuff’}}
2、Dispatcher,它是一个信息分发中心,它是action和store的连接中心。它可以使用dispatch方法执行一个action,并且可以用register方法注册回调,在回调中处理store中的数据。
3、Store,它是数据操作的唯一地方,当数据发生变化时,它可以使用emit方法向其它地方发送名为’change’的广播,告知它们store已经发生了变化。
4、View,视图层监听了’change’事件,一旦change事件被触发,视图层就会调用setState方法来更新相应的UI State。

小结:
当用户在View上发生交互行为时,Dispatcher使用dispatch方法触发一个action(它包含了actionType和要传递的数据),在整个程序的总调度中心Dispatcher里面注册了各种类型的action类型,在对应的类型中,store实现了“订阅-发布”功能对这个action进行响应,同时对数据做相应的处理。数据处理完成后,触发一个自定义的change事件。View层在初始化完成时注册这个change事件,当接收到store的广播后,view层响应这个事件并重新渲染UI界面。

4 Flux使用

它更多是一种模式,而不是正式的框架,您无需大量新代码即可立即开始使用Flux。

5 经典实现

reduxjs/redux

参考

1、Flux架构的工作原理
2、Facebook移动架构:Android Flux架构详解
3、Flux 架构入门教程
4、flux官方
5、facebook/flux
6、reduxjs/redux

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读