一.基础

• dva 有一个管理 effects 执行的 hook，并基于此封装了 dva-loading插件。通过这个插件，我们可以不必一遍遍地写 showLoading 和 hideLoading，当发起请求时，插件会自动设置数据里的 loading 状态为true 或 false 。然后我们在渲染 components时绑定并根据这个数据进行渲染。

• 每个页面中将 loading 状态作为属性传入组件，在进行样式处理，比如转圈圈或者显示正在加载什么的，但是重点是，我们的 app 有多个页面，每个页面都这么做，很繁琐。如何只做一次状态处理，每次请求期间都会触发 loading 状态呢？dva-loading 提供了一个 global 属性

二. 使用

1. 基本使用

dva-loading 的使用非常简单，在 index.js 中加入：

//  Plugins
app.use(createLoading());

2. state 中的 loading 对象

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

• 所以根据 state.loading.global 指示全局 loading 状态

3.例子

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] https://www.cnblogs.com/zczhangcui/p/7419112.html