React最佳实践系列 —— Dva快速入门

作者： DocWhite白先生

一. 门槛

React 技术栈

在进行 dva框架的实践练习之前，请确保对 React技术栈有比较全面的了解，掌握必要的React基础。 dva框架本质上是 蚂蚁金服基于 React技术栈封装的一套框架，特点在于免去了新手手动搭建完整开发环境（Redux，React-Router等的安装）的麻烦，一键安装即可项目开发，虽然降低了上手难度，但不可避免的是反而使扩展成本变得更高（如需要单独配置特定的webpack配置项，而这些配置项不在roadhog可配置范围时），也不必担忧，系统复杂度不高的web应用使用dva框架开发，使用封装好的配置项已绰绰有余。
涉及的知识点：

1. ES6
2. React + React-Router + Redux + Redux-saga
3. webpack + antd(UI组件库)webpack + antd(UI组件库)

二. Hello World

不废话，以一个简单的Hello World开始dva最佳实践。

准备工作

1. dva-cli。

npm install -g dva-cli     		  // 全局安装 dva命令行工具

2. 利用dva-cli创建空的dva项目

dva new dva-best-practice    	  // 执行该命令将会在当前目录创建 dva-best-practice 目录，包含有初始化的项目文件。

3. 启动 dva项目

cd dva-best-practice 
npm start  						  // 在执行 dva new时已经自动安装好项目初始化时所需要的npm依赖包

这时候在浏览器 http://localhost:8000 已经能看到一个官方例子的 Hello World。

三. 一个简单H5

源码github地址
Hello World只是万里长征第一步，接下来以一个简单的以dva框架制作的H5例子，直接打通学习dva的障碍。（悟性高以及前端基础好的同学可以直接通过查看dva官方文档学习dva的使用技巧） 。
在进行这个简单H5教程之前，先谈谈最常见的H5交互模式。最常见的两种就是全屏滚动模式和带有进出场动画的滚动模式。先说全屏滚动模式，这种模式的无疑是在上古时代 jQuery + fullpage 流传下来的经典H5制作模式，之所以说它很经典，是因为他能勾起无数前端在没有React，vue，Angular之前，最原汁原味的 JavaScript面向对象编程 记忆。而第二种相对简单，以wow.js + animate.css就能轻松实现，这种模式对js的要求相对较低，只需通过配置HTML标签的class，特定的自定义标签属性，就能实现很酷炫的H5网页。

为方便各位同学快速学习使用dva，本例只以相对更简单的随滚动带进出场动画的滚动模式。同时配合使用蚂蚁金服开源的动效库Ant Motion和ui组件库antd。

1. 安装 antd ui组件库

npm install antd babel-plugin-import --save
// 安装 babel-plugin-import 是为了能够动态加载仅仅被引入的 antd组件所依赖的样式，而非全部引入。 

同时需要在项目根目录下的 .webpackrc中添加如下配置，使webpack引入该babel-plugin，了解webpack配置的同学对此应该很清楚。

{
+  "extraBabelPlugins": [
+    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+  ]
}

roadhog的所有可配置项传送门

2. 在开始之前，先了解dva的目录结构。

├── /dist/                                         // 打包目标目录
├── /src/                                          // 项目源码目录
│ ├── /components/                                 // 通用组件目录
│ ├── /models/                                     // 数据模型 
│ 				└── example.js                     // model example, dva的模型是一个集合了redux中 reducer 和 store，异步action等的抽象概念。
│ ├── /services/                                   // 存放 服务相关组件或函数
│ ├── /mock/                                       // 模拟数据mock
│ ├── /routes/                                     // 与路由对应的页面
│ 				└── page.js                        // 与路由规则匹配的页面组件
│ ├── index.css                                    // 项目入口css
│ ├── index.js                                     // 项目入口，手动配置开发时候开发的模块
│ └── router.js                                    // 项目路由 （默认使用React-Router中的HashRouter，所以你会看到URL最后有一个#号，可以通过使用dva-no-router禁用react-router）
├── package.json                                   // 项目依赖信息
├── .eslintrc                                      //  Eslint配置
├── .gitignore                                     //  git 忽略文件以及目录
└── .webpackrc                                     //  roadhog配置
└── README.md                                      //  开发文档

dva最有趣的地方在于，相比于使用create-react-app创建 react项目需要自行搭配使用redux和router，dva免去了这个过程，而且为了让新手更容易使用redux + router，将使用相对复杂的redux合并到独特的 model中（一切reducer和异步action以及订阅subscription操作）。对开发者而言只需要在页面组件中利用connect将页面组件和redux中的store连接起来，方便新手直观的了解和使用redux，让开发者更专注于业务逻辑的操作（在页面中发起action: dispatch action），在model中接收操作对应action的reducer，甚至为了方便新手实现异步action（通常用在向服务器发起获取数据的请求），集成了redux-saga，只需要了解ES6 generator函数的基本用法，就能轻松完成整改异步action设计的所有操作。

3. 关于model使用的简单例子：

使用model牢记3个步骤：

（1）将 model 注册进入dva实例。

（2）在页面中使用 connect函数连接 redux的store和页面组件，将store中的state当做props传递进入页面组件。并在组件挂载成功后发起异步请求获取远程数据。

（3）编写处理这个action对应的reducer和发起异步请求的异步action。

这部完成后，在页面中已经可以看到返回的数据结果了。
结果如下：

4. 进入主题

了解完最重要model的基本使用方法，开始进入制作一个跟服务器有简单通信的H5，例子使用免费图片资源分享网站 Unsplash 的接口获取图片资源。
下面开始编写对应的React组件。

（1）改造 App.js和模型example.js， 构建合适的H5页面结构

上一步完成我们已经完成了最重要的一环获取服务端数据，接下来改造这个简单H5的页面结构，设置其包括首屏在内公有5个页面。所以这5个页面每个页面的宽度和高度必然都是100vh，100vw。

对应的model中异步action，fetch也必须改写。

（2）完成效果如下

到此，一个非常简单粗糙的H5页面的结构已经完成，至于更复杂的应用，需要自己的大量练习掌握。

四. Overview

• dva框架对于刚刚接触React技术栈的同学来说确实能够很方便的快速上手。
• 相反的，简单上手必然导致了基础不扎实的同学忽略了React技术栈的完整学习过程，例如如何通过修改webpack配置以满足项目的对开发环境的需求？是否真正理解Redux的每一个环节背后的意义？ 异步action为什么能将异步操作转同步（如上面例子中将图片加载的请求同步化）？这背后又是怎么实现的（Generator函数和Promise的相爱相杀）？
• 本篇文章仅仅只是介绍了dva框架对于单一页面开发的简单实用，并未涉及多页面和路由。接下来的文章会介绍更多关于dva框架的干货。