react 中的flux介绍

flux和redux都是根据组成部分创建对应的js文件

Flux是Facebook用来构建客户端Web应用的应用架构。它利用单向数据流的方式来组合React中的视图组件。它更像一个模式而不是一个正式的框架,开发者不需要太多的新代码就可以快速的上手Flux。

流程:

View(view,controller-view) 视图层 -->Action动作–>Dispatcher派发器—>Store数据层—>View
react 中的flux介绍_第1张图片

dispatcher:dispatcher是事件调度中心,flux模型的中心枢纽,管理着Flux应用中的所有数据流。它本质上是Store的回调注册。每个Store注册它自己并提供一个回调函数。当Dispatcher响应Action时,通过已注册的回调函数,将Action提供的数据负载发送给应用中的所有Store。应用层级单例

store : 负责封装应用的业务逻辑跟数据的交互。

Store中包含应用所有的数据

Store是应用中唯一的数据发生变更的地方

Store中没有赋值接口—所有数据变更都是由dispatcher发送到store,新的数据随着Store触发的change事件传回view。Store对外只暴露getter,不允许提供setter!!禁止在任何地方直接操作Store。

controller-view : controller-view 可以理解成MVC模型中的controller,它一般由应用的顶层容器充当,负责从store中获取数据并将数据传递到子组件中。简单的应用一般只有一个controller-view,复杂应用中也可以有多个。controller-view是应用中唯一可以操作state的地方(setState())

view : view(UI组件) ui-component 职责单一只允许调用action触发事件,数据从由上层容器通过属性传递过来。

actionCreator : actionCreators是相对独立的,它作为语法上的辅助函数以action的形式使得dispatcher传递数据更为便利。

你可能感兴趣的:(react)