API memo in React

Bevor wir den nächsten Hook betrachten, müssen wir auch die nützliche API memo erwähnen, die uns hilft, ein erneutes Rendern einer Komponente zu vermeiden, wenn ihre Props unverändert bleiben.

Lassen Sie uns dies an einem Beispiel verdeutlichen. Wir erstellen eine Komponente App, die zwei Eingabefelder hat, in die, nehmen wir an, Vorname und Nachname eingegeben werden:

return (
	<div>
		<label>
			name:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			surname:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

Fügen wir am Anfang der Komponente States für sie hinzu:

const [name, setName] = useState('');
const [surn, setSurn] = useState('');

Erstellen wir noch eine Kindkomponente Child.js, sie soll eine Begrüßung ausgeben, in der der eingegebene Vorname angezeigt wird. Außerdem wird in der Konsole ein String 'child render' bei jedem Rendern dieser Komponente ausgegeben:

function Child({ name }) {
	console.log('child render');
	return <h3>Hello {name}!</h3>;
}

Fügen wir Child im Markup der Hauptkomponente nach dem letzten Eingabefeld hinzu und übergeben ihm den Vornamen als Prop:

<Child name={name} />

Importieren wir sie in die Hauptkomponente:

import Child from './Child';

Und jetzt öffnen wir die Konsole und geben in die Eingabefelder Vorname und Nachname ein. Hier werden wir sehen, dass selbst bei der Eingabe von Zeichen in das Feld für den Nachnamen, unsere Kindkomponente jedes Mal neu gerendert wird. Kein Problem, es ist ja nur eine kleine Komponente. Stellen Sie sich aber vor, wenn diese Komponente eine große Datenmenge anzeigen würde und dabei jedes Mal neu gerendert werden müsste.

Und jetzt wickeln wir die Kindkomponente in memo ein und schauen, wie sich das Rendering verändert. Zuerst importieren wir memo in sie:

import { memo } from 'react';

Dann erstellen wir eine neue Variable und weisen ihr unser Child zu, eingewickelt in memo. Wir erhalten folgenden Funktionsausdruck:

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>Hello {name}!</h3>;
});

Wir öffnen die Konsole und geben wieder Vorname und Nachname in die Felder ein. Jetzt sehen wir, dass bei der Eingabe des Nachnamens unsere Kindkomponente nicht neu gerendert wird.

Man muss sich merken, dass dies nicht funktionieren wird, wenn sich bei unveränderten Props die von der Komponente verwendeten States ändern oder der Kontext, der Änderungen verwendet.

Nehmen Sie den Code der Komponente App, den wir in dieser Lektion erstellt haben, lassen Sie darin nur das erste Eingabefeld. Erstellen Sie eine React Komponente Text, die einen Absatz mit dem Text 'long text' enthält, und platzieren Sie sie in App nach dem Eingabefeld.

Fügen Sie in der Komponente Text die Zeile console.log('text render'); hinzu. Stellen Sie sicher, dass bei der Eingabe von Zeichen in das Eingabefeld die Komponente Text jedes Mal neu gerendert wird.

Und jetzt wickeln Sie die Komponente Text in memo ein. Stellen Sie sicher, dass bei der Eingabe von Zeichen in das Eingabefeld die Komponente Text nicht erneut gerendert wird.