阿里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所示,当鼠标移动到白云或者月亮上时,相应的物体会高亮,当鼠标按下时,物体会有一个放大 ...
随机推荐
- UIImageView帧动画相关属性和方法
@property(nonatomic,copy) NSArray *animationImages; 需要播放的序列帧图片数组(里面都是UIImage对象,会按顺序显示里面的图片) @propert ...
- [SinGuLaRiTy] 树形DP专项测试
[SinGuLaRiTy-1015] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 对于所有的题目:Time Limit:1s | Me ...
- 统一我的博客文章的CSS样式代码
一.前因后果 之前写博客的时候也有写一些CSS代码来美化,不过都是凌乱的,每次再写一篇,又得重头来过去想,或者去拷贝原来的CSS设置.由于逻辑性不强,找一个配套的格式出来要花费不少时间. 今天我把部分 ...
- nlog学习使用
最近有不少朋友推荐我用NLog.我以前都是自己写txt的文本输出log,以前别人用log4net的时候看那个配置文件,看得我一阵烦,我比较喜欢约定胜于配置的组件.这次玩了一波NLog,,相当不错.一下 ...
- java小题:福尔摩斯的约会
原题地址:https://www.nowcoder.com/pat/6/problem/4040 防止广告嫌疑,原题为: 题目描述 大侦探福尔摩斯接到一张奇怪的字条:"我们约会吧! 3485 ...
- Unity3D C#中使用LINQ查询(与 SQL的区别)
学过SQL的一看就懂 LINQ代码很直观 但是,LINQ却又跟SQL完全不同 首先来看一下调用LINQ的代码 int[] badgers = {36,5,91,3,41,69,8}; var skun ...
- sqlplus连接oracle问题
第一次在自己电脑上连接远端数据库,尝试了一上午居然还没成功,后来在网上找了一堆的方法终于是连接上了 -_-!! 总结一下:简单操作:一步到位 我主要是用的oracle 11g的数据库,sqlpl ...
- J2SE之基础语法总结一
1.标识符: (1)简单来说凡是可以起名字的地方都叫标识符,起标识符的时候要见名知意. (2)标识符由字母.数字.美元符$和下划线组成,标识符应以字母.下划线.$开头,注意不能以数字开头. (3)ja ...
- JDBC的使用流程
//导入包: import java.sql.*; //注册JDBC驱动程序: Class.forName("com.mysql.jdbc.Driver"); //打开一个连接: ...
- 前端随手优化不完全篇-SEO篇
一代码优化概述 关于代码优化的知识是纯理论的知识,学习的很枯燥.在学到CSS时,不免遇到CSS+div进行代码优化的知 识,因此在网上看了一些关于这方面的知识,简单的整合一下,梳理自己所了解的代码优化 ...