蚂蚁金服dva框架的使用说明（一）

什么是dva

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架，这是蚂蚁金服官方对于dva框架的介绍。尽管官方描述的很简单，但是对于刚入职的萌新程序员（比如我）来说，要在拿到公司实际工程项目时面对大量的代码的同时快速上手dva还是有一定难度的。同时这也是我第一次写博客分享我在工作中学到的知识，如有错误，请大佬们果断在评论中指出，我也会积极改进，共同进步。

经过大约一个半月的实习之后，我对该框架有了一定的理解，dva是在redux和redux-saga的基础上进行了简单的封装，原来在redux中处理副作用需要引入中间件redux-thunks或者redux-saga，这样使项目文件结构看上去十分复杂，也不方便。为了优化前端开发体验，dva将异步操作放在了services层中进行处理，同时将redux中的store和reducers整合到了model层进行处理。

开始使用dva

首先dva是react生态圈中的一部分，在本文中学习dva即默认了读者已经学习了解过redux的开发模式。

脚手架的安装

在使用dva时推荐使用官方的脚手架工具来创建dva项目。在安装之前要保证已经安装了node能够使用npm工具，并且确保dva-cli版本是 0.9.1 及以上。

$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1

创建dva项目

安装完脚手架工具之后就能开始创建我们的dva项目了。

$ dva new demo01

运行并进入页面

创建完项目之后进入对应目录，输入指令 npm start 就能运行dva项目了，若要中止项目运行，输入 ctrl+c 即可。

$ cd demo01
$ npm start

在运行指令之后浏览器会自动打开并进入dva的首页。

或者在浏览器中输入 localhost:8000 也能够跳转到该页面。

dva项目的目录结构

┌ mock
├── .gitkeep
├ node_modules
├ public
├── index.html
├ src
├── assets --------------------------------------------------------------存放图片等文件
├── components ------------------------------------------------------存放可复用组件
├── models -------相当于redux中的store和reducers 主要用于处理业务逻辑
├── routes --------------------------------------------------------存放用于跳转的页面
├── services --------------------------------------服务层 一般在这里处理异步请求
├── utils -----------------------------------------------此处存放处理异步操作的函数
├ index.css
├ index.js
├ routers.js
├ .editorconfig
├ .eslintrc
├ .gitignore
├ .roadhog.mock.js
├ .webpackrc
└ package.json

其中src文件夹下的文件是我们的主要编辑区，大部分页面的编写以及业务逻辑的处理都在该区域进行处理。index.js是dva的主入口文件，routers.js编写路由。dva中也有mock模块，能够使我们在没有接入后台的情况下模拟数据进行调试。一般dva能够胜任企业级大型项目的开发，实际开发环境下的代码以及目录结构也比初始的项目要复杂的多。

创建我们的hello dva！

本人使用vscode编写代码，过段时间打算入手一台macbook进行前端开发工作，故现在windows环境下进行开发。vscode用过都说好，当然使用如webstorm等工具进行开发也是没有问题的，根据自己喜好进行选择就可。首先进入routes文件夹下的IndexPage.js，这是初始页面的入口文件，代码如下

import React from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';

function IndexPage() {
  return (
    <div className={styles.normal}>
      <h1 className={styles.title}>Yay! Welcome to dva!</h1>
      <div className={styles.welcome} />
      <ul className={styles.list}>
        <li>To get started, edit <code>src/index.js</code> and save to reload.</li>
        <li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li>
      </ul>
    </div>
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

同文件夹下还有一个IndexPage.css文件，当然我们现在不需要他，果断删除就可以了，之后删去return中的代码，修改为

import React from 'react';
import { connect } from 'dva';

function IndexPage() {
  return (
    <div>
      <h1>Hello dva!</h1>
    </div>
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

之后我们的页面运行起来就变成了这样

这时我们的Hello dva!就完成了。今天就先更新到这，下周我将利用空余时间使用dva制作一个经典的todolist程序来演示dva框架的用法。文中npm指令引用自: https://dvajs.com/ 如果在本文中有看不懂或者不理解的地方也可去官网了解更详细的信息。

这是我第一次写博客分享我在工作中学到的知识，如有错误，欢迎大佬们果断在评论中指出，我也会积极改进，共同进步。