dvajs

Dva 是什么

dva 首先是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva 还额外内置了react-router和fetch，所以也可以理解为一个轻量级的应用框架。

Dva 的适用场景

• 业务场景：组件间通信多，业务复杂，需要引入状态管理的项目
• 技术场景：使用 React Class Component 写的项目

Dva 核心概念

基于 Redux 理念的数据流向。 用户的交互或浏览器行为通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State，如果是异步行为（可以称为副作用）会先触发 Effects 然后流向 Reducers 最终改变 State。

基于 Redux 的基本概念。包括：

• State 数据，通常为一个 JavaScript 对象，操作的时候每次都要当作不可变数据（immutable data）来对待，保证每次都是全新对象，没有引用关系，这样才能保证 State 的独立性，便于测试和追踪变化。
• Action 行为，一个普通 JavaScript 对象，它是改变 State 的唯一途径。
• dispatch，一个用于触发 action 改变 State 的函数。
• Reducer 描述如何改变数据的纯函数，接受两个参数：已有结果和 action 传入的数据，通过运算得到新的 state。
• Effects（Side Effects） 副作用，常见的表现为异步操作。dva 为了控制副作用的操作，底层引入了redux-sagas做异步流程控制，由于采用了generator 的相关概念，所以将异步转成同步写法，从而将 effects 转为纯函数。
• Connect 一个函数，绑定 State 到 View

其他概念

• Subscription，订阅，从源头获取数据，然后根据条件 dispatch 需要的 action，概念来源于elm。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。
• Router，前端路由，dva 实例提供了 router 方法来控制路由，使用的是react-router。
• Route Components，跟数据逻辑无关的组件。通常需要 connect Model 的组件都是 Route Components，组织在/routes/目录下，而/components/目录下则是纯组件（Presentational Components，详见组件设计方法）

dva 做了三件比较重要的事情：

1. 代理 router 和 start 方法，实例化 app 对象
2. 调用 dva-core 的 start 方法，同时渲染视图
3. 使用 react-redux 完成了 react 到 redux 的连接。