Reagieren Sie auf die Verarbeitung von Fehlergrenzkomponenten

Dies ist der Inhalt von React 16. Es ist nicht die neueste Technologie, aber sie wurde selten diskutiert, bis ich sie in der Dokumentation fand. Es ist tatsächlich ein sehr nützlicher Teil. Fassen wir es zusammen~

Nicht erfasste JS-Fehler in React können zum Absturz der gesamten Anwendung und zur Demontage des gesamten Komponentenbaums führen. Dies ist seit React 16 der Fall. Gleichzeitig führte React aber auch ein neues Konzept ein: die Fehlergrenze.

Definition, was ist

Eine Fehlergrenze ist immer noch eine Komponente, die JavaScript-Fehler überall in ihrem untergeordneten Komponentenbaum abfangen (drucken oder anderweitig verarbeiten) und bei Bedarf eine alternative Benutzeroberfläche rendern kann.

Funktioniert ähnlich wie Try-Catch, aber Fehlergrenzen werden nur für React-Komponenten verwendet.

Nur Klassenkomponenten können zu Fehlergrenzkomponenten werden. Fehlergrenzen können nur Fehler in Unterkomponenten erfassen, nicht ihre eigenen Fehler.

Fehlergrenzen fangen Fehler während des Renderns, im Lebenszyklus und in Konstruktoren für den gesamten Komponentenbaum ab. Ohne Fehlergrenzenbehandlung bricht der gerenderte untergeordnete Komponentenbaum dennoch zusammen, was wir offensichtlich nicht wollen.

Schauen wir uns ein Beispiel an, um die Verwendung von Fehlergrenzen Schritt für Schritt zu demonstrieren:

exportiere Standardklasse ErrorTest erweitert Komponente {
  Konstruktor(Requisiten) {
    super(Requisiten);
  }
  rendern() {
    zurückkehren (
      <div>
        <Fehlerzähler></Fehlerzähler>
        <span>mein Name ist Dan</span>
      </div>
    );
  }
}

// Fehler-Komponentenklasse BugCounter erweitert Komponente {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dieser.Zustand = {
      Zähler: 0,
    };
  }
  klick = () => {
    this.setState(({ Zähler }) => ({ Zähler: Zähler + 1 }));
  };
  rendern() {
    wenn (dieser.Zustand.Zähler === 5) {
      throw new Error("abgestürzt!");
    }
    zurückkehren (
      <div>
        <h3 bei Klick = {dieser.Klick}> {dieser.Zustand.Zähler}</h3>
      </div>
    );
  }
}

Das Rendering-Ergebnis des obigen Codes (Stile ignorierend):

Klicken Sie auf die Zahl 0 und sie wird schrittweise erhöht. Wenn die Zahl jedoch 5 ist, gibt die Komponente einen Error aus:

Dieser Error führt zum Absturz der gesamten Demo und selbst das externe <span>my name is dan</span> wird nicht angezeigt. Zu diesem Zeitpunkt wurde keine Fehlergrenze hinzugefügt.

Im Produktionsmodus wird ein weißer Bildschirm angezeigt und ein Fehler in der Konsole gemeldet:

getDerivedStateFromError und componentDidCatch

Zur Bewältigung dieser Art von Absturz ist eine Fehlergrenze erforderlich. Wie definiert man eine Fehlergrenze?

Definieren Sie eine Komponente und implementieren Sie static getDerivedStateFromError() oder componentDidCatch() (Sie können beide implementieren oder eine auswählen). Diese Komponente wird zu einer Fehlergrenze.

Diese beiden Lebenszyklusfunktionen können Sie über den folgenden Link einsehen:

componentDidCatch(Fehler, Info)

error ist das ausgelöste Fehlerobjekt und info enthält den Stapelüberwachungscode der Komponente, die den Fehler verursacht hat. Die Funktion wird während der Commit-Phase aufgerufen. Es können Nebenwirkungen auftreten.

statisch getDerivedStateFromError(Fehler)

Wird aufgerufen, nachdem eine untergeordnete Komponente einen Fehler ausgelöst hat, mit dem ausgelösten Fehler als Argument. Um den Status zu aktualisieren, muss ein Wert zurückgegeben werden. Diese Funktion wird während der Rendering-Phase aufgerufen und es sind keine Nebenwirkungen zulässig. Wenn Sie nach dem Abfangen eines Fehlers Nebeneffekte ausführen müssen, sollten Sie dies in componentDidCatch tun.

Erstellen einer Fehlergrenzkomponente

Mit der Kombinationsmethode können Sie eine Fehlergrenzenkomponente hinzufügen, um die Komponente, die Sie verwenden möchten, zu umschließen. Diese Komponente erfordert diese Effekte:

• Erfassen von Unterkomponentenfehlern und Aufzeichnen des Fehlerstatus innerhalb der Komponente
• Alternative Benutzeroberfläche im Fehlerzustand anzeigen und Unterkomponenten im Normalzustand anzeigen

Dann kann es so sein:

Klasse ErrorBoundary erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dieser.Zustand = { hasError: false };
  }

  statisch getDerivedStateFromError(Fehler) {
    // Aktualisieren Sie den Status, damit beim nächsten Rendering die verschlechterte Benutzeroberfläche angezeigt werden kann.
    return { hatFehler: true };
  }

  componentDidCatch(Fehler, Fehlerinfo) {
    // Sie können Fehlerprotokolle auch an den Server melden logErrorToMyService(error, errorInfo);
  }

  rendern() {
    wenn (dieser.Zustand.hatFehler) {
      // Sie können die heruntergestufte Benutzeroberfläche anpassen und das Rendering zurückgeben <h1>Etwas ist schiefgelaufen.</h1>;
    }

    gib diese.Eigenschaften.Kinder zurück; 
  }
}

Der Nebeneffekt nach dem Abfangen des Fehlers besteht in der Anpassung, dem Hochladen auf den Server oder der Verwendung state und der anschließenden Anzeige auf der Seite:

componentDidCatch(Fehler, Fehlerinfo) {
  // Fehler in den folgenden Komponenten abfangen und mit Fehlermeldung erneut rendern
  dies.setState({
    Fehler: Fehler,
    Fehlerinfo: Fehlerinfo
  })
}

Erfassungsverarbeitung

Fügen Sie den gesamten Code hinzu, umschließen Sie die problematische Komponente mit der Fehlergrenzkomponente und sehen Sie sich das Ergebnis an:

importiere { Komponente } von „react“;

exportiere Standardklasse ErrorTest erweitert Komponente {
  rendern() {
    zurückkehren (
      <div>
        <Fehlergrenze>
          <Fehlerzähler></Fehlerzähler>
        </Fehlergrenze>
        <span>mein Name ist Dan</span>
      </div>
    );
  }
}

// Fehler-Komponentenklasse BugCounter erweitert Komponente {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dieser.Zustand = {
      Zähler: 0,
    };
  }
  klick = () => {
    this.setState(({ Zähler }) => ({ Zähler: Zähler + 1 }));
  };
  rendern() {
    wenn (dieser.Zustand.Zähler === 5) {
      throw new Error("abgestürzt!");
    }
    zurückkehren (
      <div>
        <h3 bei Klick = {dieser.Klick}> {dieser.Zustand.Zähler}</h3>
      </div>
    );
  }
}

// Fehlergrenzenverarbeitungskomponentenklasse ErrorBoundary erweitert Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dieser.Zustand = { hasError: false };
  }

  statisch getDerivedStateFromError(Fehler) {
    // Aktualisieren Sie den Status, damit beim nächsten Rendering die verschlechterte Benutzeroberfläche angezeigt werden kann.
    return { hatFehler: true };
  }

  rendern() {
    wenn (dieser.Zustand.hatFehler) {
      // Sie können die heruntergestufte Benutzeroberfläche anpassen und das Rendering zurückgeben <h1>Etwas ist schiefgelaufen.</h1>;
    }

    gib diese.Eigenschaften.Kinder zurück;
  }
}

Das Auslösen einer Ausnahme meldet im Entwicklungsmodus immer noch einen Fehler. Nachdem Sie jedoch yarn build verwendet und es dann über http-server aufgehängt haben, können Sie auf die Produktionsseite zugreifen:

Es ist ersichtlich, dass, obwohl der Konsolenfehler aufgrund eines throw error auftritt, die Anzeige von my name is dan nicht betroffen ist. Mit anderen Worten, der Unterkomponentenfehler innerhalb der Fehlergrenze wirkt sich nicht auf andere externe Komponenten und Elemente aus.

Umfang

Fehlergrenzen werden verwendet, um Fehler im Lebenszyklus von Unterkomponenten und in Renderingfunktionen zu behandeln. Bei Eventhandlern werden sie während des Renderings nicht ausgelöst. try catch sollte für Ausnahmen verwendet werden, die von Eventhandlern ausgelöst werden.

Fehlergrenzen können in den folgenden Szenarien keine Fehler erfassen:

• Ereignisbehandlung
• Asynchroner Code
• Serverseitiges Rendering
• Von der Fehlergrenze selbst ausgelöste Fehler (nicht von untergeordneten Komponenten)

In Bezug auf Fehlergrenzen lohnt es sich, eine offizielle demo von React auszuprobieren:

https://codepen.io/gaearon/pen/wqvxGa?editors=0010

siehe:

https://zh-hans.reactjs.org/docs/error-boundaries.html

https://zh-hans.reactjs.org/docs/react-component.html

https://codepen.io/gaearon/pen/wqvxGa?editors=0010

Dies ist das Ende dieses Artikels über die Handhabung von React-Fehlergrenzkomponenten. Weitere relevante Inhalte zu React-Fehlergrenzen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!