React.js Lazy Loading: ERKLÄRT-js-Tutorial-php.cn

Eine vollständige Anleitung mit einem Spickzettel und einem Beispiel

Kurze Einführung

Lazy Loading ist eine effektive Technik zur Leistungsoptimierung in der Webentwicklung, insbesondere bei Bibliotheken und Frameworks wie React. Dabei werden Komponenten oder Ressourcen nur dann geladen, wenn sie benötigt werden, entweder als Reaktion auf eine Benutzeraktion oder wenn Elemente auf dem Bildschirm angezeigt werden sollen. Dies kann die anfängliche Ladezeit der Anwendung verkürzen, den Ressourcenverbrauch verringern und das Benutzererlebnis verbessern, insbesondere auf Geräten mit eingeschränkter Leistung oder langsamen Internetverbindungen.

So funktioniert Lazy Loading in React

React implementiert Lazy Loading hauptsächlich über die Funktion React.lazy. Es wird häufig in Kombination mit React.Suspense verwendet, das den Ladestatus und die Fallback-Benutzeroberfläche verwaltet. Im Folgenden finden Sie die wichtigsten Schritte, um zu verstehen, wie Lazy Loading in einer React-Anwendung implementiert wird.

React.js Lazy Loading: EXPLAINED
1. Dynamischer Import mit React.lazy

React.lazy ermöglicht den dynamischen Import von Komponenten nur bei Bedarf. Das Ergebnis ist ein Versprechen, das in ein Modul aufgelöst wird, das eine Standard-React-Komponente enthält.

const DelayedComponent = React.lazy(() => import('./DelayedComponent'));

Nach dem Login kopieren

In diesem Beispiel wird DelayedComponent nur geladen, wenn React versucht, es zum ersten Mal zu rendern.

2. Einpacken mit React.Suspense

Um den Ladezustand zu verwalten, wird React.Suspense verwendet, um träge geladene Komponenten zu umschließen. Dadurch können Sie Fallback-Inhalte (z. B. einen Lade-Spinner) anzeigen, während die Komponente geladen wird.

import React, { Suspense } from 'react'; function App() { return (  Loading content...
}>

); }

Nach dem Login kopieren

Im obigen Snippet ist wartet auf das Laden von DelayedComponent, bevor es angezeigt wird. Wenn das Laden einige Zeit in Anspruch nimmt, wird dem Benutzer „Inhalt wird geladen...“ angezeigt.

Bei Lazy Loading ist die Fehlerbehandlung im Falle von Fehlern (z. B. einem Netzwerkausfall) unerlässlich. Sie können eine Fehlermeldung oder eine Fallback-Komponente anzeigen, wenn während des Ladevorgangs etwas schief geht.

Lazy Loading ist besonders nützlich im Kontext des Routings, bei dem verschiedene Bildschirme oder Komponenten basierend auf der URL geladen werden. Mit Routern wie React Router können Sie React.lazy verwenden, um Komponenten für jede Route dynamisch zu laden.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import React, { Suspense } from 'react'; const HomeView = React.lazy(() => import('./HomeView')); const AboutView = React.lazy(() => import('./AboutView')); function App() { return ( Loading views...