這篇文章主要介紹DVA框架如何統(tǒng)一處理所有頁(yè)面的loading狀態(tài)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站是一家專業(yè)提供弋江企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為弋江眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

dva 有一個(gè)管理 effects 執(zhí)行的 hook，并基于此封裝了 dva-loading 插件。通過(guò)這個(gè)插件，我們可以不必一遍遍地寫 showLoading 和 hideLoading，當(dāng)發(fā)起請(qǐng)求時(shí)，插件會(huì)自動(dòng)設(shè)置數(shù)據(jù)里的 loading 狀態(tài)為 true 或 false 。然后我們?cè)阡秩?components 時(shí)綁定并根據(jù)這個(gè)數(shù)據(jù)進(jìn)行渲染。

dva-loading的使用非常簡(jiǎn)單，在index.js中加入：

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

每個(gè)頁(yè)面中將loading狀態(tài)作為屬性傳入組件，在進(jìn)行樣式處理，比如轉(zhuǎn)圈圈或者顯示正在加載什么的，但是重點(diǎn)是，我們的app有多個(gè)頁(yè)面，每個(gè)頁(yè)面都這么做，很繁瑣。

如何只做一次狀態(tài)處理，每次請(qǐng)求期間都會(huì)觸發(fā)loading狀態(tài)呢，其實(shí)也很簡(jiǎn)單啦，因?yàn)閐va-loading提供了一個(gè)global屬性。

1、state中的loading對(duì)象

loading對(duì)象中的global屬性表示的全局loading狀態(tài)，models里是每個(gè)model的loading狀態(tài)

所以我們根據(jù)state.loading.global指示全局loading狀態(tài)。

2、一個(gè)父級(jí)組件

我們要向所有頁(yè)面應(yīng)用這個(gè)loading狀態(tài)，那么我們可以在每個(gè)頁(yè)面中使用一個(gè)父級(jí)組件來(lái)處理這個(gè)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 (
   
    { this.props.children }