Implementierung von Portalen und Fehlergrenzbehandlung in React

Portale

Man kann es als Slot bezeichnen, aber anders als der Slot in Vue bezieht es sich auf das Rendern eines React-Elements in einen angegebenen Container (echtes DOM).

Beispielsweise wird die Modal-Komponente normalerweise standardmäßig direkt als untergeordnetes Element der realen Struktur des Textkörpers gerendert, sodass wir ReactDOM.createPortal(ReactElement, RealDOM-Container) verwenden können, um ein React-Element zu erstellen. Beispielcode:

React von „react“ importieren
ReactDOM von „react-dom“ importieren
Modal aus „./components/Modal“ importieren

const PortalModal = ReactDOM.createPortal(<Modal />, document.body)

exportiere Standardfunktion App() {
    zurückgeben <div Klassenname="App-Container">
        <PortalModal />
    </div>
}

Wir können in der Browserkonsole sehen, dass die echte Modalkomponente tatsächlich als direktes untergeordnetes Element des Hauptteils gerendert wird. Über die React-Entwicklertools können wir jedoch sehen, dass sich die Modalkomponente in der virtuellen DOM-Baumstruktur immer noch unter der App-Komponente befindet, im Div mit dem Klassennamen App-Container.

Daher können wir den Schluss ziehen, dass die virtuelle DOM-Baumstruktur der React-Komponente möglicherweise nicht mit der realen DOM-Baumstruktur übereinstimmt.

Daher müssen wir auf Event-Bubbling achten

• Ereignisse in React werden tatsächlich verpackt
• Sein Event-Bubbling basiert auf der Struktur des virtuellen DOM-Baums und nicht auf dem Bubbling-Mechanismus des realen DOM-Baums.

Fehlergrenzenbehandlung

Wenn beim Rendern einer Komponente ein Fehler auftritt, wird standardmäßig der gesamte Komponentenbaum ausgehängt. Fehlergrenze: Eine Komponente, die Fehler erfasst, die beim Rendern in untergeordneten Komponenten auftreten, und die verhindern kann, dass sich Fehler auf übergeordnete Komponenten ausbreiten.

Lassen Sie eine Komponente Fehler abfangen (Klassenkomponente):

Verwenden Sie die statische Methode static getDerivedStateFromError, die ausgelöst wird, wenn eine Unterkomponente einen Fehler rendert

• Statische Methode, daher kann diese nicht verwendet werden
• Der Rückgabewert (Objekt) dieser Funktion wird mit dem Status gemischt, um den Status abzudecken
• Der Auslösezeitpunkt ist: nach dem Auftreten eines Fehlers beim Rendern einer Unterkomponente und vor dem Aktualisieren der Seite
• Es wird nur ausgelöst, wenn beim Rendern einer untergeordneten Komponente ein Fehler auftritt (d. h. es wird nicht ausgelöst, wenn ein Fehler in seiner eigenen Komponente oder in seinen Geschwisterkomponenten oder übergeordneten Komponenten auftritt).

importiere React, {PureComponent} von 'react'

exportiere Standardklasse ErrorBoundary erweitert PureComponent {
    Zustand = {
        isError: false
    }
    statisch getDerivedStateFromError(Fehler) {
        console.log('Rendering-Fehler: ', Fehler)
        zurückkehren {
            isError: true
        }
    }
    rendern() {
        wenn (dies.istFehler) {
            return <span>Etwas stimmt nicht...</span>
        }
        gib diese.Eigenschaften.Kinder zurück
    }
}

Verwenden der Funktion componentDidCatch(error, info)

• Es ist eine Instanzmethode
• Die Laufzeit ist, nachdem beim Rendern einer Unterkomponente ein Fehler aufgetreten ist und nachdem die Seite aktualisiert wurde (eine Änderung des Status führt dazu, dass der Komponentenbaum nach der Deinstallation neu erstellt wird, was eine Verschwendung von Effizienz darstellt).
• Normalerweise wird diese Funktion verwendet, um Fehlerinformationen an den Hintergrund zu übergeben und aufzuzeichnen

importiere React, {PureComponent} von 'react'

exportiere Standardklasse ErrorBoundary erweitert PureComponent {
    Zustand = {
        isError: false
    }
    componentDidCatch(Fehler, Info) {
        // Info ist die Fehlerzusammenfassung console.log('Rendering-Fehler: ', Fehler)
        console.log('Rendering-Informationen: ', Informationen)
        dies.setState({
            isError: true
        })
    }
    rendern() {
        wenn (dies.istFehler) {
            return <span>Etwas stimmt nicht...</span>
        }
        gib diese.Eigenschaften.Kinder zurück
    }
}

Was passiert, wenn Fehlergrenzen nicht verwendet werden?

Ab React 16 führt jeder Fehler, der nicht von einer Fehlergrenze erfasst wird, dazu, dass der gesamte React-Komponentenbaum ausgehängt wird.

Die Erfahrung hat uns gezeigt, dass es besser ist, die fehlerhafte Benutzeroberfläche vollständig zu entfernen, als sie beizubehalten. Wenn dem Benutzer beispielsweise bei einem Produkt wie Messenger eine ungewöhnliche Benutzeroberfläche angezeigt wird, kann dies dazu führen, dass er die falsche Nachricht an jemand anderen sendet.

Durch das Hinzufügen von Fehlergrenzen können Sie für eine bessere Benutzererfahrung sorgen, wenn in Ihrer Anwendung Ausnahmen auftreten. Beispielsweise umschließt Facebook Messenger die Seitenleiste, das Nachrichtenfeld, den Chatverlauf und das Nachrichteneingabefeld in separate Fehlergrenzen. Wenn einige der UI-Komponenten abstürzen, sind die übrigen weiterhin interaktiv.

Notiz

Einige Fehler werden von der Fehlerbegrenzungskomponente nicht erfasst

Fehler in eigenen Komponenten

Asynchrone Fehler (wie etwa in setTimeout ausgelöste Fehler)

importiere React, {PureComponent} von 'react'

// ErrorBoundary.jsx
exportiere Standardklasse ErrorBoundary erweitert PureComponent {
    Zustand = {
        isError: false
    }
    /* Diese Funktion wird nicht ausgeführt */
    statisch getDerivedStateFromError(Fehler) {
        console.log('Rendering-Fehler: ', Fehler)
        zurückkehren {
            isError: true
        }
    }
    rendern() {
        wenn (dies.istFehler) {
            return <span>Etwas stimmt nicht...</span>
        }
        gib diese.Eigenschaften.Kinder zurück
    }
}

// Comp.jsx Comp-Komponente exportieren Standardfunktion Comp() {
    setzeTimeout(() => {
        neuen Fehler werfen('setTimeout-Fehler')
    }, 1000)
    return <div>Komp.</div>
}

// App.jsx verwendet die Export-Standardfunktion App() {
    Rückkehr <>
        <Fehlergrenze>
            <Komp />
        </Fehlergrenze>
    </>
}

In Ereignissen ausgelöste Fehler

Das heißt: Behandeln Sie nur synchrone Fehler beim Rendern von untergeordneten Komponenten

Dies ist das Ende dieses Artikels über die Implementierung von Portalen und die Fehlergrenzbehandlung in React. Weitere relevante Inhalte zu React-Portalen und zur Fehlergrenzbehandlung 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!