本文主要是介绍一下阿里巴巴的三大集成框架，之所以说是集成因为它并不是从零起步，而是站在巨人的肩膀上，作为一个集成性质的框架来使用，并且在市场上也获得了不错的口碑。

 

DvaJS

 

大概两年前第一次接触DvaJS，给我留下了非常好的印象，当时唯一的缺憾就是文档太差了。它名字的来源是《守望先锋》游戏里的英雄，作者（们）明显是[死]肥宅、萝莉控、二次元爱好者大叔。

 

我们知道Redux是一个很规范的框架，众所周知的三大原则（约束、限制）么。因此当你要使用Redux的时候需要

 

定义Actions

 

定义Reducers

 

准备中间件

 

创建Store

 

connect连接起Store和各个组件

 

这还没算入reselect优化、整合react-router这些工作，可见Redux这个交际花是一个侵入性很强的全家桶。往往一行业务代码都没有写，你就陷于代码结构和细节而不可自拔了。因此非常有必要来一个脚手架一样的工具，来加快我们的开发准备工作，简化使用。

 

如果你认可我刚才絮叨的阐述，那么很可能适合DvaJS的使用场景。简单的说

 

 DvaJS = react + redux + redux-saga + react-router

 

而且它的API和配置项也非常简单，当然带给你便捷高效的同时，你会牺牲一些自由，你必须顺着DvaJS的毛来捋，代码组织和API都必须根据它的要求来安排。

 

官方提供了CLI工具，用它可以快速生成工程脚手架，这里安利一下我的关于制作CLI工具的文章

 

AnLi：那些制作CLI可能用到的轮子

 

37 赞同 · 1 评论文章

 

使用CLI生成完后的目录结构如下，很清晰

 

 + assets 静态资源

 

 + components 定义显示组件

 

 + models 定义model

 

 + routes 定义路由组件

 

 + services 定义service

 

 + utils 定义util

 

 index.css 

 

 index.js 组装

 

 router.js 定义路由

 

components 用来定义显示组件，没有什么特殊的话，都可以是函数组件，特别是现在有了Hooks加持的函数组件，更为强大

 

models 用来定义模型，看着叫模型，其实背地里还干了Reducer的活，在Redux里没有Model这个概念，而是通过Reducer来间接的包含了Model，但在DvaJS里把Model推向了前台，基于Model来组织代码

 

routes 用来定义路由组件，一般跟实际的路由对应，而众所周知的Redux的connect操作对象也是它

 

services / utils 用来定义工程中常见的服务和util

 

在index.js里，非常简单

 

 import dva from 'dva';

 

 import './index.css';

 

 ​

 

 // 1. Initialize

 

 const app = dva（）;

 

 ​

 

 // 2. Plugins

 

 // app.use（{}）;

 

 ​

 

 // 3. Model

 

 // app.model（require（'./models/example'）。default）;

 

 ​

 

 // 4. Router

 

 app.router（require（'./router'）。default）;

 

 ​

 

 // 5. Start

 

 app.start（'#root'）;

 

一共就五步，真正掺入内涵的也就三步，这三步还包括了不一定会使用到的插件。

 

没有比这张图更好地解释DvaJS是如何整合Redux全家桶的了，关于两者之间的对应，其实只要写一个Demo，然后你品，你细品一下就能理解。