您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)DVA框架統(tǒng)一處理所有頁面loading狀態(tài)的示例分析的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
這篇文章主要介紹了關(guān)于DVA框架統(tǒng)一處理所有頁面的loading狀態(tài),有著一定的參考價(jià)值,現(xiàn)在分享給大家,有需要的朋友可以參考一下
dva 有一個(gè)管理 effects 執(zhí)行的 hook,并基于此封裝了 dva-loading 插件。下面通過本文給大家分享DVA框架統(tǒng)一處理所有頁面的loading狀態(tài),感興趣的朋友一起看看吧
dva 有一個(gè)管理 effects 執(zhí)行的 hook,并基于此封裝了 dva-loading 插件。通過這個(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è)頁面中將loading狀態(tài)作為屬性傳入組件,在進(jìn)行樣式處理,比如轉(zhuǎn)圈圈或者顯示正在加載什么的,但是重點(diǎn)是,我們的app有多個(gè)頁面,每個(gè)頁面都這么做,很繁瑣。
如何只做一次狀態(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īng)用這個(gè)loading狀態(tài),那么我們可以在每個(gè)頁面中使用一個(gè)父級(jí)組件來處理這個(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 ( <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的一個(gè)loading指示組件,animating屬性指示顯示與否,我們使用show和loading兩個(gè)屬性來控制顯示與否。
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。如果沒有這個(gè)需求,這個(gè)組件中可以只保留render()方法。
3、&& !state.loading.models.Verify這個(gè)是做什么的?這個(gè)的作用是排除Verify這個(gè)model對(duì)loading的影響,比如我不想在這個(gè)model對(duì)應(yīng)的頁面出現(xiàn)loading,可以在這里處理。
3、在router.js中使用這個(gè)父級(jí)組件
有了這個(gè)父級(jí)組件,那么在每個(gè)頁面中加入這個(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è)頁面,都會(huì)加載App作為父組件。
感謝各位的閱讀!關(guān)于“DVA框架統(tǒng)一處理所有頁面loading狀態(tài)的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。