Que dois-je faire si React ne charge pas les composants paresseusement? Comment gérer les défaillances de chargement et les stratégies d'optimisation de la faille acilement gracieusement?

Réagir les composants de chargement paresseux échoué: des méthodes de manutention élégantes et des stratégies d'optimisation

Dans les applications React, React.lazy est utilisé pour la segmentation du code, l'amélioration des performances et la réduction de la taille du package. Cependant, les composants de chargement asynchrones dans un environnement de production peuvent ne pas se charger en raison d'un réseau ou d'autres exceptions, affectant l'expérience utilisateur. Cet article explore comment gérer React.lazy Load défaillance gracieusement et fournit des solutions.

question:

Après avoir utilisé React.lazy , la surveillance de l'environnement de production montre que certains composants n'ont pas réussi à se charger et que le code entre dans catch . Les méthodes de performances et de traitement des erreurs ne sont pas claires. L'exemple de code est le suivant:

 const modulea = react.lazy (() => {
    retourner la nouvelle promesse ((résoudre, rejeter) => {
        import ('modulewrap')
            .Then (module => Resolve (module))
            .Catch (err => {/ * Erreur de gestion * /});
    });
});

Solution:

Il est recommandé de combiner les limites Error Boundaries et de réessayer les mécanismes pour gérer les échecs de charge React.lazy .

La limite d'erreur capture les erreurs JavaScript dans l'arborescence des composants enfants, empêche les accidents d'application et affiche une interface utilisateur alternative. Le mécanisme de réessayer tente plusieurs fois après que la charge n'améliore pas le taux de réussite.

L'exemple de code suivant combine les limites d'erreur et les mécanismes de réessayer:

 Importer React, {composant, paresseux, suspense} de 'react';

// Classe de limite d'erreur Errorboundary étend le composant {
  state = {Haserror: false};

  statique GetderivedStateFromError (erreur) {
    return {Haserror: true};
  }

  ComponentDidCatch (erreur, info) {
    // des erreurs de journalisation au service de rapport d'erreur}

  rendre() {
    if (this.state.haserror) {
      Retour<h1 id="Le-chargement-a-échoué"> Le chargement a échoué</h1> ;
    }
    Renvoyez ceci.props.children;
  }
}

// réessayer la fonction logique avecretry (importpromise, maxretrie = 3) {
  Laissez RetryCount = 0;
  fonction tryImport () {
    return import
      if (retRyCount <maxretrie retrycount console.log loading component tente ... retourner une nouvelle promesse> setTimeout (résoudre, 1000)). puis (tryImport);
      }
      lancer une erreur; // lance une erreur et le gérer sur Errorboundary});
  }
  Retour TryImport;
}

const LazyComponent = Lazy (withRetry (() => import ('./ lazyComponent')));

// Utilisez la fonction du composant de chargement paresseux myComponent () {
  Retour (
    <errorboundary>
      <suspense fallback="{<div"> chargement... }>
        <lazycomponent></lazycomponent>
      </suspense>
    </errorboundary>
  ));
}</maxretrie>

Dans cet exemple, la fonction withRetry implémente la logique de réessayer, qui est essayée jusqu'à trois fois. ErrorBoundary attrape les erreurs et affiche des invites amicales pour empêcher les plantages d'applications. Suspense affiche un indicateur de charge pendant le chargement. Grâce à cette méthode, la défaillance de la charge React.lazy peut être gérée efficacement et l'expérience utilisateur peut être améliorée.

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!