DVA框架統(tǒng)一處理所有頁面loading狀態(tài)的示例分析

這篇文章給大家分享的是有關(guān)DVA框架統(tǒng)一處理所有頁面loading狀態(tài)的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、讓胡路ssl等。為上1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的讓胡路網(wǎng)站制作公司

這篇文章主要介紹了關(guān)于DVA框架統(tǒng)一處理所有頁面的loading狀態(tài)，有著一定的參考價值，現(xiàn)在分享給大家，有需要的朋友可以參考一下

dva 有一個管理 effects 執(zhí)行的 hook，并基于此封裝了 dva-loading 插件。下面通過本文給大家分享DVA框架統(tǒng)一處理所有頁面的loading狀態(tài)，感興趣的朋友一起看看吧

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

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

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

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

如何只做一次狀態(tài)處理，每次請求期間都會觸發(fā)loading狀態(tài)呢，其實也很簡單啦，因為dva-loading提供了一個global屬性。

1、state中的loading對象

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

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

2、一個父級組件

我們要向所有頁面應(yīng)用這個loading狀態(tài)，那么我們可以在每個頁面中使用一個父級組件來處理這個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 (
   <p className={this.props.className}>
    { this.props.children }
    <p className={styles.loading}>
     <ActivityIndicator toast text="正在加載" animating={show && loading} />
    </p>
   </p>
  );
 }
}
const mapStateToProps = (state, ownProps) => {
 return {
  loading: state.loading.global && !state.loading.models.Verify
 }
};
export default connect(mapStateToProps)(App);

說明：

1、<ActivityIndicator />是ant-design mobile的一個loading指示組件，animating屬性指示顯示與否，我們使用show和loading兩個屬性來控制顯示與否。

2、為什么要show和loading兩個參數(shù)，有個loading不就可以了嗎？show的存在是為了實現(xiàn)一個需求：loading在請求發(fā)生的TIMER時間后出現(xiàn)，如果請求很快，小于TIMER時間，那么就不顯示loading。如果沒有這個需求，這個組件中可以只保留render()方法。

3、&& !state.loading.models.Verify這個是做什么的？這個的作用是排除Verify這個model對loading的影響，比如我不想在這個model對應(yīng)的頁面出現(xiàn)loading，可以在這里處理。

3、在router.js中使用這個父級組件

有了這個父級組件，那么在每個頁面中加入這個父級組件，就可以實現(xiàn)loading，當然這個是可以在router.js中統(tǒng)一處理一下的。

比如：

 <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作為父組件。

感謝各位的閱讀！關(guān)于“DVA框架統(tǒng)一處理所有頁面loading狀態(tài)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁題目：DVA框架統(tǒng)一處理所有頁面loading狀態(tài)的示例分析
當前路徑：http://bm7419.com/article46/jdegeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、定制開發(fā)、網(wǎng)站維護、品牌網(wǎng)站制作、企業(yè)建站、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)