去年在学完react后,空了几个月。之后了解到了flux。
找了时间去研究了下,也看了些例子,自己也写了些。
这里做个笔录,以后呢好查找。
当然写时也看了网上的文章,有地方直接复制的。
flux是fb开发的前端架构,通过利用一个单身数据流补充了react的组合视图组件。
它算是一种模式并非完整的框架。
它有几大组成部分,从底层向view层说起吧。
store dispatcher action view
store仓库包含应用数据和操作,它上会有获取,修改数据方法,还有事件回调绑定和取消绑定。
还有回调触发。
它像mvc 中的m但是多了回调的管理。
这里的回调一般是change修改的回调。
例如:当数据添加了一条,在调用添加方法后调用emit 回调来触发。
从而告诉绑定change对象,我的数据更新了。你操作吧。
一般来说绑定都会在顶层组件内绑定。组件去更新自己的状态数据。
会引起子组件更新。这样传递下去。
但是按正常的思路,事件的触发修改数据都是由用户来操作的。也就是view层上触 发的。
那么怎么样把这些操作传递到store呢?
这时action动作就出现了。
这个模块会接收到view上的操作由它来触发stroe上的方法,来实现数据更新。
据体呢就是action上开放许多方法,参数来接收操作数据。
但是这样每种数据操作都需要写一个方法。当组件多了时action就可能有几百个方法了。
不太好维护。
这时dispatcher调度就出现了。
它管理着stroe的调用,而acion需要触发 调度上的注册。
Dispatcher 的作用是将 Action 派发到 Store、。你可以把它看作一个路由器,
负责在 View 和 Store 之间,
建立 Action 的正确传递路线。注意,Dispatcher 只能有一个,而且是全局的。
//register 用来登记各种动作并执行不同的store方法
它通过判断action.actionType动作类型来执行不同的store操作。
它可以在store模块内注册 ,把store的操作都注册到dispatcher上。
但是需要注册 的是当有多个store时需要定义不同的动作类型名称,来区别它们。
在action上通过调用dispathcher.dispatch方法传递actionType类型和数据,
来调用dispathcer上注册的操作。
这就是flux的流程了。
总结:
应用顶层控制组件上初始化状态时获取store上数据,在第一渲染后监听store的修改事件,在注销时解除事件。
事件内重新更新组件状态。
并创建操作action的方法
通过props传递状态和actioni到子组件。
当然子组件也可以引入action动作自己触发。
有view上的操作时触发action指定的动作方法并传递数据。
动作内去传递操作到dispatcher,收到后从注册内通过动作类型来区别,应该执行哪个store操作或多个store.
当store收到参数时更新数据。这时会触 发在组件控制层上绑定的修改事件。view会去更新自己的状态数据。
这就是flux的运行了。
心得:
在引用组件模块时变量的名称首字母需大写,不然react不会渲染组件的。
dispatcher模块可以只创建调度对象。store的注册 可以在 store模块内引用dispathcer来注册 。
而action模块可以定义多个和store模块一样,统一规范和模块名。
实现store actioni一一对应。
在dispatcher注册 中的case 值和action内触发的动作类型需要一致。
可能维护一个键值一样的模块对象,在dispathcer的case 值和action中动作类型参数都用此对象的属性。
这样好维护一些。
在写小的简单的组件时,最好所有的值都通过props来传递,如点击事件方法,id classname 默认值这些都传递来获取。
这样对于组件的重复使用有好处。