初涉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版本了，相對比較穩定，若是有興趣的讀者，不妨本身動手嘗試一下。