dva.js介绍

系统管理员 2021-09-19 01:16 383阅读 0赞

## [https://dvajs.com/][https_dvajs.com] ##

# #

## 数据流问题 ##

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

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

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

## [\#][Link 1]目前最流行的数据流方案 ##

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

*  路由： [React-Router][]
 *  架构： [Redux][]
 *  异步操作： [Redux-saga][]

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

## [\#][Link 2]dva 是什么 ##

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

dva = React-Router + Redux + Redux-saga

## [\#][Link 3]dva 应用的最简结构 ##

import dva from 'dva';
    const App = () => <div>Hello dva</div>;
    
    // 创建应用
    const app = dva();
    // 注册视图
    app.router(() => <App />);
    // 启动应用
    app.start('#root');

## [\#][Link 4]数据流图 ##

![hUFIivoOFjVmwNXjjfPE.png][]

## [\#][Link 5]核心概念 ##

*  State：一个对象，保存整个应用状态
 *  View：React 组件构成的视图层
 *  Action：一个对象，描述事件
 *  connect 方法：一个函数，绑定 State 到 View
 *  dispatch 方法：一个函数，发送 Action 到 State

## [\#][Link 6]State 和 View ##

State 是储存数据的地方，收到 Action 以后，会更新数据。

View 就是 React 组件构成的 UI 层，从 State 取数据后，渲染成 HTML 代码。只要 State 有变化，View 就会自动更新。

## [\#][Link 7]Action ##

Action 是用来描述 UI 层事件的一个对象。

{
      type: 'click-submit-button',
      payload: this.form.data
    }

## [\#][Link 8]connect 方法 ##

connect 是一个函数，绑定 State 到 View。

import { connect } from 'dva';
    
    function mapStateToProps(state) {
      return { todos: state.todos };
    }
    connect(mapStateToProps)(App);

connect 方法返回的也是一个 React 组件，通常称为容器组件。因为它是原始 UI 组件的容器，即在外面包了一层 State。

connect 方法传入的第一个参数是 mapStateToProps 函数，mapStateToProps 函数会返回一个对象，用于建立 State 到 Props 的映射关系。

## [\#][Link 9]dispatch 方法 ##

dispatch 是一个函数方法，用来将 Action 发送给 State。

dispatch({
      type: 'click-submit-button',
      payload: this.form.data
    })

dispatch 方法从哪里来？被 connect 的 Component 会自动在 props 中拥有 dispatch 方法。

> connect 的数据从哪里来?

## [\#][Link 10]dva 应用的最简结构（带 model) ##

// 创建应用
    const app = dva();
    
    // 注册 Model
    app.model({
      namespace: 'count',
      state: 0,
      reducers: {
        add(state) { return state + 1 },
      },
      effects: {
        *addAfter1Second(action, { call, put }) {
          yield call(delay, 1000);
          yield put({ type: 'add' });
        },
      },
    });
    
    // 注册视图
    app.router(() => <ConnectedApp />);
    
    // 启动应用
    app.start('#root');

## [\#][Link 11] ##

[https_dvajs.com]: https://dvajs.com/
[Redux]: https://github.com/reactjs/redux
[Mobx]: https://github.com/mobxjs/mobx
[Link 1]: https://dvajs.com/guide/introduce-class.html#%E7%9B%AE%E5%89%8D%E6%9C%80%E6%B5%81%E8%A1%8C%E7%9A%84%E6%95%B0%E6%8D%AE%E6%B5%81%E6%96%B9%E6%A1%88
[React-Router]: https://github.com/ReactTraining/react-router/tree/v2.8.1
[Redux-saga]: https://github.com/yelouafi/redux-saga
[Link 2]: https://dvajs.com/guide/introduce-class.html#dva-%E6%98%AF%E4%BB%80%E4%B9%88
[Link 3]: https://dvajs.com/guide/introduce-class.html#dva-%E5%BA%94%E7%94%A8%E7%9A%84%E6%9C%80%E7%AE%80%E7%BB%93%E6%9E%84
[Link 4]: https://dvajs.com/guide/introduce-class.html#%E6%95%B0%E6%8D%AE%E6%B5%81%E5%9B%BE
[hUFIivoOFjVmwNXjjfPE.png]: /images/20210812/e2f532272f1247479b19f23b2711a31c.png
[Link 5]: https://dvajs.com/guide/introduce-class.html#%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5
[Link 6]: https://dvajs.com/guide/introduce-class.html#state-%E5%92%8C-view
[Link 7]: https://dvajs.com/guide/introduce-class.html#action
[Link 8]: https://dvajs.com/guide/introduce-class.html#connect-%E6%96%B9%E6%B3%95
[Link 9]: https://dvajs.com/guide/introduce-class.html#dispatch-%E6%96%B9%E6%B3%95
[Link 10]: https://dvajs.com/guide/introduce-class.html#dva-%E5%BA%94%E7%94%A8%E7%9A%84%E6%9C%80%E7%AE%80%E7%BB%93%E6%9E%84%EF%BC%88%E5%B8%A6-model
[Link 11]: https://dvajs.com/guide/introduce-class.html#%E6%95%B0%E6%8D%AE%E6%B5%81%E5%9B%BE-1