本文主要是介绍一、dva基础，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
^2.4.1。简单说这东西就是用来定义model，然后把model中的数据和页面进行交互的。
model的功能主要有两个，第一个是维护一个全局的state，第二个是发送异步请求。
model的state里面存放的数据应该是所有组件全局共享的数据，组件局部的数据还是要放在组件自己的state里面。
要使用dispatch，connect是必要的，使用了connect才可以使用dispath，但是connect的return可以不返回值。如果需要发送异步请求之后，改变自己组件里面局部的state值，就在dispatch的action里面传一个callback()过去，在callback()里面使用this.setState(),就行了。
一、简介
命名由来：D.Va拥有一部强大的机甲，它具有两台全自动的近距离聚变机炮、可以使机甲飞跃敌人或障碍物的推进器、 还有可以抵御来自正面的远程攻击的防御矩阵。
dva 首先是一个基于
redux和redux-saga(异步操作) 的数据流方案，然后为了简化开发体验，dva 还额外内置了react-router和fetch，所以也可以理解为一个轻量级的应用框架
redux-saga: 具体到dva中就是Effect的引入。redux-saga 是一个 redux 中间件，能访问完整的 redux state，也可以 dispatch redux action
dva仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API
elm 概念，通过 reducers, effects 和 subscriptions 组织 model
二、快速上手
1、安装dva-cli
安装：
npm install dva-cli -g， dva -v,确保版本是 0.9.1 或以上
2、创建新应用
创建：
dva new dva-quickstart,这会创建 dva-quickstart 目录，包含项目初始化目录和文件，并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能
设置端口号：
"start": "set PORT=3001&&roadhog server",在package.json中配置
3、使用 antd
安装:
$ npm install antd babel-plugin-import --save, babel-plugin-import 是用来按需加载 antd 的脚本和样式的
编辑 .webpackrc，使 babel-plugin-import 插件生效
{
+ "extraBabelPlugins": [
+ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+ ]
}
4、定义路由(构建应用第一步)
一般是在config里面去编写。这里定义路由是可以用umi的，主要就是让路由对应到下面的component。
import React from 'react';
const Products = (props) => (<h2>List of Products</h2>);
export default Products;
添加路由信息到路由表，编辑 router.js。然后在浏览器里打开 http://localhost:8000/#/products ，你应该能看到前面定义的
<h2>标签
+ import Products from './routes/Products';
+ <Route path="/products" exact component={Products} />
5、编写 UI Component(构建应用第二步)
在page文件夹里面去创建当前应用的component。新建 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 (<Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}><Button>Delete</Button></Popconfirm>);},}];return (<Table dataSource={products} columns={columns}/>);
};
ProductList.propTypes = {onDelete: PropTypes.func.isRequired,products: PropTypes.array.isRequired,};
export default ProductList;
这篇关于一、dva基础的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
