阿里react整合库dva demo分析
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Helvetica Neue"; color: #404040 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #737373 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "Helvetica Neue"; color: #404040 }
li.li3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #737373 }
span.s1 { }
ol.ol1 { list-style-type: decimal }
dva分析
前言
因工作需要,最近在努力学习react全家桶相关内容,最近发现阿里有个dva项目,是基于redux,redux-sage和react-router 的一个轻量级框架,跟着网上一个整合demo坐下来后,打算写一下整个系统的分析,以备日后查看。
系统分析
概述
整个项目使用 react+dva+antd 的技术栈,主要实现了一个CURD 的应用。功能不复杂,主要是熟悉这个技术栈的思维方式。
入口
项目的入口文件为 index.js文件。 在该文件中首先实例化一个dva应用,然后设置该应用的model和router,最后启动(start) 在model中主要用来编写整个应用的业务逻辑,包括redux的整个流程,同步、异步获取数据等操作。 在router中底层应该是使用了react-router来负责整个系统的路由,然后在路由中配置各自路由对应的页面,也就是组件(components)
model
model类似于mvc结构中控制器的角色,其中主要有五个配置项。
- namespace
model 的命名空间,同时也是他在全局 state 上的属性,只能用字符 串,不支持通过 . 的方式创建多层命名空间。 - state
state的初始值,优先级低于传给 dva() 的 opts.initialState。 - reducers key/value 格式定义 reducer,用于处理同步操作,唯一可以修改 state 的地方。由 action 触发
- effects
以 key/value 格式定义 effect。用于处理异步操作和业务逻辑,不 直接修改 state。由 action 触发,可以触发 action,可以和服务 器交互,可以获取全局 state 的数据等等。 - subscrip
以 key/value 格式定义 subscription。subscription 是订 阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。在 app.start() 时被执行,数据源可以是当前的时间、服 务器的 websocket 连接、keyboard 输入、geolocation 变化、 history 路由变化等等。
简单来说,就是在state中设置初始化的组件状态,在reduce中处理同步的action,在effect中处理异步的action,并发出同步的action去更新state。最后可以在subscrip中添加事件监听等操作。
service
service 模块负责的内容同一班意义上的一样,就是用来获取数据的服务,可以把跟服务器通讯的代码放到这里来。
router
配置路径对应的组件,也就是不同路径下展示不同的页面。
组件
一个常规的react,用来将model中的state映射到组件的prop上并展示。
后记
整个dvademo看下来,对于一个比较熟悉react全家桶的人来说,相对于原来那一套redux+redux-saga+react确实简化许多,但如果不是很熟悉上面提到的那些东西,看这个demo的时候可能会一头雾水。 总而言之,dva大大方便了熟手的开发进度,减少了烦冗的代码,但是学习曲线还是过于陡峭,不是很适合上手。
参考 【https://github.com/dvajs/dva/blob/master/docs/API_zh-CN.md#model】 【https://github.com/sorrycc/blog/issues/18】
阿里react整合库dva demo分析的更多相关文章
- 阿里react整合库dva demo分析 [转]
同,也是工作中需要,用到 dva , 也找了些文章参考知识点. 更多:http://www.cnblogs.com/heyuqing/p/6844098.html 以下内容为摘出 mark 接着踩 ...
- 【转】React 常用面试题目与分析
作者:王下邀月熊链接:https://zhuanlan.zhihu.com/p/24856035来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 本文有一定概率为水文,怕 ...
- 【RxJava Demo分析】(二)Schedulers线程调度器 · Hans Zone
用Schedulers(调度器)实现多任务(并发,Concurrency)的例子 废话不多说我们看一下有关于RxJava的代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
- uni-app在线引入阿里字体图标库
第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...
- 如何快速构建React组件库
前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...
- springboot整合mybatis源码分析
springboot整合mybatis源码分析 本文主要讲述mybatis在springboot中是如何被加载执行的,由于涉及的内容会比较多,所以这次只会对调用关系及关键代码点进行讲解,为了避免文章太 ...
- 一:配置使用阿里云Maven库
鉴于国内的网络环境,从默认 Maven 库下载 jar 包是非常的痛苦. 速度慢就不说了,还经常是下不下来,然后一运行就是各种 ClassNotFoundException,然后你得找到残留文件删掉重 ...
- qml demo分析(threadedanimation-线程动画)
一.效果预览 使用过qml的同学都知道,使用qml做动画效果是非常简单的,再也不需要像QWidget那样,自己模拟一个动画,费时又费力,往往还达不到效果.今天我们就来分析下qml的两种动画实现方式,如 ...
- qml demo分析(maskedmousearea-异形窗口)
一.效果展示 如本文的标题所示,这篇文章分析的demo是一个异形窗口,主要展示鼠标在和异形区域交互的使用,效果如图1所示,当鼠标移动到白云或者月亮上时,相应的物体会高亮,当鼠标按下时,物体会有一个放大 ...
随机推荐
- SSH相关小应用
1.隐藏值:<s:hidden name="bbsTopic.id" value="%{bbsTopic.id}"></s:hidden> ...
- centos6.5安装配置supervisor
1.下载并安装supervisor https://pypi.python.org/pypi/supervisor/3.2.0 .tar.gz cd supervisor- python setup. ...
- formvalidation表单验证
官方文档:http://formvalidation.io var $formEntityProfileSearch = $("form[name=entityProfileSearch]& ...
- python学习随笔(三)
在linux中输入密码,我们是看不到的,如果在python中直接输入是可以看的到的,执行以下程序 #!/usr/bin/env python username = raw_input("us ...
- if与switch的性能比较
前言 之前学习Java时,遇到了个问题,有点纠结.当if与switch都实现相同的功能时,该改采用哪种方法实现?我并不懂得如何准确测量两者之间的性能区别,便在OlineJudge上找条该类型的题,来测 ...
- 【Android】基于TCP协议的网络通信
1.使用ServerSocket 创建TCP服务器端: ServerSocket server; try { server = new ServerSocket(8000); while (true) ...
- 【转】DHCP的请求过程
首先你得清楚DHCP的请求过程:1.client向server发送请求,发向广播地址2.server向client回应一个IP,发向单播地址3.client向server回应一个确认,发向广播地址,表 ...
- jquery判断邮箱对错
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- select下拉二级联动
function opt(){ var id = $("#ids").val(); $.ajax({ type: "POST", url: "$ ...
- 看看我做的一款 时间轴 插件 timegliderJs
TimegliderJs 是一款基于jQuery的时间轴插件.完成后效果. 介绍 Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及 ...