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重构步骤:
1 将视图部分的页面组件拆分成容器组件和UI组件
UI组件所有数据(点击等各种事件所调用的函数)均来自于props
容器组件可继承 封装好的 Controller 以自动实现绑定更新视图方法及卸载组件时自动解绑
2 创建action工厂函数
定义一个初始化 的action工厂函数
请求需要的数据
将拿到的数据封装到 action中
将action发送到dispatcher (通过.dispatch()方法)
3 在派发器中 配置对应的case
并且从action中拿到数据后 设置到对应store中即可
4 在容器组件的加载完成的生命周期函数中 调用上述步骤封装好的action工厂函数
5 路由部分引入的组件 注意需要切换成 容器组件
flux架构的详细介绍和使用!的更多相关文章
- Spring Cloud的核心成员、以及架构实现详细介绍
什么是微服务 微服务的概念源于Martin Fowler所写的一篇文章“Microservices”. 微服务架构是一种架构模式,它提倡将单一应用程序划分成一组小的服务,服务之间互相协调.互相配合,为 ...
- 微服务架构学习与思考(10):微服务网关和开源 API 网关01-以 Nginx 为基础的 API 网关详细介绍
微服务架构学习与思考(10):微服务网关和开源 API 网关01-以 Nginx 为基础的 API 网关详细介绍 一.为什么会有 API Gateway 网关 随着微服务架构的流行,很多公司把原有的单 ...
- 微服务架构学习与思考(11):开源 API 网关02-以 Java 为基础的 API 网关详细介绍
微服务架构学习与思考(11):开源 API 网关02-以 Java 为基础的 API 网关详细介绍 上一篇关于网关的文章: 微服务架构学习与思考(10):微服务网关和开源 API 网关01-以 Ngi ...
- 柯南君:看大数据时代下的IT架构(2)消息队列之RabbitMQ-基础概念详细介绍
一.基础概念详细介绍 1.引言 你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务让你可以很轻松 ...
- 《基于Nginx的中间件架构》学习笔记---4.nginx编译参数详细介绍
通过nginx -V查看编译时参数: 在nginx安装目录下,通过./configure --help,查看对应版本ngnix编译时支持的所有参数: Nginx编译参数详细介绍: --help 显示本 ...
- vue对比其他框架详细介绍
vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...
- springboot 学习之路 18(webflux详细介绍(2))
webflux的详细介绍 引言:上一节已经简单介绍webflux的一些基本概念,本章继续学习webflux的原理和实战方面的东西: Spring WebFlux架构: note:注意理解上面这张图.下 ...
- php CGI、Fastcgi、PHP-FPM的详细介绍与之间的关系
以下PHP CGI.Fastcgi.PHP-FPM的一些信息归纳和汇总----->详细介绍与之间的关系 一:CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的 web ...
- RabbitMQ消息队列(一): Detailed Introduction 详细介绍
http://blog.csdn.net/anzhsoft/article/details/19563091 RabbitMQ消息队列(一): Detailed Introduction 详细介绍 ...
随机推荐
- 开源项目Telegram源码 Telegram for Android Source
背景介绍 Telegram 是一款跨平台的即时通信软件,它的客户端是自由及开放源代码软件.用户可以相互交换加密与自毁消息,发送照片.影片等所有类型文件.官方提供手机版.桌面版和网页版等多种平台客户端. ...
- July 13th, 2018. Friday, Week 28th.
Don't let the mistakes and disappointments of the past control and direct your future. 不要让你的未来被过去的错误 ...
- 浅谈js的类数组对象arguments
类数组对象:arguments总所周知,js是一门相当灵活的语言.当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments的 ...
- JS之for循环面试题
今天同事问了道问题 ,b=; ,b<;++a,++b){ g=a+b } console.log(g) 问输出结果为多少??? 答案:12 这里要知道for循环的条件不管写多少个,必须都满足才可 ...
- win10安装配置mongodb
1. 下载MongoDB并安装官网下载地址:https://blog.csdn.net/qq_41127332/article/details/80755595 ,选择合适的版本进行下载.我选择是3. ...
- Gym 101806T Touch The Sky
http://codeforces.com/gym/101806/problem/T 题目 In the year 2117, Professor Jaemin Yu developed a line ...
- 题解:T103342 Problem A. 最近公共祖先
题目链接 题目大意 求每个点对的lca深度的和 以每一层分析,得出通式 由于1e9的数据范围要化简表达式得到O(能过) 瞎搞后就是2^(2n+2)-(4n+2)*2^n-2 code: #includ ...
- CentOs篇
Advanced-高级配置.Security-安全.Boot-启动引导: 1.Removable Devices-移动设备 2.Hard Drive-本地硬盘 3.CD-ROM- Drive-光盘 4 ...
- ionic4 组件调用的坑
我们再开发过程中很多模块做成组件,那么调用的时候则需把module.ts中的引入去掉,如下红色框框:
- [LOJ 2083][UOJ 219][BZOJ 4650][NOI 2016]优秀的拆分
[LOJ 2083][UOJ 219][BZOJ 4650][NOI 2016]优秀的拆分 题意 给定一个字符串 \(S\), 求有多少种将 \(S\) 的子串拆分为形如 AABB 的拆分方案 \(| ...