這篇文章主要介紹了關於DVA框架統一處理所有頁面的loading狀態，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
dva 有一個管理effects 執行的hook，並基於此封裝了dva-loading 外掛程式。以下透過本文跟大家分享DVA框架統一處理所有頁面的loading狀態，有興趣的朋友一起看看吧
dva 有一個管理 effects 執行的 hook，並基於此封裝了 dva-loading 外掛程式。透過這個插件，我們可以不必一遍遍地寫 showLoading 和 hideLoading，當發起請求時，插件會自動設定資料裡的 loading 狀態為 true 或 false 。然後我們在渲染 components 時綁定並根據這個資料進行渲染。
dva-loading的使用非常簡單，在index.js中加入：
#// 2. Plugins app.use(createLoading());
每個頁面中將loading狀態作為屬性傳入組件，在進行樣式處理，例如轉圈圈或顯示正在加載什麼的，但是重點是，我們的app有多個頁面，每個頁面都這麼做，很繁瑣。
如何只做一次狀態處理，每次請求期間都會觸發loading狀態呢，其實也很簡單啦，因為dva-loading提供了一個global屬性。
1、state中的loading物件
#loading物件中的global屬性所表示的全域loading狀態，models裡是每個model的loading狀態
所以我們依照state.loading.global指示全域loading狀態。
2、一個父級元件
我們要對所有頁面套用這個loading狀態，那麼我們可以在每個頁面中使用一個父級元件來處理這個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兩個參數，有個loading不就可以了嗎？ show的存在是為了實現一個需求：loading在請求發生的TIMER時間後出現，如果請求很快，小於TIMER時間，那麼就不顯示loading。如果沒有這個需求，這個元件中可以只保留render()方法。
3、&& !state.loading.models.Verify這個是做什麼的？這個的作用是排除Verify這個model對loading的影響，例如我不想在這個model對應的頁面出現loading，可以在這裡處理。
3、在router.js中使用這個父級元件
有了這個父級元件，那麼在每個頁面中加入這個父級元件，就可以實作loading，當然這個是可以在router.js中統一處理一下的。
例如：
<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作為父元件。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是DVA框架統一處理所有頁面的loading狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！
