So verwenden Sie Suspense in React für ein verbessertes asynchrones Rendering

Spannung in der Reaktion

React Suspense ist eine leistungsstarke Funktion, die es Entwicklern ermöglicht, asynchrones Rendering elegant zu handhaben, indem beim Laden von Komponenten oder Daten eine Fallback-Benutzeroberfläche angezeigt wird. Es funktioniert Hand in Hand mit React.lazy, Concurrent Rendering und Data Fetching-Lösungen wie React Query, Relay oder benutzerdefinierten Implementierungen.

---

Wie Spannung funktioniert

1. Platzhalter-Fallback: Die Spannung dreht sich um Komponenten, die auf asynchrone Vorgänge warten müssen. Während des Wartens wird eine Fallback-Benutzeroberfläche angezeigt (z. B. ein Lade-Spinner).
2. Automatisches Rendern: Sobald der asynchrone Vorgang abgeschlossen ist, werden die realen Komponenten oder Daten gerendert.

---

Grundlegende Syntax

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

• React.Suspense: Umhüllt verzögert geladene Komponenten.
• Fallback: Gibt die Benutzeroberfläche an, die angezeigt werden soll, während auf das Laden der Komponente gewartet wird.

---

Anwendungsfälle voller Spannung

1. Lazy Loading Components: Komponenten dynamisch mit React.lazy laden.
2. Datenabruf: Verwalten des asynchronen Ladens von Daten in Kombination mit Bibliotheken wie Relay oder React Query.
3. Gleichzeitiges Rendering: Optimierung des Renderings in gleichzeitigen Reaktionsmodi.

---

Beispiel 1: Lazy Loading mit Spannung

Ohne Spannung

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

Die HeavyComponent wird synchron geladen, wodurch sich die anfängliche Ladezeit verlängert.

Mit Spannung

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading Heavy Component...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Jetzt wird die HeavyComponent nur bei Bedarf geladen und zeigt während des Ladevorgangs einen Fallback an.

---

Beispiel 2: Spannung mit mehreren Lazy-Komponenten

import React, { Suspense } from "react";

const ComponentA = React.lazy(() => import("./ComponentA"));
const ComponentB = React.lazy(() => import("./ComponentB"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading Components...</div>}>
        <ComponentA />
        <ComponentB />
      </Suspense>
    </div>
  );
}

export default App;

Die Fallback-Benutzeroberfläche wird angezeigt, bis beide Komponenten vollständig geladen sind.

---

Beispiel 3: Spannung beim Datenabruf (experimentell)

React Suspense ist auch für den asynchronen Datenabruf nützlich, wenn es in Bibliotheken wie Relay oder React Query integriert wird.

Beispiel mit React Query

import React, { Suspense } from "react";
import { useQuery } from "react-query";

function DataComponent() {
  const { data } = useQuery("fetchData", fetchData);

  return <div>{data}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading data...</div>}>
      <DataComponent />
    </Suspense>
  );
}

export default App;

---

Fehlerbehandlung mit Suspense

Wenn beim Laden von Komponenten oder Daten ein Fehler auftritt, bietet React Suspense keine integrierte Fehlerbehandlung. Verwenden Sie zu diesem Zweck eine Fehlergrenze.

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

---

Best Practices für den Einsatz von Suspense

1. Einfache Fallbacks: Verwenden Sie einfache Platzhalter, um Leistungseinbußen zu vermeiden.
2. Mit Fehlergrenzen kombinieren: Stellen Sie sicher, dass Komponenten- oder Datenladefehler ordnungsgemäß behandelt werden.
3. Intelligent teilen: Teilen Sie Ihre Anwendung für eine bessere Leistung in logische Blöcke auf.

---

Vorteile von Suspense

1. Verbesserte Benutzererfahrung: Stellt sicher, dass die App weiterhin reagiert, indem eine Fallback-Benutzeroberfläche angezeigt wird.
2. Reduzierte Bundle-Größe: Funktioniert gut mit Code-Aufteilung für optimierte Bundle-Größen.
3. Vereinfachte asynchrone Handhabung: Verwaltet Ladezustände auf deklarativere Weise.

---

Erweiterte Verwendung: Verschachtelte Spannung

Sie können mehrere Suspense-Komponenten verschachteln, um die Fallback-Status genau zu steuern.

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

---

Grenzen der Spannung

1. Unterstützung für das Abrufen von Daten: Experimentelle Funktion zum direkten Abrufen von Daten.
2. Keine Fehlerbehandlung: Erfordert zusätzliche Fehlerbehandlungsmechanismen wie Fehlergrenzen.
3. Browserkompatibilität: Erfordert moderne Browser mit Unterstützung für ES6-Module und -Versprechungen.

---

Abschluss

React Suspense ist ein vielseitiges Tool zur Verwaltung des asynchronen Renderings in React-Anwendungen. Es vereinfacht die Handhabung von Ladezuständen, verbessert die Leistung durch verzögertes Laden und sorgt in Kombination mit Techniken zur Codeaufteilung und Fehlerbehandlung für ein reibungsloseres Benutzererlebnis.

---

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Suspense in React für ein verbessertes asynchrones Rendering. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!