dva 有一個(gè)管理 effects 執(zhí)行的 hook，并基于此封裝了 dva-loading 插件。通過(guò)這個(gè)插件，我們可以不必一遍遍地寫(xiě) 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 (
   <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);

說(shuō)明：

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

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

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

3、在router.js中使用這個(gè)父級(jí)組件

有了這個(gè)父級(jí)組件，那么在每個(gè)頁(yè)面中加入這個(gè)父級(jí)組件，就可以實(shí)現(xiàn)loading，當(dāng)然這個(gè)是可以在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>

這樣，在進(jìn)入/admin下的每個(gè)頁(yè)面，都會(huì)加載App作為父組件。

總結(jié)

以上所述是小編給大家介紹的DVA框架統(tǒng)一處理所有頁(yè)面的loading狀態(tài)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論