dva-loading 实践用法

dva 中页面过渡效果封装的很好，下面介绍常用的两个 js 库。

一、过渡组件 dva-loading

传统做法

比如请求一个用户页面，刚进去的时候由于要去服务器请求数据需要花费时间，这段时间页面应该是不能点击的状态。

如果不使用这个组件，传统做法是写个蒙版组件，提供两个方法 start() 和 end()，当进行 ajax 请求开始时调用 start() 方法给整个页面加上一层蒙版，此时不能进行操作，在请求结束也就是 ajax 的 success 回调函数中调用 end() 方法关闭蒙版，表明数据已经请求到了，可以操作页面。

作用

该组件有两处亮点：

一次配置，其它自动。只需简单配置，无需手动写蒙版组件，无需关心什么时候开始请求数据调用 start()，什么时候数据请求完毕调用 end()；

在请求数据期间会产生一层蒙版，此时无法操作页面；

配置

dva 项目的 index.js 文件：

import createLoading from 'dva-loading';

const app = dva();

app.use(createLoading());

配置完成后，在任何一个 dva 的 routes 组件中就都会有一个 loading 对象，如果你对 dva 稍有了解的话，应该不难知道它在哪。比如下面这行代码中的 loading 对象就是由于上面的配置。

export default connect(({ app, loading }) => ({ app, loading }))(App);

打印一下 loading 对象，可看到内容如下：

loading: {
global: false,
models: {
users: false,
todos: false,
...
},
}

我们只需要关注 loading.global 属性，当页面处于加载状态时该值为 true，当页面加载完成时，自动监听该值为 false。

二、动画组件 nprogress

安装

$ npm install nprogress

作用

制作页面加载时动态页面，在页面顶端提供动态进度条，表明当前页面正在加载状态。

用法

xx.js 中

import NProgress from 'nprogress';

提供了两个方法：NProgress.start() 和 NProgress.done()。

在刚开始请求（可以认为是 ajax 请求）页面数据时调用 NProgress.start() 方法，此时页面顶端会有蓝色动态进度条；在页面请求数据完毕时（可以认为是 ajax 的 success 回调函数），调用 NProgress.done() 方法，此时蓝色进度条会瞬间加载 100% 然后消失。

三、dva-loading 和 nprogress 配合使用

index.js

import createLoading from 'dva-loading';

const app = dva();

app.use(createLoading());

app.js

import React from 'react';
import { connect } from 'dva';
import NProgress from 'nprogress';
const App= ({ app, loading }) => {

let currHref = '';
const href = window.location.href;    // 浏览器地址栏中地址
if (currHref !== href) {  // currHref 和 href 不一致时说明进行了页面跳转
NProgress.start();    // 页面开始加载时调用 start 方法
if (!loading.global) {  // loading.global 为 false 时表示加载完毕
NProgress.done();  // 页面请求完毕时调用 done 方法
currHref = href;   // 将新页面的 href 值赋值给 currHref
}
}

}

export default withRouter(connect(({ app, loading }) => ({ app, loading }))(App));