目录
1、dva是什么
dva 是一个react开发框架中的脚手架。其主要目的是为了简化react数据之间的传递工作。
React 本身只是一个 DOM 的抽象层,使用组件构建虚拟 DOM。
如果开发大应用,还需要解决以下两个问题。
- 通信:组件之间如何通信?
- 数据流:数据如何和视图串联起来、路由和数据如何绑定、如何编写异步逻辑等等
而针对上述问题React 只提供了一种通信手段:传参。对于大应用,很不方便。当组件过多时,考虑参数传递问题将会浪费我们不少的时间。
然而dva的出现则基本解决了这些问题。他将市面上流行的react三个应用框架React-Router + Redux + Redux-saga包装了在一起。所以我们只需引入一个dva就可以对react整个数据流程进行封装和操作。
· 路由: React-Router
· 架构: Redux
· 异步操作: Redux-saga
2、dva工程如何搭建(在已安装node.js的前提下)
①、通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上。
$ npm install dva-cli -g $ dva -v
②、通过 npm 安装 antd 和 babel-plugin-import 。babel-plugin-import 是用来按需加载 antd 的脚本和样式的
$ npm install antd babel-plugin-import --save
编辑 .webpackrc,使 babel-plugin-import 插件生效。
{ "extraBabelPlugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] ] }
③、安装完 dva-cli 之后,你可以通过 dva new 创建新应用。
$ dva new dva-demo
④、启动刚刚创建的项目
$ cd dva-demo $ npm start
Compiled successfully! The app is running at: http://localhost:8000/ Note that the development build is not optimized. To create a production build, use npm run build.
![](https://i-blog.csdnimg.cn/blog_migrate/9aaefc2a9d75a6f49a9ec5df551e123b.png)
3、dva数据传递
使用之前先了解dva是如何将react中数据进行传递的:
![](https://i-blog.csdnimg.cn/blog_migrate/fe2363bf1908cf8cca6e27f5bf6f8a03.png)
1、View :就是 React 组件构成的 UI 层,从 State 取数据后,渲染成 HTML 代码。只要 State 有变化, View 就会自动
- Route:view页面最外层,负责引入component组件进行展示。
- componet: 组件构成的视图层,他可以是一个组件,也可以是由多个组件构成。
2、dispatch 方法:一个函数,发送 Action 到 State,当我们需要调用后台接口时,就需要通过dispatch 来调用。
3、action: 是一个普通 javascript 对象,它是改变 State 的唯一途径。
4、model
- namespace:model的唯一标识id,
- state:表示 Model 的状态数据,相当于一个数据容器,可以保存我们从后台返回或者自定义的数据。
- reducer :可以看做是 state 的计算器。它的作用是根据 Action,从上一个 State 算出当前 State。
- effect :在这个方法中可以异步调用后台的接口传递/读取数据
- subscription:,用于订阅一个数据源,然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等
5、connect: 是一个函数,绑定 State 到 View
4、代码案例和演示
- 在routes目录下创建View页面
![](https://i-blog.csdnimg.cn/blog_migrate/92de77664e5d0823f17f7914abf234d6.png)
2、在根目录下router.js文件中添加路由信息
![](https://i-blog.csdnimg.cn/blog_migrate/d969305cf2b475eb7b84443524abcdec.png)
3、在/components下创建组件类
![](https://i-blog.csdnimg.cn/blog_migrate/a858f27a770dfa605e7e4cffc5a6c425.png)
4、在/models下创建用于数据请求的Model
![](https://i-blog.csdnimg.cn/blog_migrate/041ebc68825bc897d38bb12791a9f644.png)
5、在/utils/api.jsx文件中添加对应的后台访问接口
![](https://i-blog.csdnimg.cn/blog_migrate/7d51b92ce143d2747e8db5d68c4dc5d5.png)
6、在index.js文件中添加创建的model 以及绑定model 和 component
![](https://i-blog.csdnimg.cn/blog_migrate/faf60869459447491345bfeb8ab50fc6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d7c248e4055a3a51482cd1489db997a1.png)
到这里,我们所需要的基本配置已经完成。
示例代码的界面如下图所示:
![](https://i-blog.csdnimg.cn/blog_migrate/9d04840cafee58ac529ee544ac5e3d09.png)
引用和参考
Dva.js官方网站 API | DvaJS