dva开发框架简介和

目录

1、dva是什么

2、dva工程如何搭建（在已安装node.js的前提下）

3、dva数据传递

4、代码案例和演示

引用和参考

---

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.

---

输入http://localhost:8000/#/

---

3、dva数据传递

使用之前先了解dva是如何将react中数据进行传递的：

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、代码案例和演示

1. 在routes目录下创建View页面

2、在根目录下router.js文件中添加路由信息

3、在/components下创建组件类

4、在/models下创建用于数据请求的Model

5、在/utils/api.jsx文件中添加对应的后台访问接口

6、在index.js文件中添加创建的model 以及绑定model 和 component

到这里，我们所需要的基本配置已经完成。

示例代码的界面如下图所示：

引用和参考

Dva.js官方网站 API | DvaJS

示例代码：📎dva-demo.rar.pdf

这篇好文章是转载于：学新通技术网