Leistungsoptimierung mit dem useMemo-Hook
Der useMemo
-Hook ermöglicht es, das Ergebnis einer Funktion zu speichern (Memoisierung), wodurch aufwendige Berechnungen durch Zwischenspeicherung des Ergebnisses optimiert werden. Dies ist vorteilhaft, wenn häufig rechenintensive Operationen durchgeführt werden, die bei unveränderten Daten stets das gleiche Ergebnis liefern. Dadurch werden überflüssige Neuberechnungen vermieden, was zu einer verbesserten Performance führt.
Syntax:
Es wird eine neue Variable, beispielsweise cachedValue
, deklariert und dem useMemo
-Hook zugewiesen. Innerhalb der Klammern des Hooks wird eine Funktion (z. B. calculateValue
) übergeben, die zur Berechnung des gespeicherten Werts ausgeführt wird. Diese Funktion kann jede gültige JavaScript-Funktion sein. Zusätzlich wird ein zweites Argument übergeben – ein Array namens dependencies
–, das die Werte enthält, von denen der gespeicherte Wert abhängt.
const cachedValue = useMemo(calculateValue, dependencies)
Wenn sich eine der im dependencies
-Array angegebenen Abhängigkeiten ändert, wird der gespeicherte Wert neu berechnet. Bleiben die Abhängigkeiten zwischen den Render-Vorgängen jedoch gleich, gibt React den zuvor berechneten Wert zurück, ohne ihn erneut zu berechnen.
Hinweis
Diese Optimierung trägt dazu bei, die Performance zu verbessern, indem unnötige Berechnungen vermieden werden, und sorgt für eine effizientere Benutzererfahrung.
Beispiel 1
Wir erstellen die Komponente ShoppingCart
, die Informationen über die Anzahl der vom Benutzer ausgewählten Produkte speichert. Zusätzlich übernimmt sie die Logik zur Berechnung der Gesamtsumme, die angibt, welchen Betrag der Benutzer bezahlen muss. Das Hauptziel ist es, die Gesamtsumme zu memorisieren und sie nur dann neu zu berechnen, wenn sich 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, wodurch unnötige Neuberechnungen bei jedem erneuten Rendern der Komponente verhindert werden.
Zeilenweise Erklärung:
- Zeile 1: Import des
useMemo
-Hooks aus der React-Bibliothek zur Nutzung der Funktionalität; - Zeile 3: Die Komponente
ShoppingCart
wird mit der üblichen Funktionssyntax definiert; - Zeile 4-10: Die Variable
totalPrice
wird erstellt, die für den Gesamtpreis verantwortlich ist, den der Benutzer bezahlen muss. DeruseMemo
-Hook wird verwendet, um Berechnungen nicht bei jedem Render durchzuführen;- Zeile 5-9: Innerhalb der an
useMemo
übergebenen Pfeilfunktion wird die Logik zur Berechnung der gesamtensum
implementiert. Jedes Element im Arrayproducts
wird durchlaufen, der Preis mit derquantity
multipliziert und zur Variablensum
addiert; - Zeile 10: Das Abhängigkeitsarray
[products]
wird demuseMemo
-Hook übergeben. Dies gibt an, dass der gespeicherte Wert neu berechnet werden soll, wenn sich das Arrayproducts
ändert.
- Zeile 5-9: Innerhalb der an
- Zeile 12-31: Das Markup der Komponente wird gerendert.
- Zeile 16: Die Methode
map
wird verwendet, um jedes Produkt im Arrayproducts
zu rendern und ein entsprechendes JSX-Element zu erzeugen; - Zeile 17: Das Attribut
key
wird gesetzt, um ein effizientes Rendern der Array-Elemente zu gewährleisten und React zu helfen, jedes Element eindeutig zu identifizieren;
- Zeile 16: Die Methode
- Zeile 28: Der Wert der Variablen
totalPrice
wird im JSX gerendert und zeigt den berechneten Gesamtpreis an.
Vollständiger App-Code:
Hinweis
Es ist ratsam, die Hooks
useEffect
unduseMemo
nicht zu vermischen, um Klarheit zu gewährleisten und Verwirrung zu vermeiden. Der wesentliche Unterschied liegt in ihrem jeweiligen Zweck:useEffect
wird zur Verwaltung von Seiteneffekten und des Komponenten-Lebenszyklus verwendet, währenduseMemo
aufwändige Berechnungen speichert, um die Performance zu verbessern.
1. Was ist der Hauptzweck des useMemo
-Hooks in React?
2. Wann berechnet der useMemo
-Hook seinen gespeicherten Wert neu?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.17
Leistungsoptimierung mit dem useMemo-Hook
Swipe um das Menü anzuzeigen
Der useMemo
-Hook ermöglicht es, das Ergebnis einer Funktion zu speichern (Memoisierung), wodurch aufwendige Berechnungen durch Zwischenspeicherung des Ergebnisses optimiert werden. Dies ist vorteilhaft, wenn häufig rechenintensive Operationen durchgeführt werden, die bei unveränderten Daten stets das gleiche Ergebnis liefern. Dadurch werden überflüssige Neuberechnungen vermieden, was zu einer verbesserten Performance führt.
Syntax:
Es wird eine neue Variable, beispielsweise cachedValue
, deklariert und dem useMemo
-Hook zugewiesen. Innerhalb der Klammern des Hooks wird eine Funktion (z. B. calculateValue
) übergeben, die zur Berechnung des gespeicherten Werts ausgeführt wird. Diese Funktion kann jede gültige JavaScript-Funktion sein. Zusätzlich wird ein zweites Argument übergeben – ein Array namens dependencies
–, das die Werte enthält, von denen der gespeicherte Wert abhängt.
const cachedValue = useMemo(calculateValue, dependencies)
Wenn sich eine der im dependencies
-Array angegebenen Abhängigkeiten ändert, wird der gespeicherte Wert neu berechnet. Bleiben die Abhängigkeiten zwischen den Render-Vorgängen jedoch gleich, gibt React den zuvor berechneten Wert zurück, ohne ihn erneut zu berechnen.
Hinweis
Diese Optimierung trägt dazu bei, die Performance zu verbessern, indem unnötige Berechnungen vermieden werden, und sorgt für eine effizientere Benutzererfahrung.
Beispiel 1
Wir erstellen die Komponente ShoppingCart
, die Informationen über die Anzahl der vom Benutzer ausgewählten Produkte speichert. Zusätzlich übernimmt sie die Logik zur Berechnung der Gesamtsumme, die angibt, welchen Betrag der Benutzer bezahlen muss. Das Hauptziel ist es, die Gesamtsumme zu memorisieren und sie nur dann neu zu berechnen, wenn sich 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, wodurch unnötige Neuberechnungen bei jedem erneuten Rendern der Komponente verhindert werden.
Zeilenweise Erklärung:
- Zeile 1: Import des
useMemo
-Hooks aus der React-Bibliothek zur Nutzung der Funktionalität; - Zeile 3: Die Komponente
ShoppingCart
wird mit der üblichen Funktionssyntax definiert; - Zeile 4-10: Die Variable
totalPrice
wird erstellt, die für den Gesamtpreis verantwortlich ist, den der Benutzer bezahlen muss. DeruseMemo
-Hook wird verwendet, um Berechnungen nicht bei jedem Render durchzuführen;- Zeile 5-9: Innerhalb der an
useMemo
übergebenen Pfeilfunktion wird die Logik zur Berechnung der gesamtensum
implementiert. Jedes Element im Arrayproducts
wird durchlaufen, der Preis mit derquantity
multipliziert und zur Variablensum
addiert; - Zeile 10: Das Abhängigkeitsarray
[products]
wird demuseMemo
-Hook übergeben. Dies gibt an, dass der gespeicherte Wert neu berechnet werden soll, wenn sich das Arrayproducts
ändert.
- Zeile 5-9: Innerhalb der an
- Zeile 12-31: Das Markup der Komponente wird gerendert.
- Zeile 16: Die Methode
map
wird verwendet, um jedes Produkt im Arrayproducts
zu rendern und ein entsprechendes JSX-Element zu erzeugen; - Zeile 17: Das Attribut
key
wird gesetzt, um ein effizientes Rendern der Array-Elemente zu gewährleisten und React zu helfen, jedes Element eindeutig zu identifizieren;
- Zeile 16: Die Methode
- Zeile 28: Der Wert der Variablen
totalPrice
wird im JSX gerendert und zeigt den berechneten Gesamtpreis an.
Vollständiger App-Code:
Hinweis
Es ist ratsam, die Hooks
useEffect
unduseMemo
nicht zu vermischen, um Klarheit zu gewährleisten und Verwirrung zu vermeiden. Der wesentliche Unterschied liegt in ihrem jeweiligen Zweck:useEffect
wird zur Verwaltung von Seiteneffekten und des Komponenten-Lebenszyklus verwendet, währenduseMemo
aufwändige Berechnungen speichert, um die Performance zu verbessern.
1. Was ist der Hauptzweck des useMemo
-Hooks in React?
2. Wann berechnet der useMemo
-Hook seinen gespeicherten Wert neu?
Danke für Ihr Feedback!