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

这篇文章主要介绍了关于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. Plugins
app.use(createLoading());

每个页面中将loading状态作为属性传入组件，在进行样式处理，比如转圈圈或者显示正在加载什么的，但是重点是，我们的app有多个页面，每个页面都这么做，很繁琐。

如何只做一次状态处理，每次请求期间都会触发loading状态呢，其实也很简单啦，因为dva-loading提供了一个global属性。

1、state中的loading对象

loading对象中的global属性表示的全局loading状态，models里是每个model的loading状态

所以我们根据state.loading.global指示全局loading状态。

2、一个父级组件

我们要向所有页面应用这个loading状态，那么我们可以在每个页面中使用一个父级组件来处理这个loading。上代码：

import React from #39;react #39;;
import styles from #39;./app.css #39;;
import { connect } from #39;dva #39;;
import { ActivityIndicator } from #39;antd-mobile #39;;
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} / 
const mapStateToProps = (state, ownProps) = {
 return {
 loading: state.loading.global !state.loading.models.Verify
export default connect(mapStateToProps)(App);

说明：

1、是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状态的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。