什么是dva.js?

一个elm-style的轻量级的前端数据流利用框架。 基于: React + redux + redux-saga + react-rotuer + fetch。

特点

  • 容易上手,仅6个api
  • elm格调:一个新的概念model,由reducers, effects, subscription 组成
  • 反对HRM
  • 插件零碎:如: 应用dva-loading后,可主动解决loading状态

兼容

IE9及以上

版本

  • dva@2.x(2017-9)(2018-10-26 dva@2.4.1,2019-11-21 dva@2.6.0-beta.19) 【react16.8.4】
  • dva@1.x(2016-9)

依据dvajs的sorrycc的答复:dva@3在打算中,但优先级不高(2019-10的答复)(不晓得是否曾经开始)

疾速上手

装置应用dva-cli

npm install dva-cli -gdva -v # 0.10.1 【官网当初举荐应用: create-umi】dva new dva-demo # 创立新我的项目dva-demo (提醒:曾经被弃用,举荐应用create-umi)cd dva-demo npm start # 启动开发服务器

初始化的我的项目蕴含如下性能:
根本的我的项目初始化目录及文件,开发服务器、构建脚本、数据 mock 服务、代理服务器等。

dva做了什么?

dva提供的性能都在上面代码中实现的:

dva罕用的性能 :

// 新建实例 //(见:dva/src/index.js dva-core/drc/index.js) const app = dva();// 连贯model和ui (见:dva/index.js)import { connect } from 'dva';// 插件,如dva-loading等app.use({});// model app.model(require('./models/example').default)// routerapp.router(require('./router').default);// 启动利用// 基于redux的createStore新建了store, 以及用applyMiddleware来解决redux-saga及其他中间件。app.start('#root');
// app=dva({}) 在dva-core中新建了一个对象const app = {// 将reducers和effects增加namespace为前缀_models: [prefixNamespace({ ...dvaModel })],_store: null,_plugin: plugin,use: plugin.use.bind(plugin),// 将传入的model用其namespace前缀后,存到_models中model,// 启动start,};// 将router存在_router中app.router = function router(router){    app._router = router;};// app.start()app.start = function start(container){   // 解决后面接管到的配置, 而后渲染到container中       if (container) {      render(container, store, app, app._router);    }// 省略...}

参考

  • dvajs指南
  • dva概念

)

  • umijs指南