Flux

Flux是Facebook用于构建客户端Web应用程序的应用程序架构。它通过利用单向数据流来补充 React 的可组合视图组件。它更像是一种模式,而不是一个正式的框架。
Flux最长应用在React中,但是Flux本身只是一个概念,实际开发中通常使用更加复杂的Redux模式或者MobX模式,这些模式也借鉴了Flux的理念。
在Flux中有三个主要的构成:
  • dispatcher。 dispatcher接收Action并将其分配给已在dispatcher注册过的store,每个store都会受到每一个Action,每个应用程序中应只有一个单一实例调度程序。
  • store。 store中存储着应用程序数据,store中的数据只能通过Action来改变,每当store中的数据改变时,都会发出更改事件通知视图。
  • views。 视图
除此之外还有几个重要概念:
  • Action。 Action是一个具有type属性和其他数据的对象,其中type属性是必须的,用于描述操作类型,其他数据是可选的。
  • Action Creator Method。 创建Action对象并将其传入dispatcher的函数。
Flux的核心思想是单向数据流。 就是说Flux应用中数据都沿单个方向流动,它看起来是这样
notion image
这些视图又可能引起新操作(Action)来响应用户操作,例如当用户点击一个按钮时,我们可能会更新store里的某个数据,这个时候数据流是这样的:
notion image
Actions是由Action creator函数创建并提供给dispatcher的,然后dispatcher调用store 已向其注册好了的回调函数,并将Actins分派给所有store 。在这些回调函数内部,store会响应与其维护的状态相关的任何操作。之后store广播一个更新事件通知视图层数据发送了更改。视图层会获取store的数据并监听store的更新事件,在事件处理程序中从store中检索出新数据并调用自身的视图更新方法(例如react的setState()方法),从而重新渲染视图。
notion image
 
Flux的特点是单向数据流,没有双向绑定。应用程序状态仅在store中维护,Flux允许应用程序的不同部分保持高度分离。如果store之间确实存在依赖关系,则它们将保存在严格的层次结构中,同步更新由dispatcher管理,这让系统变得更加可预测。