Dva.js 入门级教学文档-1
- 简介
- 一、介绍
- 1、什么是 dva
- 2、dva 的作用是什么
- 二、环境搭建和使用
- 1、环境搭建
- 2、创建项目
- 3、使用 antd
- 三、全局架构
- 1、index.js(重点)
- (1)、创建 dva 实例
- (2)、装载插件
- (3)、注册 Model
- (4)、配置路由
- (5)、启动应用
- 2、router.js
- 使用
- 解释一下
- 3、components 包
- 4、routes 包
- 5、services 包
- 6、utils 包
- 6、models 包
简介
本次教程共分为两个文档，这是第一部分(一、二、三)。
先给小伙伴们看一下本文的目录架构：
- 一、介绍
- 二、环境搭建和使用
- 三、全局架构
- 四、Model 包下文件架构
- 五、connect 连接 Model 和 Route 页面下的数据
- 六、初始化数据 和 Model 数据比对
- 七、数据显示和操作的流程
- 八、稍复杂概念
一、介绍
1、什么是 dva
React 应用级框架，将 React-Router + Redux + Redux-saga 三个 React 工具库包装在一起，简化了 API，让开发 React 应用更加方便和快捷
简单理解：dva = React-Router + Redux + Redux-saga
2、dva 的作用是什么
二、环境搭建和使用
1、环境搭建
$ npm install dva-cli -g
$ dva -v //查看下是否安装成功，显示 dva 的版本号
dva-cli version 0.9.1
2、创建项目
$ dva new dva-1 //dva-1 为你创建项目的名称
安装成功后，cd 进入 dva-1 目录下，通过 npm start 和 yarn start 启动项目
如果启动报错的话，可以先执行 npm i 或者 yarn
3、使用 antd
在进入到项目目录下后，输入如下命令：
$ npm install antd babel-plugin-import --save
通过 npm 安装 antd 和 babel-plugin-import。babel-plugin-import 是用来按需加载 antd 的脚本和样式的。
注意!!!
请在全局目录下找到 .webpackrc 文件，输入以下代码，使 babel-plugin-import 插件生效。
{
+ "extraBabelPlugins": [
+ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+ ]
}
再次强调：注意上面的插件生效的代码，不输入以上代码，按需加载 antd 插件不生效
三、全局架构
.
├── mock // mock数据文件夹
├── node_modules // 第三方的依赖
├── public // 存放公共public文件的文件夹
├── src // 最重要的文件夹，编写代码都在这个文件夹下
│ ├── assets // 可以放图片等公共资源
│ ├── components // 就是react中的木偶组件
│ ├── models // dva最重要的文件夹，所有的数据交互及逻辑都写在这里
│ ├── routes // 就是react中的智能组件，不要被文件夹名字误导。
│ ├── services // 放请求借口方法的文件夹
│ ├── utils // 自己的工具方法可以放在这边
│ ├── index.css // 入口文件样式
│ ├── index.ejs // ejs模板引擎
│ ├── index.js // 入口文件
│ └── router.js // 项目的路由文件
├── .eslintrc // bower安装目录的配置
├── .editorconfig // 保证代码在不同编辑器可视化的工具
├── .gitignore // git上传时忽略的文件
├── .roadhogrc.js // 项目的配置文件，配置接口转发，css_module等都在这边。
├── .roadhogrc.mock.js // 项目的配置文件
└── package.json // 当前整一个项目的依赖
1、index.js(重点)
import dva from 'dva';
// 1、创建 dva 实例
const app = dva();
// 2、装载插件 (可选)
app.use(require('dva-loading')());
// 3、注册 Model
app.model(require('./models/example'));
// 4、配置路由
app.router(require('./router'));
// 5、启动应用
app.start('#root');
通过上面的代码块，应该就可以很清楚了了解到 Dva 的5个 API
如果还不清楚，没关系，下面我一一讲解：
(1)、创建 dva 实例
用于创建应用，返回 dva 实例，dva 支持多实例，如：
const app = dva({
history,
initialState,
onError,
onAction,
onStateChange,
onReducer,
onEffect,
onHmr,
extraReducers,
extraEnhancers,
});
但是鉴于我只用过 initialState,就拿 initialState 来说。
initialState 为初始化数据，后面会讲解它和 model 中 state 的区别。大家可以在留心观看哈。
每个页面初始化的数据都将放在这里。并且 initialState 对象下的命名方式为：每个 model 的 namespce
如果命名不规范，数据是初始化不到页面上的。
(2)、装载插件
需要任何样式的插件以上面的形式编写代码即可。
如果不需要任何插件，这段代码都可以直接省略。
上面引用的插件是：页面还未加载完毕时显示的 loading 图标，加上了上面那行插件代码，你就不要每个页面都写 showloading 和 hideloading 了。
(3)、注册 Model
你每创建出来的一个 model 都需要来全局 index.js 来注册一下，这样 model 层才能用。
Model 层的代码是重点，会放到下面的第四大点重点讲解。这里只是告诉大家要注册一下。
(4)、配置路由
细心的小伙伴会发现在 index.js 同级目录下有一个 router.js,这里的配置路由就是配置这个页面的东西。下面第2小点马上就讲解，这里只是告诉大家，如何引用配置好的路由。
(5)、启动应用
启动应用不解释。
2、router.js
打开 router.js 你就看到如下的代码：
import IndexPage from './routes/IndexPage';
import HomePage from './routes/HomePage';
<Router history={history}>
<Switch>
<Route path="/" exact component={IndexPage} />
.
.
.
<Route path="/home" exact component={HomePage} />
</Switch>
</Router>
使用
我们每创建出来的一个页面，都需要在这里配置路由。
path:为页面的路径名称,注意：要加上前缀斜杠。命名可以随意，不过一般以创建页面的名字命名，这样比较清楚。
component:为代码最上方导入的页面。
上面我写了一个 home 页面的例子，供大家参考。
解释一下
每个路由器都会创建一个 history 对象，并用其保持追踪当前 location 并在有变化的时候进行重新渲染。
location:是一个含有描述 URL 不同部分属性的对象。
来看一下 Dva官网的解释：这里的路由通常指的是前端路由，由于我们的应用现在通常是单页应用，所以我们需要前端代码来控制路由逻辑，同茶馆浏览器提供的 History API可以监听浏览器url的变化，从而控制路由相关操作。
dva 使用的是 react-router 来控制路由。
小伙伴们如果想深入学习路由这块的内容可以找度娘搜索：react router 学习哈。
3、components 包
一般为我们创建出来的公共组件。
4、routes 包
这里我们可以理解为 pages。你所要显示出来的页面都写在这个下面。
5、services 包
为后台调用服务端接口的包，不做解释。
6、utils 包
这个包可以用来存放一些公共方法。需要使用时，导入 js,直接使用方法即可。
6、models 包
models 包用来存放 所有的 model 文件。
一个完整的 model 文件的架构：
export defalut {
namespace:'',
state:{},
reducers:{},
effects:{},
subscriptions:{},
}