重庆小潘seo博客

当前位置:首页 > 重庆网络营销 > 小潘杂谈 >

小潘杂谈

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

时间:2020-09-17 15:00:07 作者:重庆seo小潘 来源:
这篇文章主要介绍了关于DVA框架统一处理所有页面的loading状态,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 dva 有一个管理 effects 执行的 hook,并基于此封装了 dva-loading 插件。下面通过本文给大家分享DVA框架统一处理所有页面的lo

这篇文章主要介绍了关于DVA框架统一处理所有页面的loading状态,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

dva 有一个管理 effects 执行的 hook,并基于此封装了 dva-loading 插件。下面通过本文给大家分享DVA框架统一处理所有页面的loading状态,感兴趣的朋友一起看看吧

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对象

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 (<p className={this.props.className}>{ this.props.children }<p className={styles.loading}><ActivityIndicator toast text="正在加载" animating={show && loading} /></p></p>); }}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作为父组件。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

小程序实现九宫格界面的导航

微信小程序之绑定点击事件的解析

关于微信小程序中弹框和模态框的实现

以上就是DVA框架统一处理所有页面的loading状态的详细内容,更多请关注小潘博客其它相关文章!