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 ({ this.props.children }); } } const mapStateToProps = (state, ownProps) => { return { loading: state.loading.global && !state.loading.models.Verify } }; export default connect(mapStateToProps)(App);
说明:
1、
是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中统一处理一下的。
比如:
这样,在进入/admin下的每个页面,都会加载App作为父组件。
以上是“DVA框架如何统一处理所有页面的loading状态”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站标题:DVA框架如何统一处理所有页面的loading状态-创新互联
转载来于:http://scyanting.com/article/csddcj.html