先来说明一下:dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架.所以学习这个可以节约时间,最大化的开发我们的项目.
1.开始安装dva的脚手架:
npm install dva-cli -g
dva -v
dva-cli version 0.10.1到这一步,说明dva的脚手架安装成功.这个说明的是dva脚手架版本一般是>=9的,这个要注意一下,现在一般都是10版本了,也可以不用关注这个地方.
2.创建一个dva的项目(我就叫dva-demo吧,这个你随意)
dva new dva-demo
这会创建 dva-demo 目录，包含项目初始化目录和文件，并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。
3.切换到你所建立的dva-demo项目中,并执行启动命令,一个欢迎的页面就展现出来了,说明项目启动成功了.
cd dva-demo
npm start然后我们看一下这个界面:
这个运行的端口默认是8000,http://localhost:8000/#/ .
4.使用antd
这里我建议不用官网那样 *** 作,因为实现太慢了,如果你网速快,可以按照如下命令执行:
npm install antd babel-plugin-import --save但是如果你网速慢,我建议你用cnpm安装这两个包,命令是:
cnpm install antd babel-plugin-import --save
------------------------
这边是展示结果:
√ Installed 2 packages
√ Linked 66 latest versions
√ Run 0 scripts
√ All packages installed (60 packages installed from npm registry, used 41s(network 41s), speed 362.93KB/s, json 66(1.9MB), tarball 12.74MB)我是用第二种方法安装的,特别快,建议采用cnpm安装.
5.编辑 .webpackrc，使 babel-plugin-import 插件生效。
{
"extraBabelPlugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]
}直接把这段代码粘贴进去,这个是用来按需加载antd的样式的,必不可少.
你可以看一下package.json中,
"dependencies": {
+"antd": "^4.20.6",
+"babel-plugin-import": "^1.13.5",
"dva": "^2.4.1",
+ "react": "^16.2.0",
+"react-dom": "^16.2.0"
},带+号的就是刚才安装那两个包下载下来的,然后重新启动项目就可以.
接下来我们也按照官网那样一步步先 *** 作吧,搞明白逻辑,最后再加上我们自己的实例.
6.定义路由
先创建路由，路由可以想象成是组成应用的不同页面.
在routes文件夹下新建Products.js,代码如下:
import React from 'react';
const Products = (props) => (
List of Products
);
export default Products;其实写在routes文件夹中也能看明白这个是路由组件.
然后把刚才新建的Products.js添加路由信息到路由表，编辑 router.js :(这个router.js就是管理整个项目的路由),代码如下:
import Products from './routes/Products';
把这两段代码添加进去,然后在浏览器里打开 http://localhost:8000/#/products ，就能看到前面定义的 标签了.这里大家应该都懂,path就是对应的路径,component就是对应的组件,也就是我们刚才写的Products.js这个组件,exact是精确匹配,意思是必须是products才可以匹配到这个组件.我们来看一下浏览器的效果:http://localhost:8000/#/products
到这一步我们的路由组件就先写好了,继续往下走.
7.编写 UI 组件
刚才我们第6步写的是一个路由组件,你可以理解为是可以动的组件,也就是我们所说的静态页面,你可以理解为不能动的组件,一静一动就构成了我们所要实现的目标效果,下面我们来编写一下这个静态页面.
我们来编写一个 ProductList 组件,既然是静态的,那它必然是要建立在components文件夹下对吧,好的components/ProductList.js,这样一目了然,一看就知道这是静态页面,代码如下:
import React from 'react';
import PropTypes from 'prop-types';
import { Table, Popconfirm, Button } from 'antd';
const ProductList = ({ onDelete, products }) => {
const columns = [{
title: 'Name',
dataIndex: 'name',
}, {
title: 'Actions',
render: (text, record) => {
return (
onDelete(record.id)}>
);
},
}];
return (
);
};
ProductList.propTypes = {
onDelete: PropTypes.func.isRequired,
products: PropTypes.array.isRequired,
};
export default ProductList;这里其实又需要安装一个 prop-types这个包,但是因为一会这段代码会被替换掉,所以这个包暂时就不安装了,我们自己知道就好.
8.定义 Model
完成第7步的 UI组件 后，现在开始处理数据和逻辑.
现在models/example.js中有一段代码,我们自己可以先捋一捋它的逻辑.
dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions .
简单看完这段逻辑后,我们新建在models中products.js,也就是把我们所写的代码这一模块统一管理起来,代码如下:
export default {
namespace: 'products',
state: [],
reducers: {
'delete'(state, { payload: id }) {
return state.filter(item => item.id !== id);
},
},
};如果你对这段代码稍感陌生,那么我建议你先去看一下redux,或者是redux-saga 中间件,因为dva本身就是对这些中间件的集合,做了一个最优的处理.这也应了咱们最上边的一句话:dva =redux+redux-saga +额外内置(react-router +fetch),不懂的小伙伴可以去稍微看一下,再来了解dvaJS.
我们稍微解释一下这段代码:
namespace 是命名空间的意思,即它属于哪个模块,在这里表示在全局 state 上的 key;
state 是初始值，在这里是空数组;reducers 等同于 redux 里的 reducer，接收 action，同步更新 state.
在index.js 里载入我们刚才写的products这一模块,这一步至关重要,不在index.js里写入,意味着我们刚才的模块代码是不会生效,看代码吧:
app.model(require('./models/products').default);你只需要把刚才写的products这个模块加载进去就可以了.
9.connect 连接起来
到这里，我们已经单独完成了 model 和 component，那么他们如何串联起来呢?
dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 connect 。
我们需要再次编辑 routes/Products.js，替换为以下代码：
import React from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';
const Products = ({ dispatch, products }) => {
function handleDelete(id) {
dispatch({
type: 'products/delete',
payload: id,
});
}
return (
List of Products
最后，我们还需要一些初始数据让这个应用 run 起来。编辑 index.js：
// 1. Initialize
// const app = dva();
const app = dva({
initialState: {
products: [
{ name: 'dva', id: 1 },
{ name: 'antd', id: 2 },
],
},
});刷新浏览器，能看到以下效果：
至此按照官方的说明,我们就走完一个小小的案例.
10.构建应用
构建应用这里不算太重要,主要是一个打包命令,npm run build,这个是和vue一样的命令,不多说了.
11.模拟mock数据接口,获取数据
a.安装mock.js依赖这里还是推荐用cnpm安装:
cnpm install mockjs --save然后看一下我们安装的依赖,package.json中:
"dependencies": {
"antd": "^4.20.6",
"babel-plugin-import": "^1.13.5",
"dva": "^2.4.1",
+ "mockjs": "^1.1.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},可以看到这里已经有了,我用+号标出来了.
b.配置mock.js
这里分两种情况:
第一种:直接写，不分离模块，在.roadhogrc.mock.js，直接使用,看代码:
export default {
'GET /api/products': {
products: [
{ name: 'dva', id: 1 },
{ name: 'antd', id: 2 },
],
},
};因为之前我们的数据是写在index.js中的,需要注释掉,改成这样的:
// 1. Initialize
const app = dva();
// const app = dva({
// initialState: {
// products: [
// { name: 'dva', id: 1 },
// { name: 'antd', id: 2 },
// ],
// },
// });然后重启一下项目,浏览器中直接访问http://localhost:8000/api/products,就可以访问到,访问到的结果如下,可以看到模拟的数据也获取到了:
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）