Umi Dva入门使用，含详细解释

view和model的关系图

model属性

model主要有 namespace state reducers effects subscription5个主要属性。

namespace：定义model名，如果没声明，会以文件名作为namespace。

state：model 的状态。

reducers：reducer 是 Action 处理器，用来处理同步操作。如果不需要调接口时候，我们前台传递的 action 可以直接调用 reducers 里的方法。必须返回一个新的state，否则不会自动更新页面。

effects： Effect用来处理异步操作。内部是一个 Generator 函数，使用 yield 关键字，标识每一步的操作。dva 提供多个 effect 函数内部的处理函数，比较常用的是 call 和 put。

call：执行异步函数，比如发送请求
put：发出一个 Action，类似于 dispatch

subscriptions：相当于一个监听器，可以监听路由的变化、鼠标、键盘、服务器连接变化等。subscriptions的方法会自动初始化(执行一遍)。

model基本结构

export default {namespace: 'myglobal', // 定义model名，如果没声明，会以文名件作为namespacestate: {obj: []}, // 该 model 当前的状态// reducer 是 Action 处理器，用来处理同步操作。如果不需要调接口时候，我们前台传递的 action 可以直接调用 reducers 里的方法。reducers: {/*** queryEnd方法名自定义* @param {Object} state 旧的state* @param {Object} payload 存放在 action 里面的数据* @param {String} propsName 字段名* @return {Object} 新的state。（直接重新return一个新的state会丢弃旧的state，所以为了保留旧的state，一般会解构旧的state再合并新的state）*/queryEnd(state, { payload, propsName }) {// 第二个参数为 action = {type,payload}return { ...state, [propsName]: payload };}},// Effect用来处理异步操作。内部是一个 Generator 函数，使用 yield 关键字，标识每一步的操作。// 如果需要调取接口的话，前台页面就需要调用 effects 里的方法。将数据取出来，再传递给 reducers 里的方法进行数据操作和同步 state。effects: {/*** queryResolved方法名自定义* @param {String} propsName 保存在state中的字段名* @param {Object} payload 存放在 action 里面的数据* @param {function} callback 回调函数* @param {function} call dva提供处理异步任务 (与后台服务端接口进行交互)* @param {function} put dva提供用来发出action (action可以是异步的effects、同步的reducers)* @param {function} select dva提供调用其他model层的state* @return {null} 无返回*/*queryResolved({ propsName, payload, callback }, { call, put, select }) {try {const response = yield call(queryResolvedFetch, payload); // 第一个传参：后台服务器接口对应的名称。第二个参数：入参。const homeName = yield select(state => state.home); // 这样我们就可以取到名为 home 的 Model 层里面的 state 数据了。yield put({type: 'queryEnd',payload: response.data.records,propsName: propsName});if (callback) callback(response.data.records);} catch (e) {console.log('queryResolved异常:', e);}}},// subscriptions相当于一个监听器，可以监听路由的变化、鼠标、键盘、服务器连接变化等。subscriptions的方法会自动初始化(执行一遍)。subscriptions: {setup({ dispatch, history }) {console.log('setup');window.onresize = () => {   //这里表示的当浏览器的页面的大小变化时就会触发里面的dispatch方法，这里的save就是reducers中的方法名dispatch({ type: 'save' })}},onClick ({dispatch}) {console.log('onClick');document.addEventListener('click',() => {   //这里表示当鼠标点击时就会触发里面的dispatch命令，这里的save就是reducers中的方法名dispatch ({ type: 'save' })})}},
};

使用connect将Route页面与Model state 进行绑定

connect是dva提供的api，但在umi3也可以这样导入：import { connect } from “umi”;

import React, { useEffect } from "react";
import { connect } from "umi";function IndexPage(props) {useEffect(() => {props.dispatch({type: `myglobal/getList`,payload: { page: 1, size: 5 },});}, []);return (<div></div>);
}IndexPage.propTypes = {};export const mapStateToProps = ({myglobal}) => {return { myglobal }; // myglobal 是 Model 层里面的 namespace
};
export default connect(mapStateToProps)(IndexPage);

使用useSelector将Route页面与Model state 进行绑定

import React, { useEffect } from "react"
import { shallowEqual } from 'react-redux'
import { useDispatch, useSelector } from "umi"export default function IndexPage(props) {const dispatch = useDispatch();const commomState = useSelector((state) => {return state.myglobal;},shallowEqual);useEffect(() => {setTimeout(() =>{dispatch({type: "myglobal/queryEnd",payload: {obj: []}})}, 3000)}, [])const count = (date) => {console.log('count', commomState, date);}return (<div><h1>Page index</h1><h2>{count(new Date().getTime())}</h2><h3>{new Date().getTime()}</h3></div>);
}

useSelector和shallowEqual

useSelector：从umi导出的useSelector实质是react-redux的api，默认使用===做浅比较，第二个参数是一个函数用于自己实现比较逻辑(返回true不刷新组件，返回false刷新)。
shallowEqual：react-redux提供的api，用于优化组件重新渲染的次数。

初始化      改变后的值           是否加shallowEqual 是否刷新组件
111         111                 否                   否{}         {}                  否                   是
{}          {}                  是                   否
{}          {test: "test"}        是                   是
{}          {test: "test"}        否                   是{obj: "aaa"} {obj: "aaa"}      是                   否
{obj: "aaa"} {obj: "bbb"}       是                   是
{obj: []}   {obj: []}           是                   是
{obj: {name: "aaa"}} {obj: {name: "aaa"}} 是     是[1,2]      [1,2]               否                   是
[1,2]       [1,2]               是                   否
[1,2]       [2,2]               是                   是

总的来说：
useSelector默认会比较引用
shallowEqual第一层是值比较，第二层会比较引用

前端-Umi Dva使用相关推荐

学习react前端框架dva
dva 是由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:"dva 是 react 和 redux 的最佳实践". 一. ...
umi+dva+antd项目搭建
umi+dva+antd 项目搭建说明设计特点创建应用目录注意特点约定式路由嵌套路由 Scroll to top 页面间跳转配置config/config.js(或.umirc.js) ...
react前端框架dva(一)
react前端框架dva 最近正在看dva框架,发现这是一个很好应用于react的框架. 众所周知,react的学习成本是较高的,而antd推出的这款框架,大大的降低了react的学习成本.dva简化 ...
前端技术 | dva，美貌与智慧并存
经过前面四篇的铺垫,终于轮到我们的主角dva了,就是下面这个美女: 先擦一擦哈喇子,我们来介绍一下,dva出自于暴雪出品的一款游戏<守望先锋>,援引官方的角色介绍: D.Va拥有一部强大的 ...
umi+dva dva全局的dispatch方法
情况:有三个组件用到了同一个方法,后期需要维护,所以抽离出来写在了组件外部,当页面有操作时,需要在外部dispatch一些数据,由于不是在hooks文件中,所以不能使用useDispatch. 之前公 ...
关于umi dva的使用
1.配置,在config.js中开启配置 dva: {immer: true, // 表示是否启用 immer 以方便修改 reducerhmr: true, // 表示是否启用 dva model ...
关于构建umi+dva+ant react项目附源码
刚刚入门react,通过视频学习,做一个简单的react表格功能实现.功能满足对表格数据进行增删改,数据来源于后端接口.交互也与后端接口进行! 话不多说,直接看效果! 接口设置了30%的概率报错,出现 ...
【Umi+Dva入门实战】简述Dva、Umi和路由的理解
Umi 3+Dva入门实践–简述Dva.Umi和路由的理解 dva/umi/react 之间的关系 dva简介 umi简介 umi插件体系路由简介观看下面视频学习 https://www.bili ...
umi + dva 倒计时计时器
直接上代码 orderForm的 models层中 subscriptions: {setup({ dispatch, history }) {return history.listen(({ pat ...

前端-Umi Dva使用