dva的用法_(入门)手把手带你更简单的使用dva

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

特性

易学易用，仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API

elm 概念，通过 reducers, effects 和 subscriptions 组织 model

插件机制，比如 dva-loading 可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading

支持 HMR，基于 babel-plugin-dva-hmr 实现 components、routes 和 models 的 HMR

前言

我的个人理解:dva的核心其实是 saga的封装,将action，reducer等等全部引入到model中。

过多的废话也就不再阐述了，欲知详情，请看官网，本文的目的就是快速开始，让一个拥有react+redux基础的人可以快速使用dva.js

"深入"

配置环境安装依赖之类的就不多说了，请看官方文档

dva new dva-quickstart

我们得到初始项目，目录结构如下:

接下里将会逐个目录解释,请注意看注释

入口文件 index.js

import dva from 'dva'; //引入依赖

import './index.css';

// 1. Initialize

const app = dva(); //初始化 dva应用

// 2. Plugins

// app.use({}); //使用中间件

// 3. Model

// app.model(require('./models/example').default); // 加载model层 (后面详细解释model)

// 4. Router

app.router(require('./router').default); // 引入router

// 5. Start

app.start('#root'); // 挂载dva应用

基本上就是这样，多余的没什么好说的

路由匹配 router.js

import React from 'react';

import { Router, Route, Switch } from 'dva/router'; // 引入 router，用的就是 react-router

import IndexPage from './routes/IndexPage'; // 引入路由绑定的高阶组件

// 按照从上到下的顺序开始匹配url规则，匹配到了就是展示对应的组件view