react之dva框架的使用

dva框架的中文官网dva中文教程

在介绍dva之前，推荐一款网页编程工具，codesandbox，在线编写工具，前提要网速要快，这样就不用在内存中下载模块了，随用随时下载模块，缺点就是网速慢时界面不好

使用

$ npm install dva-cli -g//下载全局脚手架
$ dva -v //脚手架版本
dva-cli version 0.9.2
$ dva new dva-demo &&cd dva-demo &&npm start //初始化dva项目

初始化之后的基本结构

其实真正起作用，即比较重要的就只有public和src这两个文件夹，其他的知识一些配置项而已，而主入口也就是src下的index.js ，而且src下一些内容也需要架构师搭起来，如图所示则是基本的一些功能而已

.webpackrc是用来配置打包，可以配置less变量，打包路径等等，详见.webpackrc配置文档

index.js的内容：（dva五部曲）

import dva from "dva";
import { history } from "dva/router";
import router from "./router";
import model from "./models/common";
//1，创建dva实例
const app = dva();
//2，装载插件
app.use({})
//3,注册model
app.model(model);
//4,配置路由
app.router(router);
//5，启动应用
app.start("#root");

如果不需要插件、模型、路由中的一个或多个可以相应注释掉2，3，4步，也就是说1、5步骤是必不可少的

2、插件，一个dva-loading插件，使用方法https://www.npmjs.com/package/dva-loading

即给路由组件的props添加一个loading对象，可以控制，loading加载，没有用过，一般都是自定义loading样式

3、model，说实话就是redux的各个功能集合，可以说dva的精华所在，而且dva的model感觉十分新颖，简洁，model也有5部分，namespce、state、reducers、effects、subscriptions，通过命名即可访问到

import delay from "../utils/delay";
import key from "keymaster";
export default {
  //model总共五部分组成
  namespace: "common",
  state: {
    //初始化的数据
  },
  reducers: {
    //相当于redux的reducer
    
  },
  effects: {
    //redux进行异步处理的中间件（redux-saga原理）
  },
  subscriptions: {
    //订阅器（例如某个键盘键按下执行dispatch）,管理所有的组件，不是单一组件
  }
};

4、router，路由，就是配置一个路由表，用的是react-router-dom，即router4，二级路由在组件中配置即可

import { Router, Route, Switch } from "dva/router";
import React from "react";
import index from "./components/index";
import age from "./components/age";
export default ({ history }) => {
  return (
    
      
        
        
      
    
  );
};

另外，dva还封装了一些方法，dva-fetch就是fetch，发起ajax请求的方法；

dva-dynamic是用于动态加载路由组件的，优化性能，本来我们路由组件在路由表中是一开始就加载的，而dynamic是用来动态加载的，即在配置路由的时候加载

import { Router, Switch, Route } from 'dva/router'
import dynamic from 'dva/dynamic'

function RouterConfig({ history, app }) {
  const IndexPage = dynamic({
    app,
    component: () => import('./routes/IndexPage'),
  })

  const Users = dynamic({
    app,
    models: () => [import('./models/users')],
    component: () => import('./routes/Users'),
  })

  return (
    
      
        
        
      
    
  )
}

export default RouterConfig

opts

• app: dva 实例，加载 models 时需要
• models: 返回 Promise 数组的函数，Promise 返回 dva model
• component：返回 Promise 的函数，Promise 返回 React Component

dva-saga,主要用于model中effects的使用，其实就是基于redux-saga中间件的封装 ，而redux-saga是基于generator函数的，所以比redux-thunk更难理解一些，基本使用：https://redux-saga-in-chinese.js.org/docs/api/index.html

*add1(action, { call, put }) {
    yield put({ type: "add" });
    yield call(delay, 1000);
    yield put({ type: "reduce" });
}

Generator 函数的作用是可以暂停执行，再次执行的时候从上次暂停的地方继续执行。Effect 是一个简单的对象，该对象包含了一些给 middleware 解释执行的信息。你可以通过使用 effects API 如 fork，call，take，put，cancel 等来创建 Effect。其实主要用到的也就使yield，call，put这三个，yield是generator函数中的，意思思，暂停执行，put是用来传到reducer当中的，相当于dispatch，type对应reducers中的type另外要想要阻塞执行，不使用回调函数，必须使用yield！！！！

而call则是调用其他异步方法，第一个是方法名，第二个是传的参数，而yield是自动dva封装之后执行完上一步自动执行的，即相当于es8新提供async函数中的await，这种比redux-thunk好处就是没有许多大括号的回调函数，待上一次promise结束后再执行该函数！