React-Komponenten dynamisch mit Hooks laden

Das dynamische Laden von Komponenten und das bedarfsorientierte Laden von Komponenten kann zur Verbesserung von Wartung und Leistung beitragen. Wir geben Ihnen einen Überblick über diese Techniken.

Dynamisches Laden von Komponenten

Das dynamische Laden von Komponenten ist eine Technik, die das Schreiben von Import-Anweisungen für viele Komponenten ersetzen kann. Anstatt jede mögliche Komponente zu deklarieren, die verwendet werden kann, können Sie einen dynamischen Wert für den Pfad einer Komponente verwenden. Sie können außerdem Lazy-Loading verwenden, um dem Endbenutzer genau den für ihn erforderlichen Code-Bundle bereitzustellen. Eine kleinere Bundle-Größe für den Endbenutzer sollte zu Leistungsverbesserungen führen. React 16.6.0+ stellt React.lazy und React.Suspense zur Unterstützung des Lazy-Loadings von React-Komponenten zur Verfügung. Statt alle Komponenten zu importieren, ermöglicht das Lazy-Loading, nur zusätzliche Komponenten zu importieren, wenn sie benötigt werden. In diesem Artikel werden Sie die Konzepte des dynamischen Ladens von Komponenten und des bedarfsorientierten Ladens von Komponenten erkunden.

Voraussetzungen

Um dieses Tutorial abzuschließen, benötigen Sie:

• Ein Verständnis für JavaScript-Variablen und Funktionen. Sie können die "How To Code in JavaScript"-Serie zur Vertiefung lesen.
• Ein Verständnis für das Importieren, Exportieren und Rendern von React-Komponenten. Sie können unsere "How To Code in React.js"-Serie zur Vertiefung lesen. Es ist keine lokale Entwicklung erforderlich. CodeSandbox-Beispiele stehen für weitere Experimente zur Verfügung.

Laden von Komponenten bedarfsorientiert

In den vorherigen Beispielen haben Sie Komponenten automatisch geladen, ohne eine Leistungsverbesserung zu erzielen. Sie können die Leistung verbessern, indem Sie JavaScript nur dann senden, wenn es benötigt wird, wenn ein Benutzer eine Aktion ausführt. Angenommen, Sie müssen verschiedene Arten von Diagrammen für folgende Daten anzeigen:

const data = [
  {
    id: 'php',
    label: 'php',
    value: 372,
    color: 'hsl(233, 70%, 50%)'
  },
  // Weitere Datensätze...
];

Sie können die Website schneller laden, indem Sie nicht verwendetes JavaScript vermeiden und Diagramme nur dann laden, wenn sie benötigt werden. Hier ist eine Beispielimplementierung:

import React, { lazy, useState } from 'react';
import shortid from 'shortid';

const importView = chartName =>
  lazy(() =>
    import(`./charts/${chartName}`)
      .catch(() => import(`./charts/NullChart`))
  );

const data = [ ... ];

export default function App() {
  // Code zur bedarfsorientierten Komponentenladung
}

In dieser Implementierung werden Diagrammkomponenten nur geladen, wenn der Benutzer auf die entsprechenden Schaltflächen klickt. Dies führt zu einer effizienten Nutzung von Ressourcen und einer schnelleren Seitenausführung mit Hooks.