先说些废话
最近在开发React技术栈的我的项目产品，对于数据状态的治理应用了Dva.js，作为一个资深的ow玩家，我看到这个名字第一反馈就是————这不是ow里的一个女英雄吗?仔细阅读了官网文档之后，发现开发者还真是因为这个角色取得灵感，来命名这个数据状态治理插件，果然开发大佬都是工作和休闲两不误~
学过React的同学都晓得它的技术栈十分多且杂，所以每当你应用React的时候都须要引入很多的模块，那么Dva就是把这些用到的模块集成在一起，比方一些须要引入的依赖react-saga/react-loger、必写的ReactDOM.render、provider、connect包裹等都省去不写，造成肯定的架构标准，大大提高咱们的开发效率
明天，就来写一份文档，帮忙后续应用Dva的开发者更好得在理论我的项目中（PS:须要是以UMI为根底框架，纯Dva来构建我的项目能够间接看文章结尾的参考文档列表）上手应用
什么是Dva
Dva首先是一个基于redux和redux-saga的数据流计划，而后为了简化开发体验，Dva还额定内置了react-router和fetch，所以也能够了解为一个轻量级的利用框架。
在我目前的我的项目中，更多是应用数据状态治理的性能，他在我司的fish框架中做了内嵌，在支流的React开发框架UMI中也做了内嵌适配，应用起来十分不便疾速。
Dva设计的目标就是简化元素，升高难度，让你不必管他怎么实现的，咱们依照默认的这个规定去写就能够
数据流向
数据的扭转产生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会扭转数据的时候能够通过dispatch发动一个action，
如果是同步行为会间接通过reducers扭转states，如果是异步行为（副作用）会先触发effects而后流向reducers最终扭转states
分层开发
无论是Vue还是React开发，理论的大型利用肯定有严格的分层开发标准，确保后续开发的可维护性，次要的分层构造有以下几点：
- Page 负责与用户间接打交道：渲染页面，承受用户的操作输出，侧重于展现型交互性逻辑，这里须要理解无状态组件
- Model 负责解决业务逻辑，为 Page 做数据、状态的读写、变换、暂存等，
Dva中model就是做了这一层的操作 - Service 负责与 HTTP 接口对接，进行纯正的数据读写
根底概念
namespace
model的命名空间，同时也是他在全局state上的属性- 只能用字符串，不反对通过
.的形式创立多层命名空间，相当于这个model的key 在组件外面，通过
connect这个key将想要引入的model退出import { connect } from 'dva';export default connect(({ namespaceValue }) => ({ ...namespaceValue }))(DvaCompoent);
state
- 示意
model的状态数据 - 操作的时候每次都要当作不可变数据
immutable data来看待，保障每次都是全新对象，没有援用关系
- 示意
reducer
- 必须是纯函数，有固定输入输出，次要目标是批改本身
state - 承受两个参数：之前曾经累积运算的后果和以后要被累积的值，返回的是一个新的累积后果，该函数把一个汇合归并成一个单值
- 须要留神的是同样的输出必然失去同样的输入，它们不应该产生任何副作用
effect。并且，每一次的计算都应该应用immutable data
- 必须是纯函数，有固定输入输出，次要目标是批改本身
effect
- 次要用于异步申请，接口调用之类的
effect被称为副作用，在咱们的利用中，最常见的就是异步操作- 它来自于函数编程的概念，之所以叫副作用是因为它使得咱们的函数变得不纯，同样的输出不肯定取得同样的输入
subscription
subscription语义是订阅，用于订阅一个数据源，而后依据条件dispatch须要的action- 数据源能够是以后的工夫、服务器的websocket连贯、keyboard输出、geolocation变动、history路由变动等等
- 外部定义的函数都会被被执行，执行之后作为监听来处理事务
dispatch
dispatch是一个用于触发action的函数，action是扭转state的惟一路径，然而它只形容了一个行为，而dipatch能够看作是触发这个行为的形式，reducer则是形容如何扭转数据的在
Dva中，connect model的组件通过props能够拜访到dispatch，能够调用model中的reducer或者effectsimport { connect } from 'dva';const testCom = props => {const { dispatch } = props;const changeValue = (id, val) => { // 调用reducer，个别是同步批改state中的值 dispatch({ type: 'dva/save', payload: { param: val }, }); // 调用effect，个别是发送后盾申请 dispatch({ type: 'dva/queryValue', payload: { id: id }, }); };return( <div>'hello world'</div>)}export default connect(({ dva }) => ({ ...dva }))(testCom);
Model中的Effects函数解析
须要留神的是：Effects外面的函数都是Generator函数
yield
- 固定关键词，
Generator函数自带的关键词，和*搭配应用，有点像async和await，应用*则表明它是Generator函数 - 而后每应用一个
yield就是通知程序这里是异步，须要期待这个前面的代码执行实现，同步代码可不应用该关键词
- 固定关键词，
payload
- 页面上通过
dispatch传过来的payload同名参数
- 页面上通过
select
Dva中Effects函数的固定传参用于拿到
model中state的数据，须要留神的是，state前面跟命名空间namespace的值const data = yield select((state) => state.namespaceName.valueName);
call
Dva中Effects函数的固定传参第一个参数是一个异步函数，
payload是参数，能够通过call来执行一个残缺的异步申请，又因为yield的存在，就实现了异步转同步的计划const { data } = yield call(queryInterface, payload);
put
Dva中Effects函数的固定传参能够应用同
model中的Reducers或者Effects，通过Reducers来实现数据到页面的更新，也能够通过put实现Effects的嵌套应用yield put({ type: 'save', payload: { ...payload },});
开发目录
因为公司的fish框架以及常见的umi框架都对Dva做了深度继承，会默认将src/models下的model定义主动挂载，只须要在model文件夹中新建文件即可新增一个model用来治理组件状态，对于某个page文件夹上面的model也会默认挂载
├─assets `动态资源`├─components `公共组件`├─config `路由和环境配置`├─constants `全局动态常量`├─locale `国际化`│ ├─en_US `英文配置`│ └─zh_CN `中文配置`├─models `全局数据状态` *Dva波及的目录*├─pages `页面目录，用我参加开发的其中一个目录来作为示例` *Dva波及的目录*│ ├─NodeConfig `NodeConfig示例目录`│ │ ├─components│ │ │ ├─Select `Select组件页面文件` *Dva波及的目录*│ │ │ │ └─components│ │ │ │ ├─AudienceInfo│ │ │ │ │ ├─index.js│ │ │ │ │ └─index.less│ │ │ │ ├─BlackList│ │ │ │ │ ├─index.js│ │ │ │ │ └─index.less│ │ │ │ ├─ControlGroup│ │ │ │ │ ├─index.js│ │ │ │ │ └─index.less│ │ │ │ └─GroupSelect│ │ │ │ │ ├─index.js│ │ │ │ │ └─index.less│ │ │ │ ├─index.js│ │ │ │ └─index.less│ │ ├─models│ │ │ ├─select.js `Select组件数据状态治理` *Dva波及的目录*│ │ └─services├─services `全局接口配置`├─themes `全局款式主题`└─utils `js通用工具`PS: 该树形图通过 `windows shell` 自带的 `tree` 命令生成如何应用Dva
首先定义一个繁难的model示例
export default { namespace: 'dva', state: { id: '', value: {}, }, effects: { // 所有effect前必须要加 * *queryValue({ payload }, { select, call, put }) { const params = { id: payload.id ? payload.id : yield select(state => state.select.id) } const { data } = yield call(queryInterface, params); // queryInterface是定义好的后盾申请接口，个别用axios或fetch来实现 yield put({ type: 'save', payload: data }); }, }, reducers: { save(state, { payload }) { return { ...state, ...payload, }; }, }, subscriptions: { keyboardWatcher({ dispatch }) { key('⌘+up, ctrl+up', () => { dispatch( {type:'save'}) }); }, },};而后把model和组件绑定在一起
React的Connect函数是一种柯里化写法
import { connect } from 'dva';const testCom = props => { const { helloWorld = 'hello world'} = props; return( <div>{ helloWorld }</div> )}// 绑定之后就能够在testCom组件中应用命名为dva的model了export default connect(({ dva }) => ({ ...dva }))(testCom);<span id="jumpCurry"></span>
柯里化
柯里化是把承受多个参数的函数转换成承受一个繁多参数的函数（PS：Scala语言中也有相似的设计）
// 柯里化var foo = function(x) { return function(y) { return x + y }}foo(3)(4)// 一般办法var add = function(x, y) { return x + y;}add(3, 4) <span id="jumpNoState"></span>
无状态组件
创立无状态组件是为了创立纯展现组件，这种组件只负责依据传入的props来展现，不波及到要扭转state状态的操作，
在理论我的项目中页面组件被写成无状态的组件，通过简略组合能够构建成页面或简单组件，通过多个简略组件来合并成一个简单的大利用
const NoStateComponent = props => { const { helloWorld = 'hello world'} = props; return( <div>{ helloWorld }</div> )}export default NoStateComponent;无状态组件的长处
- 因为是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不须要调配多余的内存，从而性能失去肯定的晋升
- 代码整洁、可读性高，对于大型项目的开发保护十分有益处
参考文档一 ———— Dva官网文档
参考文档二 ———— UMI官网文档
参考文档三 ———— REACT根底笔记 MODEL分层
参考文档四 ———— 前端数据流计划Dva
参考文档五 ———— 浅析dva (史上最全的dva用法及剖析)
参考文档六 ———— 【dva】model中effects函数的解析
参考文档七 ———— Generator 函数的详解
参考文档八 ———— React connect()() 双括号 --柯里化写法
参考文档九 ———— 高级函数技巧-函数柯里化
我是 fx67ll.com，如果您发现本文有什么谬误，欢送在评论区探讨斧正，感谢您的浏览！
如果您喜爱这篇文章，欢送拜访我的 本文github仓库地址，为我点一颗Star，Thanks~ :)
转发请注明参考文章地址，非常感谢！！！