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 相关文章推荐
javascript中的一些注意事项 更新中
Dec 06 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
js实现简单商品筛选功能
Feb 02 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模板技术原理【一】
2008/01/10 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
简析Python的闭包和装饰器
2016/02/26 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
Python socket聊天脚本代码实例
2020/01/02 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
应届生的求职推荐信范文
2013/11/30 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
三严三实对照检查材料
2014/09/22 职场文书
作弊检讨书
2015/01/27 职场文书
客房服务员岗位职责
2015/02/09 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
德劲DE1102数字调谐收音机机评
2022/04/07 无线电