Der useMemo Hook ermöglicht es uns, das Ergebnis einer Funktion zu speichern, indem er teure Berechnungen durch Zwischenspeicherung des Ergebnisses optimiert. Dies ist vorteilhaft, wenn wir häufige und ressourcenintensive Berechnungen haben, die dasselbe Ergebnis liefern, wenn sich die Daten nicht ändern. Dies eliminiert die Notwendigkeit für redundante Neuberechnungen und führt zu einer verbesserten Leistung.

Syntax:

Wir deklarieren eine neue Variable, wie cachedValue, und weisen sie dem useMemo Hook zu. Innerhalb der Klammern des Hooks geben wir eine Funktion an (z.B. calculateValue), die ausgeführt wird, um den zwischengespeicherten Wert zu berechnen. Diese Funktion kann jede gültige JavaScript-Funktion sein. Zusätzlich fügen wir ein zweites Argument hinzu - ein Array namens dependencies - das aus den Werten besteht, von denen der zwischengespeicherte Wert abhängt.

const cachedValue = useMemo(calculateValue, dependencies)

Wenn sich eine der in dem dependencies Array angegebenen Abhängigkeiten ändert, wird der zwischengespeicherte Wert neu berechnet. Wenn die Abhängigkeiten jedoch zwischen den Renderings gleich bleiben, gibt React den zuvor berechneten Wert ohne Neuberechnung zurück.

Hinweis

Diese Optimierung hilft, die Leistung zu verbessern, indem unnötige Berechnungen vermieden werden, und führt zu einer effizienteren Benutzererfahrung.

Beispiel 1

Lassen Sie uns die ShoppingCart Komponente erstellen, die die Informationen über die Anzahl der vom Benutzer ausgewählten Produkte speichert. Zusätzlich wird sie die Logik zur Berechnung der Gesamtsumme behandeln, die den Betrag angibt, den der Benutzer zahlen muss. Unser Hauptziel ist es, die Gesamtsumme zu speichern und sie nur dann neu zu berechnen, wenn der Benutzer die an diese Komponente übergebene products Prop ändert.

import React, { useMemo } from "react";

const ShoppingCart = ({ products }) => {
  const totalPrice = useMemo(() => {
    let sum = 0;
    for (const item of products) {
      sum += item.price * item.quantity;
    }
    return sum;
  }, [products]);

  return (
    <div>
      <h2>Shopping Cart</h2>
      <ul>
        {products.map(({ id, name, price, quantity }) => (
          <li key={id}>
            <p>
              <span>{name} -</span>
              <span>
                ${price} x {quantity}
              </span>
            </p>
          </li>
        ))}
      </ul>
      <h3>
        Total Price: <span>${totalPrice}</span>
      </h3>
    </div>
  );
};

Die Berechnung des totalPrice erfolgt innerhalb des useMemo Hooks, der unnötige Neuberechnungen bei jedem erneuten Rendern der Komponente verhindert.

Zeilenweise Erklärung:

• Zeile 1: Wir importieren den useMemo Hook aus der React-Bibliothek, um seine Funktionalität zu nutzen;
• Zeile 3: Die ShoppingCart Komponente wird mit der konventionellen Funktionssyntax definiert;
• Zeile 4-10: Wir erstellen die totalPrice Variable, die für den Gesamtpreis verantwortlich ist, den der Benutzer zahlen muss. Der useMemo Hook wird verwendet, um Berechnungen nicht bei jedem Rendern durchzuführen;
  • Zeile 5-9: Innerhalb der an useMemo übergebenen Pfeilfunktion wird die Logik zur Berechnung der gesamten sum implementiert. Jedes Element im products Array wird iteriert, und der Preis wird mit der quantity multipliziert und zur sum Variable hinzugefügt;
  • Zeile 10: Das Abhängigkeitsarray [products] wird dem useMemo Hook bereitgestellt. Dies zeigt an, dass der memoized Wert neu berechnet werden sollte, wenn sich das products Array ändert.
• Zeilen 12-31: Das Markup der Komponente wird gerendert.
  1. Zeile 16: Die map Methode wird verwendet, um jedes Produkt im products Array zu rendern und ein entsprechendes JSX-Element zu erstellen;
  2. Zeile 17: Das key Attribut wird gesetzt, um eine effiziente Darstellung der Array-Elemente zu gewährleisten und React zu helfen, jedes Element eindeutig zu identifizieren;
  3. Zeile 28: Der Wert der totalPrice Variable wird innerhalb des JSX gerendert und zeigt den berechneten Gesamtpreis an.

Vollständiger App-Code:

Hinweis

Es wird empfohlen, die Hooks useEffect und useMemo nicht zu vermischen, um Klarheit zu gewährleisten und Verwirrung zu vermeiden. Der wesentliche Unterschied liegt in ihren jeweiligen Zwecken: useEffect wird zur Verwaltung von Nebeneffekten und dem Komponentenlebenszyklus verwendet, während useMemo aufwendige Berechnungen speichert, um die Leistung zu verbessern.