React-Performance-Optimierungstechniken: Memoisierung, Lazy Loading und mehr

Beim Erstellen moderner Webanwendungen ist die Leistung entscheidend. Benutzer erwarten schnelle, reaktionsschnelle Apps und selbst eine geringfügige Verzögerung kann zu Frustration führen. Obwohl React leistungsstark ist, kann es manchmal zu Leistungsengpässen kommen, insbesondere wenn Anwendungen immer größer und komplexer werden. Glücklicherweise gibt es mehrere Techniken zur Leistungsoptimierung, darunter Memoisierung, Lazy Loading und mehr.

In diesem Leitfaden erläutern wir einige der effektivsten Möglichkeiten zur Optimierung der Leistung Ihrer React-Anwendungen. Wir behandeln die Grundlagen des Memoisierens, Lazy Loading und Tools wie den React Profiler, um Ihnen bei der Identifizierung und Behebung von Engpässen zu helfen. Fangen wir an!

Einführung: Warum Leistung in modernen React-Apps wichtig ist

Stellen Sie sich Ihre Web-App wie ein Auto vor – egal wie elegant sie von außen aussieht, wenn sie nicht gut funktioniert, leidet das Benutzererlebnis. In React-Apps bezieht sich diese „Leistung“ darauf, wie schnell Ihre Komponenten gerendert werden und wie effizient sie aktualisiert werden, wenn sich die Daten oder der Status ändern.

Wenn Ihre React-App skaliert, kann das unnötige erneute Rendern von Komponenten oder das gleichzeitige Laden umfangreicher Pakete zu einer langsameren Leistung führen. Aus diesem Grund ist das Erlernen von React-Performance-Optimierungstechniken für die Erstellung reibungsloser, leistungsstarker Anwendungen von entscheidender Bedeutung.

Auswendiglernen in React

So nutzen Sie React.memo und useMemo effektiv

Memoisierung ist ein schickes Wort, das einfach bedeutet, das Ergebnis eines Funktionsaufrufs zwischenzuspeichern, damit Sie es nicht jedes Mal neu berechnen müssen. In React trägt die Memoisierung dazu bei, unnötige erneute Renderings zu vermeiden, indem sie sich das Ergebnis eines vorherigen Renderings merkt und dieses zwischengespeicherte Ergebnis verwendet, wenn sich nichts geändert hat.

React.memo

Beginnen wir mit React.memo. Diese Komponente höherer Ordnung verhindert, dass eine Komponente erneut gerendert wird, wenn sich ihre Requisiten nicht geändert haben.

Beispiel:

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return <div>Hello, {name}</div>;
});

In diesem Beispiel wird MyComponent nur dann neu gerendert, wenn sich die Namensstütze ändert. Wenn Sie denselben Namenswert übergeben, überspringt React das Rendering und verbessert so die Leistung.

Verwenden Sie Memo

Als nächstes kommt useMemo. Dieser Hook wird verwendet, um teure Berechnungen oder Werte in Ihren Funktionskomponenten zu speichern.

Beispiel:

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total + item.value, 0);
  }, [items]);

  return <div>Total Value: {expensiveCalculation}</div>;
}

Hier wird die Berechnung nur dann erneut ausgeführt, wenn sich das Elementarray ändert. Dies spart Zeit, da nicht bei jedem Rendern das gleiche Ergebnis neu berechnet werden muss.

Lazy Loading-Komponenten

Verbessern der Ladezeiten mit React.lazy

Lazy Loading ist eine Technik, bei der Komponenten nur dann geladen werden, wenn sie benötigt werden, anstatt alles im Voraus zu laden. Dies trägt dazu bei, die anfängliche Ladezeit Ihrer Anwendung zu verkürzen, sodass sie sich schneller anfühlt.

React bietet eine integrierte Funktion namens React.lazy(), mit der Sie Komponenten bei Bedarf laden können.

Beispiel:

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return <div>Hello, {name}</div>;
});

In diesem Beispiel wird MyComponent nur dann geladen, wenn es tatsächlich benötigt wird. Die Suspense-Komponente bietet eine Fallback-Benutzeroberfläche (wie ein Lade-Spinner), während die Komponente abgerufen wird, was die Benutzererfahrung reibungsloser macht.

React Profiler zur Leistungsüberwachung

So identifizieren Sie Engpässe

Es ist schwer, etwas zu optimieren, das man nicht messen kann. Hier kommt der React Profiler ins Spiel. Mit dem React Profiler können Sie die Leistung Ihrer Komponenten verfolgen, langsame Renderings identifizieren und die „Kosten“ von erneuten Renderings messen.

Um den React Profiler zu verwenden, umschließen Sie einfach einen Komponentenbaum mit und stellen Sie eine Rückruffunktion bereit, um die Leistungsdaten zu sammeln.

Beispiel:

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total + item.value, 0);
  }, [items]);

  return <div>Total Value: {expensiveCalculation}</div>;
}

Mit dem Profiler können Sie verfolgen, wie lange das Rendern jeder Komponente dauert, und Bereiche finden, in denen die Leistung verbessert werden kann, z. B. unnötiges erneutes Rendern.

Andere Optimierungsstrategien

Codeaufteilung, Optimierung der Ereignisverarbeitung und mehr

Über das Auswendiglernen und Lazy Loading hinaus gibt es mehrere andere Techniken, um die Leistung Ihrer React-App zu verbessern:

1. Code-Aufteilung: Teilen Sie Ihre App in kleinere Teile auf, die bei Bedarf mit der Code-Aufteilungsfunktion von Webpack geladen werden können. Dadurch verringert sich die anfängliche Bündelgröße.

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

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

1. Optimierung der Ereignisbehandlung: Verwenden Sie den useCallback-Hook, um Ereignishandler auswendig zu lernen und zu verhindern, dass sie bei jedem Rendern neu erstellt werden.

import { Profiler } from 'react';

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  console.log({ id, phase, actualDuration });
}

function MyApp() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <MyComponent />
    </Profiler>
  );
}

1. Entprellen und Drosseln: Optimieren Sie Ereignis-Listener wie Scrollen oder Größenänderung, indem Sie sie entprellen oder drosseln, um die Häufigkeit von Aktualisierungen zu begrenzen.

   const OtherComponent = lazy(() => import('./OtherComponent'));

Fazit: Mit diesen Techniken leistungsstarke Reaktionsanwendungen erstellen

Das Erstellen schneller und effizienter React-Anwendungen erfordert eine Kombination von Techniken. Durch die Verwendung von memoization mit React.memo und useMemo können Sie unnötige erneute Renderings verhindern. Durch das Lazy Loading von Komponenten mit React.lazy können Sie die Ladezeiten verkürzen, indem Sie Komponenten nur dann abrufen, wenn sie benötigt werden. Der React Profiler hilft Ihnen, Leistungsengpässe zu erkennen und zu optimieren.

In Kombination mit Strategien wie Code-Splitting und Ereignisoptimierung können Sie sicherstellen, dass Ihre React-Apps auch bei zunehmender Größe und Komplexität ein reibungsloses und reaktionsfähiges Benutzererlebnis bieten.

---

Sind Sie bereit, die Leistung Ihrer React-App auf die nächste Stufe zu heben? Probieren Sie diese Optimierungstechniken in Ihren Projekten aus und beobachten Sie, wie sich die Geschwindigkeit Ihrer App verbessert!

---

Wenn Ihnen dieser Artikel gefallen hat, denken Sie darüber nach, meine Arbeit zu unterstützen:

• Lade mir einen Kaffee ein
• Buchen Sie einen Anruf für Mentoring oder Karriereberatung
• Folgen Sie mir auf Twitter
• Vernetzen Sie sich auf LinkedIn

Das obige ist der detaillierte Inhalt vonReact-Performance-Optimierungstechniken: Memoisierung, Lazy Loading und mehr. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!