免费做企业推广的网站,嘉兴seo网站建设,html网站开发开题报告范文,中国工程项目网dva 有一个管理 effects 执行的 hook#xff0c;并基于此封装了 dva-loading 插件。通过这个插件#xff0c;我们可以不必一遍遍地写 showLoading 和 hideLoading#xff0c;当发起请求时#xff0c;插件会自动设置数据里的 loading 状态为 true 或 false 。然后我们在渲染… 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 (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); 说明 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 pathmovie_add component{MovieAdd} /Route pathmovie_list component{MovieList} /Route pathcategory_add component{CategoryAdd} /Route pathcategory_list component{CategoryList} /Route pathuser_add component{UserAdd} /Route pathuser_list component{UserList} //Route/Router 这样在进入/admin下的每个页面都会加载App作为父组件。 4、OVER转载于:https://www.cnblogs.com/zczhangcui/p/7419112.html
