Steigern Sie die Leistung Ihrer React-App mit Memoization: Entdecken Sie useMemo, useCallback und React.memo

Die Verbesserung der Leistung Ihrer Website ist ein entscheidender Schritt zur Verbesserung des Benutzererlebnisses und zur Gewährleistung einer soliden, reaktionsfähigen Benutzeroberfläche. Wenn Sie an einem React- oder Next.js-Projekt mit einigen ressourcenintensiven Komponenten arbeiten, ist es selbstverständlich, dass Sie sich über deren Auswirkungen auf die Leistung Sorgen machen. Hier kommt die Memoisierung in React ins Spiel – sie trägt dazu bei, diese „teuren“ Komponenten zu beschleunigen, was zu einem reibungsloseren Erlebnis für Ihre Benutzer führt.

In diesem Artikel behandle ich die Memoisierung und stelle React-Hooks vor, die die Leistung Ihrer App optimieren können, wie useMemo(), useCallback() und die React.memo Higher-Order Component (HOC). Lasst uns eintauchen!

Was ist Memoisierung in React?

Memoisierung ist eine Technik, die zur Beschleunigung von Programmen verwendet wird, indem die Ergebnisse von Rechenaufgaben – wie z. B. Funktionsaufrufen – zwischengespeichert werden, sodass bei erneuter Bereitstellung derselben Eingaben das zwischengespeicherte Ergebnis zurückgegeben wird, anstatt es neu zu berechnen.

Der useMemo-Hook: Zwischenspeichern von Ergebnissen in React

useMemo ist ein Hook, der das Funktionsergebnis zwischen dem erneuten Rendern oder Aktualisieren der Komponente zwischenspeichert oder speichert.

Mit diesem Hook können Sie also das Ergebnis einer Funktion zwischenspeichern, die sich in Ihrer Komponente befindet, und beim nächsten erneuten Rendern wird Ihre Komponente das Cache-Ergebnis verwenden, wenn die Eingabe dieser Funktion nicht geändert wird.

So implementieren Sie useMemo:

useMemo ist ein Hook, der Ihre nicht optimierte Funktion als Rückruf und eine Liste von Abhängigkeiten verwendet. React entscheidet dann, wann diese Funktion aufgerufen wird, entweder während des ersten Renderings oder bei nachfolgenden erneuten Renderings.

• Erstes Rendern: Während des ersten Renderns ruft React die useMemo-Funktion auf, um das Ergebnis der von Ihnen bereitgestellten Rückruffunktion zu berechnen und zu speichern.

• Erneutes Rendern: Beim erneuten Rendern ruft React useMemo auf, um zu überprüfen, ob sich die Abhängigkeiten geändert haben. Wenn sich die Abhängigkeiten nicht geändert haben, verwendet React den beim letzten Rendern zwischengespeicherten Wert wieder. Wenn sich die Abhängigkeiten jedoch geändert haben, ruft useMemo die Callback-Funktion erneut auf, um den aktualisierten Wert neu zu berechnen und im Cache zu speichern.

Beispiel:

import React, { useMemo } from 'react';

const MyComponent = ({ number }) => {
  const squaredNumber = useMemo(() => number * number, [number]);

  return <div>Squared Number: {squaredNumber}</div>;
};

squaredNumber wird nur berechnet, wenn sich die Zahl ändert. useMemo speichert diese Berechnung zwischen, sodass sie nicht bei jedem Rendern unnötig neu berechnet wird.

Der useCallback-Hook: Funktionsdefinitionen zwischenspeichern

useCallback ist ein Hook, der die Definition einer Funktion zwischen dem erneuten Rendern oder Aktualisieren von Komponenten zwischenspeichert oder speichert.

Mit diesem Hook können Sie die Definition einer Funktion über mehrere erneute Renderings hinweg speichern, sodass React diese zwischengespeicherte Version wiederverwendet, solange sich die Abhängigkeiten der Funktion nicht geändert haben.

So implementieren Sie useCallback:

useCallback ist ein Hook, der eine Funktion (als Callback) und eine Liste von Abhängigkeiten akzeptiert. React entscheidet dann, wann diese Funktion zurückgegeben (nicht aufgerufen) wird – entweder während des ersten Renderings oder bei nachfolgenden erneuten Renderings.

• Erstes Rendern: Während des ersten Renderns ruft React useCallback auf, um die Funktion zu speichern, die Sie als Callback übergeben haben.

• Erneutes Rendern: Beim erneuten Rendern ruft React useCallback auf, um zu überprüfen, ob sich die Abhängigkeiten geändert haben. Wenn sich die Abhängigkeiten nicht geändert haben, verwendet React die beim letzten Rendern zwischengespeicherte Funktion wieder. Wenn sich die Abhängigkeiten geändert haben, speichert useCallback die aktualisierte Funktion und gibt sie zurück.

Beispiel:

import React, { useMemo } from 'react';

const MyComponent = ({ number }) => {
  const squaredNumber = useMemo(() => number * number, [number]);

  return <div>Squared Number: {squaredNumber}</div>;
};

Die React.memo-Funktion: Unnötiges erneutes Rendern verhindern

Wie Sie vielleicht wissen, führt jede Aktualisierung des Status oder der Requisiten der übergeordneten Komponente dazu, dass alle untergeordneten Komponenten neu gerendert werden, wenn Sie über eine übergeordnete Komponente und untergeordnete Komponenten verfügen. In kleinen Projekten stellt dies möglicherweise kein Problem dar, aber in größeren und komplexeren Anwendungen kann sich unnötiges erneutes Rendern untergeordneter Komponenten auf die Leistung auswirken. Um dieses Problem zu beheben, stellt React die Funktion memo() bereit.

Mit der Memo-Funktion (oder React.memo) können Sie eine Komponente umschließen, um zu verhindern, dass sie erneut gerendert wird, wenn die übergeordnete Komponente aktualisiert wird. Die verpackte Komponente wird nur dann erneut gerendert, wenn sich ihre eigenen Requisiten oder ihr Status ändern.

Wenn Sie memo() zum ersten Mal für eine Komponente aufrufen, rendert und speichert React die Komponente. Bei nachfolgenden Renderings verwendet React diese zwischengespeicherte Version, solange sich die Requisiten und der Status der Komponente nicht geändert haben. Beachten Sie, dass memo() nur Neu-Renderings für unveränderte Requisiten und Zustände vermeidet – sobald sich diese ändern, rendert memo() die zwischengespeicherte Komponente entsprechend neu und aktualisiert sie.

So implementieren Sie React.memo:

Um Memo in Ihrer Komponente zu implementieren, umschließen Sie einfach die Komponente, deren unnötiges erneutes Rendern verhindert werden soll, mit memo() oder React.memo():

import React, { useState, useCallback } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [multiplier, setMultiplier] = useState(2);

  // Memoize the callback with `count` as a dependency
  const calculate = useCallback(() => {
    console.log("Calculating:", count * multiplier);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Multiplier: {multiplier}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setMultiplier(multiplier + 1)}>Increment Multiplier</button>
      <button onClick={calculate}>Calculate</button>
    </div>
  );
};

export default MyComponent;

Hinweis:
Wenn Sie ein Objekt als Requisite an eine in memo() eingeschlossene Komponente übergeben, wird die Komponente bei jeder Aktualisierung erneut gerendert, auch wenn sich das Objekt nicht geändert hat. Dies geschieht, weil React Object.is verwendet, um frühere und aktuelle Requisiten zu vergleichen. Während Object.is(3, 3) true zurückgibt, gibt Object.is({}, {}) false zurück, da zwei verschiedene Objektreferenzen niemals als gleich betrachtet werden.

Um dies zu vermeiden, können Sie useMemo verwenden, um das Objekt zwischenzuspeichern und die gleiche Referenz über alle Renderings hinweg beizubehalten:

import React from 'react';

const MyComponent = ({ data }) => {
  return <div>{data.value}</div>;
};

export default React.memo(MyComponent);

In diesem Beispiel stellt useMemo sicher, dass das Datenobjekt dieselbe Referenz hat, und verhindert so unnötige erneute Renderings von MyComponent.

Vielen Dank für das Lesen meines Artikels! Wenn Sie mehr über Next.js, React, JavaScript und mehr erfahren möchten, folgen Sie gerne meiner Website: saeed-niyabati.ir. Zögern Sie nicht, uns bei Fragen zu kontaktieren. Bis zum nächsten Mal!

Das obige ist der detaillierte Inhalt vonSteigern Sie die Leistung Ihrer React-App mit Memoization: Entdecken Sie useMemo, useCallback und React.memo. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!