前端技术栈(五)：dva，美貌与智慧并存

经过前面四篇的铺垫，终于轮到我们的主角dva了，就是下面这个美女：

先擦一擦哈喇子，我们来介绍一下，dva出自于暴雪出品的一款游戏《守望先锋》，援引官方的角色介绍：

D.Va拥有一部强大的机甲，它具有两台全自动的近距离聚变机炮、可以使机甲飞跃敌人或障碍物的推进器、 还有可以抵御来自正面的远程攻击的防御矩阵。

然后呢，蚂蚁金服的一位架构师sorrycc很迷这位美女，正巧刚开发了一款前端框架没有名字，作为一个向女神献礼的项目，dva框架就此诞生。

实际上，dva只是基于现有开源框架的一层轻量封装，并没有引入任何新概念：

• React：管理View
• react-router：管理路由
• Redux：管理Model
• redux-saga：管理异步调用（副作用）

再来看一下框架图，是不是都是熟悉的配方，熟悉的味道？

当然，也不是完全没有新东西，其中有一个Subscription好像之前没有见过，这是一种数据源订阅机制，数据源可以是键盘输入事件、路由变化、服务器的 websocket 连接等等。你可以在数据发生变化时收到通知，并派发必要的action。

实际上，dva是一个整合者，它的目标是解决“Code is everywhere”问题。当我们同时使用上面这些框架时，一般会呈现下面这种类型的文件结构：

+ src
  + sagas
    - user.js
  + reducers
    - user.js
  + actions
    - user.js

然后，当我们需要实现一个功能时，就需要在这几个文件之间来回切换。。。

另一方面，dva还试图隐藏一些经常重复书写的routine代码，让开发者能够更加专注于业务逻辑。比如我们写一个应用的入口文件，需要做下面这么多事情：

• 配置middleware
• 创建store
• 添加<Provider>绑定
• 创建watcher saga和root saga
• 启动saga
• 。。。

实际上，可能95%以上的项目中这些代码都是一模一样的，我们不需要每次都花费时间来重新写一遍这些代码。

下面开始正式介绍dva 1.0相关的内容，dva 2.0做了一些优化升级，后面专门有一节介绍具体变化。

8个概念

其实基本都是前面几篇文章里介绍过的概念：

• state：也就是全局