最近在用react写web项目,领导为了让前端便于维护要求都用react作为开发基础,框架选型不限。在使用 react 的时候或多或少会接触到状态管理,从开始学 react 到现在也挺久了,做一些前端框架选型总结。

dva 
经朋友推荐开始接触 dva ,从  2.x 版本开始使用,我也基于这个工具开发了一套项目模版,它简化了 redux 的使用,并且在封装了 redux-saga 和 react-router,同时还可以包含 dva-loading 插件获取 loading 状态等。

在 redux 时代,当我需要新增一种跨页面全局数据的时候,我需要去项目的 reducers 目录定义一下这种数据命名和初始值,然后在 constans 目录中为更改这项数据的操作定义一种唯一的操作类型(type),再去 actions 目录定义一些方法,这些方法最后会得到更改后的数据和操作类型(type),最后再回到 reducers 中根据这个操作类型(type)把数据整合到 reducer 中…可以看到,我在编写 redux 这部分代码的时候需要频繁在 actions 、 constants 、 reducers 这几个目录间切换。

而使用 dva 就可以免除这些困扰了,我只需要一个 model 中就可以完成所有操作:

// app全局性状态管理
import * as appApis from '../services/app'; // 异步请求接口 export default {
namespace: 'app', state: {
channels: [],
show: true
}, reducers: {
getChannelsAndGamesSuccess(state, { channels, games }) {
return { ...state, channels, games };
},
changeShow(state, { show }) {
return { ...state, show };
}
}, effects: { // 异步
* getChannelsAndGames(_, { call, put }) {
const res = yield call(appApis.getChannelsAndGames);
yield put({
type: 'getChannelsAndGamesSuccess',
channels: res.channels
});
}
}, subscriptions: { // 订阅
setup({dispatch, history}) {
history.listen(location => {
if (location.pathname == '/') {
dispatch({
type: 'getChannelsAndGames'
});
}
});
}
}
};

  

这便是一个 model 对象,state 定义数据、effects 中执行异步请求、触发 action 在 reducers 中改变数据,一气呵成!

此外它还含有其他特性,比如:subscription(订阅),可以在这里订阅 history 路由变化,进入根路径执行 getChannelsAndGames 获取数据,而不需要在 react 的生命周期中做这些事;用上 dva-loading 插件,在更改数据的过程中还会自动设置 loading 状态,这在异步请求中非常有用!

dva官网:https://github.com/dvajs/dva/blob/master/README_zh-CN.md

mobx

既然 dva 这么好用,为什么还要使用 mobx 呢?还不是为了折腾

React框架 dva 和 mobx 的使用感受的更多相关文章

  1. react框架 Dva & Umi

    概念 // http://localhost:3000/ //models import IndexPage from './routes/IndexPage'; import Products fr ...

  2. react的dva框架初试

    使用背景:迫不得已!!(自己入职是以vue技术入职的,说是马上vue项目就来了,让我负责这个项目的前端.但是入职后就让我下了现在这个项目看下,然后就顺理成章的帮忙进行开发了,其实自己一直想要做reac ...

  3. 基于Abp React前端的项目建立与运行——React框架分析

    基于Abp React前端的项目建立与运行 目录 基于Abp React前端的项目建立与运行 1 Abp项目配置 2 运行WebApi后端项目 2.1 创建C3D数据库,并且将数据库对应链接字符串替换 ...

  4. 当react框架遇上百度地图

      百度地图官方文档的使用指导是这样说的:在页面中引入<script type="text/javascript" src="http://api.map.baid ...

  5. 谈谈出入React框架踩过的坑

    1 在JSX的元素中写入内联样式,例如<div style={"color:blue"}></div> 报错:warning:Style prop valu ...

  6. React使用DVA本地state传值取值

    React使用DVA本地state传值取值 最近在用Ant Pro 做一个后台系统,在使用中发现Antd Pro使用DVA来实现redux+sagas+router一系列的功能,比传统方式要方便快捷的 ...

  7. 【react】当react框架遇上百度地图

      百度地图官方文档的使用指导是这样说的:在页面中引入<script type="text/javascript" src="http://api.map.baid ...

  8. D3.js(v3)+react框架 基础部分之数据绑定及其工作过程与绑定顺序

    数据绑定: 将数据绑定到Dom上,是D3最大的特色.d3.select和d3.selectAll返回的元素的选择集.选择集上是没有数据的. 数据绑定就是使被选择元素里“含有”数据. 相关函数有两个: ...

  9. 认识React框架

    在大厂面试的时候被问会不会React框架几乎是必须的,可见React框架在现在前端市场的份额.所以说学习React框架的必要性. react框架起源于Facebook的内部项目,因为对市场上的Java ...

随机推荐

  1. openssl几个加密算法使用介绍

    1.openssl简介 1)openssl概述 OpenSSL 是一个强大的安全套接字层密码库,囊括主要的密码算法.常用的密钥和证书封装管理功能及SSL协议,并提供丰富的应用程序供测试或其它目的使用. ...

  2. 新概念英语(1-29)Come in, Amy.

    How must Amy clean the floor? A:Come in, Amy. Shut the door, please. This bedroom's very untidy. B:W ...

  3. Python基础数据类型之int、bool、str

    数据类型:int  bool  str  list  元祖  dict  集合 int:整数型,用于各种数学运算. bool:只有两种,True和False,用户判断. str:存储少量数据,进行操作 ...

  4. WPF利用附加属性修改ShowGridLines效果

    1.思路主要代码 wpf的gridline原本效果是虚线类型的.有时候需要设计成表格形式的,因此有了用附加属性来自动绘制边框线的想法. 思路:绘制Line并添加到grid的children里,但效果并 ...

  5. Ubuntu+Firefox总是打不开网页

    参考链接 火狐的设置里面找: 首选项 -> 高级 -> 网络 -> 连接 -> 设置, 结果发现之前默认是选择了使用系统代理设置, 果断拒绝!... 勾选第一项, " ...

  6. C# 枚举器

    1:枚举器和可枚举类型 我们知道使用foreach可以遍历数组中的元素.那么为什么数组可以被foreach语句处理呢,下面我们就进行讨论一下这个问题. 2:使用foreach语句 我们知道当我们使用f ...

  7. CentOS 7 安装serverjre 9

    1.  首先去官网查询最新的jre的下载地址,然后用wget命令下载. 2. 创建安装目录 sudo mkdir -p /usr/local/java 3. 解压文件到安装目录 sudo tar -z ...

  8. java加密算法AES与RSA

    1.commons-codec使用 commons-codes 常用工具类:DigestUtils,Base64,Hex 1.1 md5 String text = "hello,md5&q ...

  9. 去除Eclipse中js报错的问题

    第一步:    去除eclipse的JS验证:        将windows->preference->Java Script->Validator->Errors/Warn ...

  10. python 云打码 hhtp接口

    import http.client, mimetypes, urllib, json, time, requests ######################################## ...