DVA框架统一处理所有页面的loading状态


Posted in Javascript onAugust 25, 2017

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

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

// 2. Plugins
app.use(createLoading());

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

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

1、state中的loading对象

DVA框架统一处理所有页面的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 (
   <div className={this.props.className}>
    { this.props.children }
    <div className={styles.loading}>
     <ActivityIndicator toast text="正在加载" animating={show && loading} />
    </div>
   </div>
  );
 }
}
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中统一处理一下的。

比如:

<Router history={history}>
   <Route path="/admin" component={App}>
    <IndexRoute component={AdminIndex} />
    <Route path="movie_add" component={MovieAdd} />
    <Route path="movie_list" component={MovieList} />
    <Route path="category_add" component={CategoryAdd} />
    <Route path="category_list" component={CategoryList} />
    <Route path="user_add" component={UserAdd} />
    <Route path="user_list" component={UserList} />
   </Route>
  </Router>

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

总结

以上所述是小编给大家介绍的DVA框架统一处理所有页面的loading状态,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS创建自定义表格具体实现
Feb 11 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
Jquery ajax基础教程
Nov 20 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 #Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 #Javascript
Vue.js进行查询操作的实例详解
Aug 25 #Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 #Javascript
Vue.js框架路由使用方法实例详解
Aug 25 #Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 #Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 #jQuery
You might like
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
软件设计的目标是什么
2016/12/04 面试题
中国好声音华少广告词
2014/03/17 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
复试通知单模板
2015/04/24 职场文书
入党心得体会
2019/06/20 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
Python爬虫之爬取二手房信息
2021/04/27 Python