这篇文章主要介绍了关于dva框架统一处理所有页面的loading状态，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
dva 有一个管理 effects 执行的 hook，并基于此封装了 源码搭建wcqh.cndva-loading 插件。下面通过本文给大家分享DVA框架统一处理所有页面的loading状态，感兴趣的朋友一起看看吧
dva 有一个管理 effects 执行的 hook，并基于此封装了 dva-源码搭建wcqh.cnloading 插件。通过这个插件，我们可以不必一遍遍地写 showLoading 和 hideLoading，当发起请求时，插件会自动设置数据里的 loading 状态为 true 或 false 源码搭建wcqh.cn。然后我们在渲染 components 时绑定并根据这个数据进行渲染。
dva-loading的使用非常简单，在index.js中加入：
每个页面中将loading状态作为属性传入组件，在进行样式处理，比如转圈圈或者显示正在加载什么的，但是重点是，我们的app有多个页面，每个页面都这么做，很繁琐。
如何只做一次状态源码搭建wcqh.cn处理，每次请求期间都会触发loading状态呢，其实也很简单啦，因为dva-loading提供了一个global属性。
1、state中的loading对象
loading对象中的global属性表示的全源码搭建wcqh.cn局loading状态，models里是每个model的loading状态
所以我们根据state.loading.global指示全局loading状态。
2、一个父级组件
我们要向所有页面应用这个load源码搭建wcqh.cning状态，那么我们可以在每个页面中使用一个父级组件来处理这个loading。上代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import React from 'react';
import styles fr源码搭建wcqh.cnom './app.css';
import { connect } from 'dva';
import { ActivityIndicator } from '源码搭建wcqh.cnantd-mobile';
const TIMER = 800;
let timeoutId = null;
class App extends React.Component {
state = {源码搭建wcqh.cn
show: false
}
componentWillMount() {
const { loading } = this.props;
if (loading) {
timeoutId = setTimeou源码搭建wcqh.cnt(() => {
this.setState({
show: true
});
}, TIMER);
}
}
componentWillReceiveProps(nextProps) {
const { loadi源码搭建wcqh.cnng } = nextProps;
const { show } = this.state;
this.setState({
show: false
});
if (loading) {
timeoutId = 源码搭建wcqh.cnsetTimeout(() => {
this.setState({
show: true
});
}, TIMER);
}
}
componentWillUnmount() {
if (timeoutId) {
cl源码搭建wcqh.cnearTimeout(timeoutId);
}
}
render() {
const { loading } = this.props;
const { show } = this.state;
return 源码搭建wcqh.cn(
<p className={this.props.className}>
{ this.props.children }
<p className={styles.loading}>
<ActivityI源码搭建wcqh.cnndicator toast text=”正在加载” animating={show && loading} />
</p>
</p>
);
}
}
const mapStateToProps = (state,源码搭建wcqh.cn ownProps) => {
return {
loading: state.loading.global && !state.loading.models.Verify
}
};
export defaul源码搭建wcqh.cnt connect(mapStateToProps)(App);
说明：
1、是ant-design mobile的一个loading指示组件，animating属性指示显示与否，我们使用sho源码搭建wcqh.cnw和loading两个属性来控制显示与否。
2、为什么要show和loading两个参数，有个loading不就可以了吗？show的存在是为了实现一个需求：loading在请求发生的TIMER时间后出现源码搭建wcqh.cn，如果请求很快，小于TIMER时间，那么就不显示loading。如果没有这个需求，这个组件中可以只保留render()方法。
3、&& !state.loading.models.Verify这个是做什源码搭建wcqh.cn么的？这个的作用是排除Verify这个model对loading的影响，比如我不想在这个model对应的页面出现loading，可以在这里处理。
3、在router.js中使用这个父级组件
有了这个父级组源码搭建wcqh.cn件，那么在每个页面中加入这个父级组件，就可以实现loading，当然这个是可以在router.js中统一处理一下的。
比如：
1
2
3
4
5
6
7
8
9
10
11
<Router history={history}>源码搭建wcqh.cn
<Route path=”/admin” component={App}>
<IndexRoute component={AdminIndex} />
<Route path=”movie_add” co源码搭建wcqh.cnmponent={MovieAdd} />
<Route path=”movie_list” component={MovieList} />
<Route path=”category_add” com源码搭建wcqh.cnponent={CategoryAdd} />
<Route path=”category_list” component={CategoryList} />
<Route path=”user_add”源码搭建wcqh.cn component={UserAdd} />
<Route path=”user_list” component={UserList} />
</Route>
</Router>
这样，在进入/a源码搭建wcqh.cndmin下的每个页面，都会加载App作为父组件。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
关于源码搭建wcqh.cn微信小程序中弹框和模态框的实现
以上就是DVA框架统一处理所有页面的loading状态的详细内容，更多请关注php中文网其它相关文章！
会员专属
暂无评论内容