Lazy Loading und Memoisierung | ReactJS | Teil 1

Vergleich von Lazy Loading und Memoization im Kontext von ReactJS, mit Definitionen, Anwendungsfällen und Beispielen:

---

Lazy Loading

Definition

Lazy Loading in React bezieht sich auf die Praxis, Komponenten oder Ressourcen nur dann zu laden, wenn sie benötigt werden, und nicht beim ersten Laden der Seite. Dies verkürzt die anfängliche Ladezeit und verbessert die Leistung.

Wichtige Punkte

Ziel: Reduzieren Sie die anfängliche Paketgröße und optimieren Sie die Leistung.

Bei Verwendung: Für Komponenten oder Assets, die nicht sofort benötigt werden (z. B. ein Modal oder ein Bild in einer ausgeblendeten Registerkarte).

Reaktionsfunktion: Erreicht mit React.lazy und Suspense.

Beispiel: Lazy Loading einer Komponente

React, { Suspense } aus 'react' importieren;

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

const App = () => {
zurück (

Willkommen in meiner App

Wird geladen...}>



);
};

Standard-App exportieren;

Verhalten: HeavyComponent wird nur geladen, wenn es gerendert wird.

---

Auswendiglernen

Definition

Memoisierung in React ist der Prozess, bei dem das Ergebnis einer Funktions- oder Komponentenwiedergabe zwischengespeichert wird, um eine unnötige Neuberechnung oder erneute Wiedergabe zu vermeiden. Es hilft, die Leistung zu verbessern, indem es redundante Vorgänge verhindert.

Wichtige Punkte

Ziel: Teure Neuberechnungen oder erneute Renderings vermeiden.

Bei Verwendung: Für rechenintensive Funktionen oder Komponenten, die wiederholt dieselben Requisiten erhalten.

React-Funktionen: Erreicht mit useMemo, useCallback und React.memo.

Beispiel: Auswendiglernen einer Komponente

import React, { useMemo } from 'react';

const ExpensiveCalculation = ({ number }) => {
const berechne = (num) => {
console.log('Berechnen...');
Rückgabenummer * 2; // Simulation einer teuren Operation
};

const result = useMemo(() => berechne(Zahl), [Zahl]);

Zurück

Ergebnis: {result};
};

Standard-ExpensiveCalculation exportieren;

Verhalten: Die Berechnung wird nur ausgeführt, wenn sich die Zahlenstütze ändert, wodurch redundante Berechnungen vermieden werden.

---

Wann jeweils zu verwenden?

Lazy Loading:
Verwenden Sie diese Option, wenn Ihre Anwendung über große Komponenten oder Ressourcen verfügt, die zurückgestellt werden können, bis sie benötigt werden (z. B. Dashboard-Diagramme oder bildintensive Galerien).

Auswendiglernen:
Verwenden Sie diese Option, wenn Ihre App wiederholte Berechnungen durchführt oder Komponenten aufgrund unveränderter Requisiten oder Zustände unnötigerweise neu rendert.

Das obige ist der detaillierte Inhalt vonLazy Loading und Memoisierung | ReactJS | Teil 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!