Le framework DVA gère uniformément l'état de chargement de toutes les pages

Cet article présente principalement le framework DVA pour gérer uniformément l'état de chargement de toutes les pages. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

dva a une gestion. hook d'exécution des effets et encapsule le plug-in de chargement dva sur cette base. Cet article vous expliquera que le framework DVA gère l'état de chargement de toutes les pages de manière unifiée. Les amis intéressés devraient y jeter un œil

dva a un hook qui gère l'exécution des effets, et basé sur. là-dessus, le plug-in de chargement dva est encapsulé. Grâce à ce plug-in, nous n'avons pas besoin d'écrire showLoading et hideLoading encore et encore Lorsqu'une demande est faite, le plug-in définira automatiquement l'état de chargement des données sur vrai ou faux. Nous lions ensuite et effectuons un rendu en fonction de ces données lors du rendu des composants.

L'utilisation de dva-loading est très simple Ajoutez index.js :

// 2. Plugins
app.use(createLoading());

Dans chaque page, définissez le chargement. status as Les attributs sont transmis au composant et le style est traité, comme tourner en rond ou montrer qu'il est en cours de chargement. Mais le fait est que notre application a plusieurs pages, et il est très fastidieux de le faire pour chaque page.

Comment faire le traitement du statut une seule fois, et le statut de chargement sera déclenché à chaque requête C'est en fait très simple, car dva-loading fournit un attribut global ?

1. L'attribut global dans l'objet de chargement

représente l'état de chargement global dans les modèles. est

, nous indiquons donc l'état de chargement global en fonction de state.loading.global.

2. Un composant parent

Nous souhaitons appliquer cet état de chargement à toutes les pages, nous pouvons ensuite utiliser un composant parent dans chaque page pour gérer ce chargement. Code ci-dessus :

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);

Description :

1, <ActivityIndicator /> est un composant indicateur de chargement d'ant-design mobile, avec le Attribut d'animation Pour indiquer s'il faut afficher ou non, nous utilisons les attributs show etloading pour contrôler s'il faut afficher ou non.

2. Pourquoi avons-nous besoin de deux paramètres, show etloading ? Ne suffit-il pas d'avoir simplement un chargement ? L'existence de show répond à une exigence : le chargement apparaît après le temps TIMER lorsque la requête se produit. Si la requête est très rapide et est inférieure au temps TIMER, alors le chargement ne sera pas affiché. Si une telle exigence n’existe pas, seule la méthode render() peut être conservée dans ce composant.

3. && !state.loading.models.Verify Qu'est-ce que cela fait ? Le but de ceci est d'éliminer l'impact du modèle Verify sur le chargement. Par exemple, si je ne souhaite pas que le chargement apparaisse sur la page correspondant à ce modèle, je peux le gérer ici.

3. Utilisez ce composant parent dans router.js

Avec ce composant parent, vous pouvez implémenter le chargement en ajoutant ce composant parent à chaque page. Bien sûr, cela peut être géré uniformément dans. routeur.js.

Par exemple :

 <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>

De cette façon, lors de la saisie de chaque page sous /admin, l'application sera chargée en tant que composant parent .

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Le mini programme réalise la navigation de l'interface de grille à neuf carrés

Analyse des événements de clic de liaison du mini programme WeChat

À propos de la mise en œuvre de boîtes pop-up et de boîtes modales dans les mini programmes WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!