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 相关文章推荐
对xmlHttp对象的理解
Jan 17 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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 __autoload()方法真的影响性能吗?
2012/03/30 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php浏览历史记录的方法
2015/03/10 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
JS实现简单的Canvas画图实例
2013/07/04 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
JS实现滑动插件
2020/01/15 Javascript
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
Python中字符串的处理技巧分享
2016/09/17 Python
Python random模块用法解析及简单示例
2017/12/18 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Django如何配置mysql数据库
2018/05/04 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
python如何制作英文字典
2019/06/25 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
自我鉴定范文
2013/11/10 职场文书
董事长助理工作职责
2014/06/08 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
上课说话检讨书
2015/01/27 职场文书
海上钢琴师观后感
2015/06/03 职场文书
环保守法证明
2015/06/24 职场文书