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 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
去除html代码里面的script正则方法
May 19 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
分析javascript原型及原型链
Mar 18 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
javascript中的数据类型检测方法详解
Aug 07 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 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
实用函数5
2007/11/08 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
js星星评分效果
2014/07/24 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
python实现飞机大战微信小游戏
2020/03/21 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
详解Python文件修改的两种方式
2019/08/22 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
python opencv实现简易画图板
2020/08/27 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
2013年学期结束动员演讲稿
2014/01/07 职场文书
初婚未育证明
2014/01/15 职场文书
网络宣传方案
2014/03/15 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
一般纳税人申请报告
2015/05/18 职场文书
检察院起诉书
2015/05/20 职场文书