乐趣区

关于javascript:dvajs简明手册

什么是 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 -g
dva -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)

// router
app.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 指南
退出移动版