使用Dva及AntDesign，官网实战后的学习理解
目录
写完Ant Design Pro的才发现这篇还没有发表，个人无限感叹笔记不能放草稿箱。若有不正确的地方无限欢迎dalao指导菜鸟。 使用Ant Design Pro笔记 ClickHere》
- 目录
- 关于Dva
- 官网的项目实战讲解
- 全局安装dva
- 查看dva版本，存在则可用dva命令
- 创建应用
- 打开应用
- 查看初始配置理解
- 使用 antd
- 尝试写一个新页面（创建路由）
- 简单写个List（详解各个地方）
- 效果
- 组件UI Component
- 定义 Model（处理数据、及其逻辑）
- connect 起来
- 警告
- 快捷链接
关于Dva
Dva是基于 redux、redux-saga 和 react-router 的轻量级前端框架。
官网的项目实战讲解
官网的项目实战 ClickHere》
全局安装dva
有-g就是全局安装
cnpm install dva-cli -g查看dva版本，存在则可用dva命令
dva -v
dva-cli version 0.9.1创建应用
通过 dva new 创建新应用,下方pro-name填写你要创建的应用的命名
dva new pro-name耐心等出现happy hacking!即成功了。
打开应用
进入文件并使用默认命令打开入口文件
cd pro-name
cnpm start此时将自动打开一个链接为http://localhost:8000/的你的应用
如上图证明进入了这个依赖了dva的react项目了
查看初始配置理解
我的笔记：【React学习笔记】【应用的结构】有详细说明基础react项目各部分文件及依赖的理解 ClickHere》
如下图为dva创建的react应用的package.json文件，其中的依赖已经集成了部分。
像dependencies里的dva就已经集成了 redux、redux-saga 和 react-router。无需另外在安装依赖。
devDependencies放置项目在开发和测试环境中依赖的包，其中最明显作用的就是ESlint的包，这是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
开发过程中获得ESlint错误显示可给编辑器进行设置，此处以webstorm作为例子
若语法有错误，则如下图，显示红色波浪线，以及右边的红色色块提示。
使用 antd
通过 npm 安装 antd 和 babel-plugin-import 。–save用于将这两个东西加载在package.json
npm install antd babel-plugin-import --save如下图：
其中babel-plugin-import 是用来按需加载 antd 的脚本和样式的。按需加载如下：import { Button } from ‘antd’;按需加载了ant里面的Button组件。
尝试写一个新页面（创建路由）
新建routes/Products.js
import React from 'react';
const Products = (props) => (
List of Products
);
export default Products;添加路由信息到路由表，编辑 router.js
+ import Products from './routes/Products';
...
+ "/products" exact component={Products} /> 然后在浏览器里打开 http://localhost:8000/#/products，就能看到如下新的页面
简单写个List（详解各个地方）
效果
组件UI Component
新建 components/ProductList.js 文件：
import React from 'react';
// 利用prop-types第三方库对组件的props中的变量进行类型检测
import PropTypes from 'prop-types';
import { Table, Popconfirm, Button } from 'antd';
// onDelete，products从父组件routes/Products中的组件通过属性通信，将值传给了本子组件。其中products是表格所需的数组数据
const ProductList = ({ onDelete, products }) => {
// 官方文档查看基本表格的形式
const columns = [{
title: 'Name',
dataIndex: 'name',
}, {
title: 'Actions',
render: (text, record) => {
// 此处的text是指该表格当行的值，此处return没有应用可以删除，而record理解为表明该行全部的值，具体的属性即为我们设置的dataIndex。比如以下的record.id即为当行数据对应id值，record.name即为当行数据对应name值
return (
"Delete?" onConfirm={() => onDelete(record.id)}>
);
},
}];
return (
);
};
//组件的props中的变量进行类型检测
ProductList.propTypes = {
onDelete: PropTypes.func.isRequired,
products: PropTypes.array.isRequired,
};
// 出口组件
export default ProductList;定义 Model（处理数据、及其逻辑）
dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects（理解像ajax的东西调用后台api就好），订阅数据源的 subscriptions 。
新建 model models/products.js ：
export default {
namespace: 'products',
state: [],
reducers: {
//此处是模拟一个api，通过delete得知数据操作，使用filter删除对应id的数据。实际开发中一般是post一个你要删除的对象的key或者多个对象的key数组即可。
'delete'(state, { payload: id }) {
return state.filter(item => item.id !== id);
},
},
};理解：
1. namespace 表示在全局 state 上的 key
2. state 是初始值，在这里是空数组
3. reducers 等同于 redux 里的 reducer，接收 action，同步更新 state
在 index.js载入你的model
// 3. Model
+ app.model(require('./models/products').default);connect 起来
串联model 和 component
编辑 routes/Products.js（也就是修改你的新页面）：
这只是其中一种写法
import React from 'react';
// dva提供的 connect 方法
import { connect } from 'dva';
// ProductList 组件入口（即那个表格）
import ProductList from '../components/ProductList';
const Products = ({ dispatch, products }) => {
//调用串联的model，命名空间为ProductList 的delete，并传id过去
function handleDelete(id) {
dispatch({
type: 'products/delete',
payload: id,
});
}
return (
List of Products
// 引入ProductList 组件，调用了handleDelete方法获取子组件的方法onDelete中传值的id，通过属性值传了表格的数据给子组件。
最后，我们还需要一些初始数据让这个应用 run 起来。编辑 index.js：
initialState初始添加了状态值products。此处只用于静态调试用的数据。
- const app = dva();
+ const app = dva({
+ initialState: {
+ products: [
+ { name: 'dva', id: 1 },
+ { name: 'antd', id: 2 },
+ ],
+ },
+ });刷新浏览器，应该能看到效果。
警告
Warning: Each record in table should have a unique key prop,or set rowKey to an unique primary key.
Warning: Each record in dataSource of table should have a unique key prop, or set rowKey of Table to an unique primary key, see https://u.ant.design/table-row-key
警告原因：表中的每个记录都应该有一个唯一的“key”道具，或者将“rowKey”设置为一个唯一的主键。
解决方法如下：
快捷链接
全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
ESLint问题记录 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~