ReactJS - Verwenden von useMemo: Ein Anfängerleitfaden

Hallo da draußen, ambitionierte React-Entwickler! Heute tauchen wir in eines der leistungsstarken Hooks von React ein: useMemo. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind; ich werde Sie Schritt für Schritt durch dieses Konzept führen, genau wie ich es in meinen Jahren des Unterrichtens für unzählige Schüler getan habe. Also, holen Sie sich eine Tasse Kaffee (oder Tee, wenn das Ihr Ding ist) und lassen Sie uns gemeinsam diese aufregende Reise antreten!

Was ist useMemo?

Bevor wir uns den Details widmen, lassen Sie uns verstehen, was useMemo eigentlich ist. Stellen Sie sich vor, Sie backen Kekse (ich liebe diese Analogie, weil, na ja, wer liebt Kekse nicht?). Sie haben ein Rezept, das einige komplexe Berechnungen erfordert, um die perfekte Menge an Schokostreuseln zu bestimmen. Würden Sie diese Berechnung jedes Mal neu durchführen, wenn Sie Kekse backen, oder würden Sie sie aufschreiben und wiederverwenden? Genau das ist es, was useMemo macht – es speichert (oder "memoisiert") das Ergebnis einer Berechnung, damit Sie es nicht unnötig wiederholen müssen.

In React-Begriffen ist useMemo ein Hook, der es Ihnen ermöglicht, das Ergebnis einer Berechnung zwischen Render-Vorgängen zu cachen. Es ist wie ein superkluger Assistent, der komplexe Aufgaben für Sie remembers!

Signature der useMemo Hook

Schauen wir uns an, wie wir den useMemo Hook tatsächlich verwenden:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Keine Panik! Ich weiß, dass das zunächst vielleicht abschreckend aussehen mag, aber lassen Sie uns das zusammen auseinandernehmen:

1. useMemo ist der Name unseres Hooks.
2. Es nimmt zwei Argumente:

• Eine Funktion, die unsere Berechnung durchführt (() => computeExpensiveValue(a, b))
• Ein Array von Abhängigkeiten ([a, b])

3. Es gibt einen memoisierten Wert zurück.

Denken Sie daran: useMemo sagt: "Hey React, führe diese Berechnung nur neu aus, wenn a oder b sich geändert hat. Andernfalls gib mir einfach das Ergebnis, das du letztes Mal gespeichert hast."

Anwendung des useMemo Hooks

Nun sehen wir useMemo in Aktion mit einem realen Beispiel. Stellen wir uns vor, wir bauen einen Einkaufswagen für einen Online-Shop (weil wer liebt nicht das Online-Shopping?).

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

function ShoppingCart() {
const [cart, setCart] = useState([
{ id: 1, name: "React T-Shirt", price: 20 },
{ id: 2, name: "React Hoodie", price: 40 },
{ id: 3, name: "React Cap", price: 15 }
]);

const totalPrice = useMemo(() => {
console.log("Berechnung des Gesamtpreises...");
return cart.reduce((total, item) => total + item.price, 0);
}, [cart]);

return (
<div>
<h2>Ihr Einkaufswagen</h2>
{cart.map(item => (
<div key={item.id}>{item.name} - ${item.price}</div>
))}
<h3>Gesamt: ${totalPrice}</h3>
</div>
);
}

Lassen Sie uns das auseinandernehmen:

1. Wir haben einen Einkaufswagen mit einigen Artikeln, die jeweils einen Namen und einen Preis haben.
2. Wir verwenden useMemo, um den Gesamtpreis aller Artikel im Einkaufswagen zu berechnen.
3. Die Berechnung wird nur neu durchgeführt, wenn der cart sich ändert (das macht [cart] am Ende).
4. Wir zeigen jeden Artikel und den Gesamtpreis an.

Warum ist das nützlich? Stellen Sie sich vor, die Berechnung des Gesamtpreises wäre eine wirklich komplexe Operation (vielleicht involving Rabatte, Steuern, etc.). Ohne useMemo würde React diese Berechnung bei jeder Komponenten-Neu-renderung durchführen, selbst wenn der Einkaufswagen nicht geändert hat. Mit useMemo wird sie nur bei Bedarf neu berechnet, was möglicherweise viel Rechenzeit spart!

Beibehaltung von Referenzen

Eine weitere super-coole Eigenschaft von useMemo ist seine Fähigkeit, Referenzen zu bewahren. "Was ist das?" höre ich Sie fragen. Gut, lassen Sie mich das mit einem anderen Beispiel erklären.

Stellen wir uns vor, Sie bauen eine To-Do-Liste-App (weil jeder Programmierer mal eine davon gebaut hat, versprochen!).

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

function TodoList() {
const [todos, setTodos] = useState([
{ id: 1, text: "React lernen", completed: false },
{ id: 2, text: "Große Apps bauen", completed: false },
{ id: 3, text: "Die Welt verändern", completed: false }
]);

const [filter, setFilter] = useState('all');

const filteredTodos = useMemo(() => {
console.log("Todos filtern...");
switch(filter) {
case 'completed':
return todos.filter(todo => todo.completed);
case 'active':
return todos.filter(todo => !todo.completed);
default:
return todos;
}
}, [todos, filter]);

return (
<div>
<h2>Meine To-Do-Liste</h2>
<button onClick={() => setFilter('all')}>Alle</button>
<button onClick={() => setFilter('active')}>Aktiv</button>
<button onClick={() => setFilter('completed')}>Abgeschlossen</button>
{filteredTodos.map(todo => (
<div key={todo.id}>{todo.text}</div>
))}
</div>
);
}

In diesem Beispiel:

1. Wir haben eine Liste von Todos und einen Filter-Zustand.
2. Wir verwenden useMemo, um eine nach dem aktuellen Filter gefilterte Liste von Todos zu erstellen.
3. Die gefilterte Liste wird nur neu berechnet, wenn todos oder filter sich ändern.

Das Magische daran ist, dass filteredTodos immer die gleiche Objekt-Referenz sein wird,除非 todos oder filter sich ändern. Das ist superwichtig für die Leistungsoptimierung, insbesondere wenn Sie diese Liste an Unterkomponenten übergeben.

Zusammenfassung

Und da haben Sie es, Leute! Wir sind durch die Welt von useMemo gereist, von der Grundidee bis hin zu realen Beispielen. Denken Sie daran, dass useMemo wie Ihr treuer Sidekick ist, der Ihnen immer zur Seite steht, um Ihre React-Anwendungen zu optimieren, indem er unnötige Berechnungen vermeidet.

Hier ist eine schnelle Referenztabelle der Methoden, die wir besprochen haben:

Methode	Zweck	Syntax
useMemo	Teure Berechnungen memoisieren	useMemo(() => computation, dependencies)

Wie bei jedem Werkzeug im Programmieren sollten Sie useMemo klug einsetzen. Es ist großartig für die Leistungsoptimierung, aber eine übermäßige Nutzung kann Ihren Code unnötig komplex machen, ohne merkliche Vorteile zu bringen. Wie ich meinen Schülern immer sage: "Mit großer Macht kommt große Verantwortung!"

Weiters üben, weiter bauen und vor allem: Spaß mit React haben. Bevor Sie es wissen, werden Sie großartige Anwendungen erstellen, die selbst erfahrene Entwickler beeindrucken werden! Und wenn Sie sich jemals festgefahren fühlen, stellen Sie sich vor, Sie erklären Ihren Code einem Gummiente. Es wirkt Wunder, versprochen!

Frohes Coden, zukünftige React-Meister!

Credits: Image by storyset