19 - Dva框架基础

基本概述

Dva特征

1. 框架性：
   1. 是完整的应用开发框架，而不是针对某个特定问题的插件
   2. 自动集成了redux，router等常用插件，并进行良好的集成配置
   3. 可以直接在框架基础上完成业务开发工作
2. 规范性：
   1. 定义了项目中各类文件的物理组织形式
   2. 定义了各个部件在项目的逻辑结合方式
   3. 定义了数据和页面的访问与使用方式
3. 简化性：
   1. 对集成的多个插件进行了二次封装，简化直接使用原生插件的操作过程

与create-react-app脚手架对比

1. 默认集成更多更常用的插件
2. 更规范的项目文件组织形式
3. 更便利的插件使用接口

项目文件结构说明

1. mock[fold]: 模拟数据文件存放路径
2. src/assets[fold]: 图片等附件文件存放路径
3. src/componenets[fold]: 功能组件存放路径，通常一个功能组件是一个子文件夹里边包含构成组件jsx，css以及js文件
4. src/models[fold]: 数据模型文件
5. src/routes[fold]: 容器组件存放路径，通常一个容器组件是一个子文件夹里边包含构成组件jsx，css以及js文件
6. src/service[fold]: 数据模型调用的逻辑层方法存放路径，如网络请求逻辑代码，业务处理逻辑代码
7. src/utils[fold]: 通用工具函数存放路径，如网络请求帮助类，字符串处理帮助类等
8. src/index.css: 主页面样式文件
9. src/index.js:
   1. 程序运行的入口
   2. model、路由信息以及其他信息与主程序的集成关系配置文件，类似manifest.xml文件
10. src/router.js：主页面的路由表
11. roadhogrc.mock.js: 模拟数据集成配置文件

dva概念关系图

注意事项

1. 严格意义上，功能组件与model没有逻辑上的一一对应关系或者结构上的集成/组合关系
2. 功能组件与model只有消息传递的通讯关系，即：
   1. 功能组件将页面数据和操作请求分发给指定model
   2. 功能组件从指定顶model中获得数据并进行UI展示

dva开发设计要求

主程序与容器组件路由挂接

1. 主页面的html有且只有个一个根html元素
2. 通过配置路由实现主界面中页面的切换，（实质是容器组件的条件加载）

容器组件与功能组件分离

1. 容器组件向上与路由表对应实现页面切换
2. 容器组件向下与功能组件组合实现功能的集成
3. 一般情况下容器组件，自身不带有状态数据（state），状态数据统一交给redux空间中间models管理
4. 一般情况下容器组件，自身不带有业务逻辑操作或交互监听函数，具体的业务逻辑操作推迟到功能组件中实现

功能组件与Model分离

1. 功能组件对外提供特定UI展示结果，包括html元素结构和css样式等
2. 功能组件自身监听各个子元素的响应事件，如button-clicked，form-submit
3. 功能组件自身不含状态数据（state），状态数据统一交给redux空间中间models管理
4. 功能组件自身的监听函数，不应改带有业务逻辑性，只需要考虑将页面收集的参数（数据或操作指令）合理、合规、合时地传递给models
5. 功能组件需要负责将models中对应的数据正确地渲染到UI中

Model与基础操作分离

1. 所有的models都应该受到redux统一管理，而不应该与组件发生直接关系
2. models中必须包含命名空间（namespace），即当前model存放在redux空间中的变量名，也是外部访问reducer，effect的限定
3. models中应该包含内部状态数据（state），即当前models要管理操作的数据，类似OOP中的成员变量
4. models中应该包含转发处理器（reducer），即接收处理并转发由功能组件传来的数据和操作指令
5. models中可以包括副作用器（effect），用于处理异步数据操作
6. models中可以包括监听器（subscriptions），监听全局事件并进行相应处理，如页面缩放，键盘输入等
7. models中的reducer，subscriptions一般情况下只进行简单的state更新操作，
   1. 复杂的业务逻辑建议推迟到servivce中实现
   2. 固定的调用过程建议推迟到utils中实现
8. models中的effect，一般情况下只是执行基本异步操作和调用对应的reducer方法
   1. 复杂的业务逻辑应在对应的reducer内部实现
   2. 固定的调用过程建议推迟到utils中实现

脚手架安装与使用

基本使用

安装脚手架项目

npm install dva-cli -g //全局安装脚手架

dva -v //查看当前dva版本号

创建空白项目

PS E:\Space_Web> dva new 11-hello-dva //在指定路径下创建一个名为11-hello-dva的项目（文件夹形式）

[注意] 对于版本高于0.10.1的dva框架，在构建空白项目时，npm会报错说dva过时，建议改用umi框架。此问题可以忽略，继续构建

dva-cli is deprecated, please use create-umi instead, checkout https://umijs.org/guide/create-umi-app.html for detail.
如果你是蚂蚁金服内部用户，请使用 bigfish 创建项目，详见 https://bigfish.alipay.com/ 。

运行项目

npm start 

1. 调试过程中支持热更新，修改代码后不用重新启动项目
2. 调试插件不是webapppack，控制台显示，调试项目地址可能与传统react项目不同

打包项目

nmp build

1. 打包完成后会在项目文件中生成dist文件夹
2. dist文件夹的网页内容必须在静态服务器中才可正常加载

集成AntD

1. 安装antD 和 babel插件

npm install antd babel-plugin-import --save

2. 配置集成：修改项目中的.webpackrc文件，修改结果如下

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