Was soll ich tun, wenn React Komponenten faul lädt? Wie gehe ich mit React.lazy -Lastfehlern und Optimierungsstrategien anmutig um?

Reagieren Sie faule Ladekomponenten fehlgeschlagen: elegante Handhabungsmethoden und Optimierungsstrategien

In React -Anwendungen wird React.lazy für die Codesegmentierung, die Verbesserung der Leistung und die Reduzierung der Paketgröße verwendet. Asynchrone Ladekomponenten in einer Produktionsumgebung können jedoch aufgrund von Netzwerk- oder anderen Ausnahmen nicht geladen werden, was die Benutzererfahrung beeinflusst. In diesem Artikel wird untersucht, wie man mit React.lazy -Ladungsfehler umgeht und Lösungen liefert.

Frage:

Nach der Verwendung React.lazy zeigt die Produktionsumgebungsüberwachung, dass einige Komponenten nicht geladen wurden und der Code in catch -Block eingeht. Die Seiten- und Fehlerbehandlungsmethoden sind unklar. Der Beispielcode lautet wie folgt:

 const modulea = react.lazy (() => {
    Neues Versprechen zurückgeben ((Resolve, ablehnen) => {
        Import ('Modulewrap')
            .then (Module => Resolve (Modul))
            .Catch (err => { /* Handhabungsfehler* /});
    });
});

Lösung:

Es wird empfohlen, Error Boundaries zu kombinieren und Mechanismen erneut zu verarbeiten, um React.lazy zu verarbeiten.

Die Fehlergrenze erfasst JavaScript -Fehler in der untergeordneten Komponentenbaum, verhindert Anwendungsabstürze und zeigt alternative Benutzeroberfläche an. Der Wiederholungsmechanismus versucht mehrmals, nachdem die Last die Erfolgsrate nicht verbessert.

Das folgende Codebeispiel kombiniert Fehlergrenzen und Wiederholungsmechanismen:

 React, {Komponente, faul, Spannung} aus 'react';

// Fehlergrenzklasse FehlerBoundary erweitert die Komponente {
  state = {haserror: false};

  statische GetedivedStateFromError (Fehler) {
    return {haserror: true};
  }

  componentDidCatch (Fehler, info) {
    // Fehler auf dem Fehlerberichtsdienst} protokollieren}

  render () {
    if (this.state.hasError) {
      Zurückkehren<h1 id="Das-Laden-fehlgeschlagen"> Das Laden fehlgeschlagen</h1> ;
    }
    kehre this.Props.Children zurück;
  }
}

// die Logikfunktion WithRetry (importPromise, maxretries = 3) {wiederholen {
  RetyryCount = 0;
  Funktion tryimport () {
    return ImportPromise (). catch (error => {
      if (retyprycount <maxretries wiederholung console.log versuch ... neues versprechen zur> setTimeout (Resolve, 1000)). Dann (tryimport);
      }
      Fehler werfen; // einen Fehler werfen und ihn für Fehler bearbeiten});
  }
  Rückkehr Tryimport;
}

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

// Verwenden Sie die Funktion der Laken -Ladekomponentenfunktion myComponent () {{
  Zurückkehren (
    <errorboundary>
      <suspense fallback="{<div"> Laden... }>
        <lazycomponent></lazycomponent>
      </suspense>
    </errorboundary>
  );
}</maxretries>

In diesem Beispiel implementiert die withRetry -Funktion die Wiederholungslogik, die bis zu dreimal ausprobiert wird. ErrorBoundary fängt Fehler auf und zeigt freundliche Eingabeaufforderungen an, um die App -Abstürze zu verhindern. Suspense -Komponente zeigt beim Laden einen Lastanzeigen an. Durch diese Methode kann reagieren. React.lazy -LAD -FAILS kann effektiv behandelt werden und die Benutzererfahrung kann verbessert werden.

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn React Komponenten faul lädt? Wie gehe ich mit React.lazy -Lastfehlern und Optimierungsstrategien anmutig um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!