Dva学习

Dva

Dva 介绍

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

特性

• 易学易用，仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API
• elm 概念，通过 reducers, effects 和 subscriptions 组织 model
• 插件机制，比如 dva-loading 可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading
• 支持 HMR，基于 babel-plugin-dva-hmr 实现 components、routes 和 models 的 HMR

为什么要学习Dva

React 没有解决的问题

React 本身只是一个 DOM 的抽象层，使用组件构建虚拟 DOM。

如果开发大应用，还需要解决一个问题。

• 通信：组件之间如何通信？
• 数据流：数据如何和视图串联起来？路由和数据如何绑定？如何编写异步逻辑？等等

通信问题

组件会发生三种通信。

• 向子组件发消息
• 向父组件发消息
• 向其他组件发消息

React 只提供了一种通信手段：传参。对于大应用，很不方便。

数据流问题

目前流行的数据流方案有：

• Flux，单向数据流方案，以 Redux 为代表
• Reactive，响应式数据流方案，以 Mobx 为代表
• 其他，比如 rxjs 等

到底哪一种架构最合适 React ？

目前最流行的数据流方案

截止 2017.1，最流行的社区 React 应用架构方案如下。

• 路由： React-Router
• 架构： Redux
• 异步操作： Redux-saga

缺点：要引入多个库，项目结构复杂。

dva 是什么

dva 是体验技术部开发的 React 应用框架，将上面三个 React 工具库包装在一起，简化了 API，让开发 React 应用更加方便和快捷。

dva = React-Router + Redux + Redux-saga

Dva 概念

数据流向

数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State，所以在 dva 中，数据流向非常清晰简明，并且思路基本跟开源社区保持一致（也是来自于开源社区）。

总结：视图通过connect连接到状态，视图通过dispatch发起一个action去改变状态，状态发生变化视图重新渲染。

数据的改变发生通常是通过:

• 用户交互行为（用户点击按钮等）
• 浏览器行为（如路由跳转等）触发的

当此类行为会改变数据的时候，可以通过 dispatch 发起一个 action

• 如果是同步行为，会将action发送给 Reducer，直接通过 Reducer 改变 State，然后通过 connect 重新渲染组件。
• 如果是异步行为，会将action发送给 Effect，一般是从服务器请求数据，服务器返回数据之后，Effect 会发送相应的 action 给 reducer，由唯一能改变state 的 reducer 改变 State ，然后通过connect重新渲染组件。

6个API

• app = dva(Opts)
• app.use(Hooks)
• app.models(ModelObject)
• app.unmodel(Namespace)
• app.router(Function)
• app.start([HTMLElement])

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')