flux架构的详细介绍和使用!

Posted lishixiang-007

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flux架构的详细介绍和使用!相关的知识,希望对你有一定的参考价值。

结构分为四个


视图 view
动作 action
派发器 dispatcher
数据商店 store

流程:
用户操作视图 视图(view)发送动作(action)到派发器(dispatcher)
由派发器(dispatcher) 对动作类型(action.type)做判断
然后调用数据商店(store)的相应方法来操作数据模型(store.state)
最后由数据商店(store)通知视图(view)进行更新

在完整的案例中
action只是起到传递数据的作用 本质就是一个对象而已

action最好用专门的工厂函数来进行创建(actions)

在视图中 通过调用action工厂函数来生产aciton 再由工厂函数将action发送给派发器

同时 在开发时 应将视图部分进行拆分
拆分成 : 容器组件和UI组件
UI组件纯粹负责显示数据
容器组件负责处理业务逻辑

由容器组件提供更新视图的方法
然后在组件加载完成时 将更新视图方法提供给store

store应将其绑定到更新视图专用的事件上

例如:
let EventEmiiter = require("events").EventEmiiter

let store =
...EventEmiiter.prototype,
subscribe(cb)
this.on("update",cb)
,
setUsername(name)
this.state.name = name

this.emit("update") //通知视图进行更新
,
unSubscribe(cb) //注意: 在组件的卸载期 记得将更新视图函数进行解绑
this.removeListener("update",cb)


以上是关于flux架构的详细介绍和使用!的主要内容,如果未能解决你的问题,请参考以下文章

dubbo详细介绍

详细介绍软件架构设计的三个维度

实战SpringCloud响应式微服务系列教程(第六章)

赵强老师史上最详细的PostgreSQL体系架构介绍

java三层架构service,技术详细介绍

openGauss主备流程与参数的详细介绍