Hook useRef für die Arbeit mit Refs in React

In dieser Lektion werden wir mit Refs arbeiten. Zur Veranschaulichung lassen Sie uns die Funktionsweise des Hooks useRef im Vergleich zum Hook useState analysieren.

Lassen Sie uns eine Komponente mit einer Schaltfläche erstellen:

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

Importieren wir useState in die Komponente:

import { useState } from 'react';

Und legen wir einen State state an:

const [state, setState] = useState(0);

Jetzt sorgen wir dafür, dass bei einem Klick auf die Schaltfläche unser state um 1 erhöht wird. Den State-Wert geben wir direkt im Text der Schaltfläche aus:

<button onClick={handleStateClick}>
	state click: {state}
</button>

Beschreiben wir die Funktion für die Behandlung des Klicks auf die Schaltfläche handleStateClick:

function handleStateClick() {
	setState(state + 1);
}

Klicken wir ein paar Mal auf die Schaltfläche und sehen, wie der State-Wert wächst.

Jetzt erstellen wir eine App-Komponente, aber verwenden nicht den State, sondern ein Ref.

Importieren wir zunächst useRef in die Komponente:

import { useRef } from 'react';

Und legen wir ein Ref ref an. Als Ergebnis gibt der Hook useRef ein Ref-Objekt mit der einzigen Eigenschaft current zurück, die für uns weiterhin interessant sein wird. Setzen wir seinen Anfangswert auf 0:

const ref = useRef(0);

Hängen wir einen Klick-Handler an die Schaltfläche. Denken Sie daran, dass wir nicht das ref selbst lesen/ändern sollen, sondern seine Eigenschaft current:

<button onClick={handleRefClick}>
	ref click: {ref.current}
</button>

Fügen wir die Funktion für die Behandlung des Klicks auf unsere Schaltfläche hinzu. Hier werden wir current um 1 erhöhen, wie im vorherigen Beispiel mit dem State. Im Gegensatz zum State, wo die Funktion setState zur Änderung seines Wertes erforderlich ist, arbeiten wir mit der Eigenschaft des Refs direkt:

function handleRefClick() {
	ref.current = ref.current + 1;
}

Klicken wir nun auf unsere Schaltfläche. Und was sehen wir? Beim Klick darauf bleibt es, wie ursprünglich 0, und ändert sich nicht.

Sie können natürlich anzweifeln, dass sich der Wert überhaupt ändert. Lassen Sie uns das überprüfen. Dazu fügen wir in der Funktion des Klick-Handlers eine weitere Codezeile hinzu, die den Wert current in der Konsole ausgibt:

function handleRefClick() {
	ref.current = ref.current + 1;
	console.log('ref click: ' + ref.current);
}

Wenn wir jetzt die Konsole im Browser öffnen, klicken wir erneut auf die Schaltfläche und stellen sicher, dass sich der Wert tatsächlich bei jedem Klick ändert und es keinen Betrug gibt.

Jetzt sehen wir, dass sich im Gegensatz zum State die Änderung des Ref-Wertes nicht ein erneutes Rendern der Komponente auslöst. Daher sehen wir jedes Mal im Text der Schaltfläche den Anfangswert 0.

Wenn also Ihre Daten für das Rendering verwendet werden, dann speichern Sie sie im State. Wenn Sie kein Rendering benötigen, kann in einem solchen Fall die Verwendung von Refs effizienter sein.

Angenommen, in Ihrer Komponente gibt es einen Absatz mit dem Text 'text' und eine Schaltfläche. Sorgen Sie dafür, dass bei jedem Klick auf die Schaltfläche am Ende des Textes des Absatzes ein Ausrufezeichen hinzugefügt wird. Machen Sie dies mit einem State.

Erstellen Sie eine App-Komponente, aber anstelle eines States verwenden Sie nun ein Ref. Stellen Sie sicher, dass sich bei Betätigung der Schaltfläche der Text des Absatzes nicht ändert. Fügen Sie auch eine Ausgabe des Textes des Absatzes in der Konsole hinzu, öffnen Sie sie und stellen Sie sicher, dass sich der Text tatsächlich ändert.