DVA框架统一处理所有页面的loading状态
发布日期:2021-10-24 12:41:38 浏览次数:1 分类:技术文章

本文共 2742 字,大约阅读时间需要 9 分钟。

dva 有一个管理 effects 执行的 hook,并基于此封装了 dva-loading 插件。通过这个插件,我们可以不必一遍遍地写 showLoading 和 hideLoading,当发起请求时,插件会自动设置数据里的 loading 状态为 true 或 false 。然后我们在渲染 components 时绑定并根据这个数据进行渲染。

dva-loading的使用非常简单,在index.js中加入:

// 2. Pluginsapp.use(createLoading());

每个页面中将loading状态作为属性传入组件,在进行样式处理,比如转圈圈或者显示正在加载什么的,但是重点是,我们的app有多个页面,每个页面都这么做,很繁琐。

如何只做一次状态处理,每次请求期间都会触发loading状态呢,其实也很简单啦,因为dva-loading提供了一个global属性。

1、state中的loading对象

loading对象中的global属性表示的全局loading状态,models里是每个model的loading状态

所以我们根据state.loading.global指示全局loading状态。

2、一个父级组件

我们要向所有页面应用这个loading状态,那么我们可以在每个页面中使用一个父级组件来处理这个loading。上代码:

import React from 'react';import styles from './app.css';import { connect } from 'dva';import { ActivityIndicator } from 'antd-mobile';const TIMER = 800;let timeoutId = null;class App extends React.Component {    state = {        show: false    }    componentWillMount() {        const { loading } = this.props;        if (loading) {            timeoutId = setTimeout(() => {                this.setState({                    show: true                });            }, TIMER);        }    }    componentWillReceiveProps(nextProps) {        const { loading } = nextProps;        const { show } = this.state;        this.setState({            show: false        });        if (loading) {            timeoutId = setTimeout(() => {                this.setState({                    show: true                });            }, TIMER);        }    }    componentWillUnmount() {        if (timeoutId) {            clearTimeout(timeoutId);        }    }    render() {        const { loading } = this.props;        const { show } = this.state;        return (            
{ this.props.children }
); }}const mapStateToProps = (state, ownProps) => { return { loading: state.loading.global && !state.loading.models.Verify }};export default connect(mapStateToProps)(App);

说明:

1、<ActivityIndicator />是ant-design mobile的一个loading指示组件,animating属性指示显示与否,我们使用show和loading两个属性来控制显示与否。

2、为什么要show和loading两个参数,有个loading不就可以了吗?show的存在是为了实现一个需求:loading在请求发生的TIMER时间后出现,如果请求很快,小于TIMER时间,那么就不显示loading。如果没有这个需求,这个组件中可以只保留render()方法。

3、&& !state.loading.models.Verify这个是做什么的?这个的作用是排除Verify这个model对loading的影响,比如我不想在这个model对应的页面出现loading,可以在这里处理。

3、在router.js中使用这个父级组件

有了这个父级组件,那么在每个页面中加入这个父级组件,就可以实现loading,当然这个是可以在router.js中统一处理一下的。

比如:

这样,在进入/admin下的每个页面,都会加载App作为父组件。

4、OVER

转载于:https://www.cnblogs.com/zczhangcui/p/7419112.html

转载地址:https://blog.csdn.net/weixin_30784141/article/details/98382699 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:第一单元总结
下一篇:【基于Python+Flask项目部署系列--03】开发测试环境配置-基于Ubuntu16.04

发表评论

最新留言

逛到本站,mark一下
[***.202.152.39]2024年03月11日 00时47分35秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

mysql在存储过程仍_mysql存储过程 2019-04-21
失败的人生图片_早安励志经典语录精辟的一句话人生感悟 2019-04-21
如何设画面大小_如何设计旅游类项目?分享3种设计思路 2019-04-21
开启web_2021秋招四大网申时间、网申地址汇总(持续更新),德勤、安永、普华永道已开启!... 2019-04-21
从右边开始放_停路边,被人恶意放钉子,爆胎,报警无果,要我找监控 2019-04-21
读写测试_UFS 3.0读写测试数据曝光:秒杀UFS 2.1和eMMC 2019-04-21
注册小程序要多少钱_开发一个微信小程序商城要多少钱? 2019-04-21
mysql 实现id自增序列_MySQL分表自增ID解决方案 2019-04-21
catti二级笔译综合能力真题_CATTI韩语二级口译真题及考场回忆版 2019-04-21
攻防世界 适合做桌面_世界杯大冷门,双方实力悬殊,德国队为何输给了韩国队... 2019-04-21
可涂抹什么让指纹加深_手机镀膜是什么?液体玻璃手机镀膜和膜结手机纳米防护的区别... 2019-04-21
node静态服务器优缺点_Node —— BFF 2019-04-21
新风系统风速推荐表_PE管还是PVC管?现场评测新风系统两种管道对比 2019-04-21
华为社招嵌入式软件面试_嵌入式软件面试那点事 2019-04-21
心电图多少为正常范围_一个人的正常尿酸是多少,不管体重多少,不超过这个范围都算正常... 2019-04-21
两个集合相等的例题_人教A版高中数学必修一1.1.集合间的基本关系优质课公开课课件、教案... 2019-04-21
用流密码实现加密java语言_使用java的流密码 2019-04-21
合唱队形java_动态规划之合唱队形问题 2019-04-21
java变量怎么进行百分比_在Java中显示百分比 2019-04-21
java 设置pdf页面大小_Java PDF页面设置——页面大小、页边距、纸张方向、页面旋转... 2019-04-21