Der Performance-Optimierungs-Hook useMemo in React

Der erste Hook zur Leistungsoptimierung, den wir uns ansehen werden, ist useMemo.

Dieser Hook hilft, die Ergebnisse ressourcenintensiver Operationen zwischen den Bildschirm-Neurenderings zwischenzuspeichern und kann entsprechend helfen, unnötige umfangreiche Berechnungen zu vermeiden. Eine solche Zwischenspeicherung wird auch Memoisation genannt.

Sehen wir uns an, wie das funktioniert. Lassen Sie uns eine Komponente mit einem Button und einer Überschrift h3 erstellen:

return (
	<div>
		<h3>Text</h3>
		<button>click</button>
	</div>
);

Jetzt sorgen wir dafür, dass sich bei einem Klick auf die Überschrift ihre Farbe von Orange auf Grün und zurück ändert. Zuerst legen wir einen State isGreen an:

const [isGreen, setIsGreen] = useState(false);

Fügen wir im Attribut style der Überschrift eine Bedingung zur Farbänderung hinzu und hängen einen Klick-Handler an:

<h3 onClick={() => setIsGreen(!isGreen)}
	style={{ color: isGreen ? 'green' : 'orangered' }}
>Text</h3>

Lassen Sie uns außerdem einen Wert haben, der sich bei Klick auf unseren Button um eins erhöht. Legen wir dafür einen State an:

const [num, setNum] = useState(0);

Fügen wir die Behandlung des Klicks auf den Button hinzu:

<button onClick={() => setNum(num + 1)}>
	clicks
</button>

Lassen Sie uns außerdem eine Funktion square haben, die das Quadrat des Werts num zurückgibt. Das Ergebnis des Funktionsaufrufs werden wir in eine Variable result schreiben:

const result = square(num);

function square(num) {
	return num * num;
}

Geben wir result im Text des Buttons aus:

<button onClick={() => setNum(num + 1)}>
	clicks: {result}
</button>

Als Ergebnis haben wir Folgendes erhalten: Bei einem Klick auf den Button ändert sich der Wert num, der dann quadriert wird, und bei einem Klick auf die Überschrift ändert sich die Farbe der Überschrift.

Wir haben eine sehr kleine Komponente, alles funktioniert schnell, obwohl bei einem Klick auf die Überschrift zur Änderung ihrer Farbe die gesamte Komponente neu gerendert wird, und dementsprechend auch die Berechnungen neu stattfinden, die an den Button geknüpft sind, und das sogar, obwohl wir ihn nicht berührt haben. Und jetzt stellen Sie sich vor, wenn unsere Berechnungen umfangreich wären und alles jedes Mal neu berechnet werden müsste.

Lassen Sie uns unsere Funktion etwas erschweren, sie soll nun etwas länger "nachdenken". Auf diese Weise simulieren wir langwierige Berechnungen:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Einfach nichts tun ...
	}
	
	return num * num;
}

Klicken Sie nun auf die Überschrift. Es stellt sich heraus, dass wir jetzt aufgrund der langen Laufzeit der Funktion square (und den Button haben wir ja nicht berührt) eine Ewigkeit warten müssten, bis sich die Farbe der Überschrift ändert!

Hier kommt uns der Hook useMemo zur Hilfe. Dazu müssen wir als ersten Parameter eine Funktion übergeben, die den zu zwischenspeichernden Wert berechnet. Diese Funktion muss rein (pure) sein und keine Parameter entgegennehmen. Und als zweiten Parameter - die Abhängigkeiten in eckigen Klammern, mit anderen Worten, alle reaktiven Werte, die im Code der Funktion vorkommen. So werden wir in result jetzt eine solche Konstruktion schreiben:

const result = useMemo(() => square(num), [num]);

Klicken wir erneut auf die Überschrift. Jetzt, wenn wir den Button mit den Berechnungen nicht berühren und somit den Wert des States num nicht ändern, wird nichts neu berechnet, und React zeigt den zwischengespeicherten Wert im Button an, deshalb ändert unsere Überschrift schnell ihre Farbe.

Erstellen Sie eine Komponente App, platzieren Sie darin einen Absatz. Legen Sie einen State text mit dem Anfangswert 'react' an. Lassen Sie den Wert des States als Text des Absatzes anzeigen. Sorgen Sie dafür, dass bei einem Klick auf den Absatz an das Ende des Texts ein Ausrufezeichen angehängt wird.

Legen Sie einen weiteren State num an, mit einem Anfangswert von 0. Platzieren Sie in App einen weiteren Absatz. Sorgen Sie dafür, dass bei einem Klick darauf num um 1 erhöht wird.

Und jetzt fügen Sie in App die Funktion triple hinzu, die als Parameter num entgegennimmt und den verdreifachten Wert zurückgibt. Speichern Sie das Ergebnis des Funktionsaufrufs in der Variable result. Zeigen Sie result als Text des zweiten Absatzes an. Klicken Sie abwechselnd auf die Absätze, und bemerken Sie, wie langsam die Ausrufezeichen hinzugefügt werden.

Korrigieren Sie die Situation, indem Sie die langsame Funktion triple in useMemo wrappen.