初涉DVA

前言

最近在项目的开发过程当中，接触了DVA。这个相对来讲新鲜的React框架，它将一系列的React项目有关的库进行了一个打包以及封装，提供了一套它本身的API，方便开发者使用。同时，它基于Redux提供了一整套的数据流解决方案，对那些苦苦纠缠于状态管理的开发者而言，是一个不错的选择。若是你对个人文章感兴趣的话，欢迎关注个人github博客。

正文

因为在项目中是初次尝试使用dva这个框架，因此，使用上面大多都是基本的。下面是一些使用方面的心得。

首先，在dva框架中，有一个model的概念。这个有些相似之前的MVC框架的概念，Model做为一类模型，管理一些内部的state状态，以及一系列的行为。咱们能够经过下面的例子来进行分析，以下：

export default {
  namespace: 'user',

  state: {
    userInfo: {},
    companyCardList: [],
    personalCardList: []
  },

  effects: {
    *queryBaseInfo({ payload, callback }, { call, put }) {
      const res = yield call(API.queryBaseInfo, payload);
      if (res && res.data) {
        yield put({
          type: 'getBaseInfoSuccess',
          payload: res.data
        });
        if (callback) {
          callback(res.data);
        }
      }
    }
  },

  reducers: {
    getBaseInfoSuccess(state, { payload }) {
      return {
        ...state,
        companyCardList: [],
        personalCardList: [],
        ...payload
      };
    }
  }
}
复制代码

这是一个名为User的Model，顾名思义，它管理着相关用户的一些信息状态。除了state里面的一些相关变量(这些变量会在相关的组件里面使用到)，此处还有effects和reducers。

官方介绍：

namespace是全局state里面的一个key，根据key来获取相关的state

state是整个model相关state的一个初始值

effects是来处理一些异步的行为的

reducers接收行为，同步更新state

这样将一个相关Model中的行为都统一放置在一块儿，state统一放置在一块儿，方便开发者进行管理。一样，会带来的一个问题就是，随着项目愈来愈大，Model愈来愈多，愈来愈臃肿。因此，合理进行Model的划分，什么时候才须要使用到Model变得相当重要，此处不作过多的展开。

Model定义完成以后，就是与组件之间的连接了，只有连接完成以后，才能够在组件中使用相关的Model行为，更新state。

咱们一样使用一个例子来进行分析，以下：

import React, { Component } from 'react';
import { connect } from 'dva';

class Nav extends Component {
  constructor(props) {
    super(props);

    this.state = {
      activeIndex: ''
    };
  }

  componentWillMount() {
    this.props.dispatch({
      type: 'home/merchantLogin',
      payload: {}
    });
  }

  render() {
    const { activeIndex } = this.state;
    const merchantInfo = this.props.home.merchantInfo || {};
    return (
        ...
    )
  }
}

export default connect(({ home }) => ({
  home
}))(Nav);
复制代码

其中咱们能够看到，dva框架提供了一个connect的API，来进行Model与组件之间的绑定，这里会将一个命名空间为home的Model做为一个变量返回，而后在connect方法中，将其赋值给Nav组件的props。关键步骤就是这里的赋值。

这样，咱们就可在组件中使用this.props.home.merchantInfo这个变量了，这个变量是home Model的state里面的merchantInfo的初始值。同时，能够在组件的render过程当中使用这些数值。

连接完成以后，咱们还在上述的例子中看到了一个dispatch这个方法，这个就是dva框架提供的另外一个API，来触发Model中的一个相关行为。经过一张官方的解释图，咱们能够清晰的还原整个数据流的过程，以下：

经过图中咱们能够看到一切的行为的起点是dispatch，而后通过相关的行为，去对应的Model里面执行相关行为函数，而后更新state，在反馈到相关的组件中。这样子的数据流是否比之前乱糟糟的组件间的状态好不少了呢。

其实，接触过一些RxJS的思想，发现你们在处理数据流的过程当中，老是会有殊途同归之处。

总结

第一次尝试dva，体验上面仍是不错的。由于本次的项目是一个比较复杂的中台系统，才会想到去使用这样一套框架对状态进行管理。一样的，dva做为一套数据流的解决方案，仍是有着不少的缺点的，尤为是Model的使用，若是是简单的组件，尽可能少使用Model进行管理，组件内部状态管理和外部状态管理，二者相结合，才能减小Model的滥用问题。如今的dva已经发展到2版本了，相对比较稳定，若是有兴趣的读者，不妨本身动手尝试一下。