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 经典实现
参考
1、Flux架构的工作原理
2、Facebook移动架构:Android Flux架构详解
3、Flux 架构入门教程
4、flux官方
5、facebook/flux
6、reduxjs/redux