ReactJS - Verwenden von useRef: Ein Anfängerleitfaden

Hallo da draußen, zukünftige React-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt der React-Hooks, genauer gesagt den useRef-Hook. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Ihr freundlicher Guide sein und alles Schritt für Schritt erklären. Also holen Sie sich eine Tasse Kaffee (oder Tee, wenn das Ihr Ding ist) und tauchen wir ein!

Was ist useRef?

Bevor wir mit dem Coden beginnen, lassen Sie uns verstehen, was useRef überhaupt ist. Stellen Sie sich vor, Sie haben eine magische Box, die jeden Wert halten kann, den Sie möchten, und diese Box ändert sich nicht einmal, wenn Ihr Komponente neu gerendert wird. Das ist im Grunde, was useRef für uns in React macht!

useRef ist ein Hook, der eine Möglichkeit bietet, eine veränderbare Referenz zu erstellen, die über Komponenten-Neu-rendern hinweg erhalten bleibt. Es ist wie ein geheimes Fach in Ihrer Komponente, in dem Sie Informationen speichern können, ohne eine Neuberendung auszulösen, wenn sich diese Informationen ändern.

Signatur des useRef-Hooks

Schauen wir uns an, wie wir den useRef-Hook verwenden:

const refContainer = useRef(initialValue);

Hier ist initialValue der Wert, mit dem Sie beginnen möchten, und refContainer ist ein Objekt mit einer einzigen Eigenschaft namens current. Diese current-Eigenschaft hält den tatsächlichen referenzierten Wert.

Stellen Sie es sich wie eine spezielle Box mit einem Etikett darauf vor, das "current" sagt. Was auch immer Sie in diese Box legen, wird der Wert von current.

Anwendung des ref-Hooks

Nun schauen wir uns an, wie wir useRef in einer realen Welt-Situation verwenden können. Stellen wir uns vor, wir möchten ein einfaches Texteingabefeld erstellen, das automatisch fokussiert und dem Benutzer ermöglicht, sofort mit dem Tippen zu beginnen, wenn darauf geklickt wird.

import React, { useRef, useEffect } from 'react';

function AutoFocusInput() {
const inputRef = useRef(null);

useEffect(() => {
inputRef.current.focus();
}, []);

return <input ref={inputRef} />;
}

Lassen Sie uns das herunterbrechen:

1. Wir importieren useRef sowie useEffect von React.
2. Wir erstellen eine Referenz namens inputRef mit useRef(null).
3. Wir verwenden den useEffect-Hook, um die Eingabe zu fokussieren, wenn die Komponente gerendert wird.
4. In der JSX binden wir unsere Referenz an das Eingabeelement mit dem ref-Attribut.

Wenn diese Komponente gerendert wird, erhält die Eingabe automatisch den Fokus. Es ist wie Magie, oder? Aber es ist keine Magie – es ist die Kraft von useRef!

Verwendungsfälle von useRef

Nun, da wir ein einfaches Beispiel gesehen haben, lassen Sie uns einige weitere Verwendungsfälle für useRef erkunden. Glauben Sie mir, dieser Hook ist vielseitiger als ein Schweizer Army Knife!

1. Speichern von Vorherigen Werten

Manchmal möchten Sie möglicherweise den Wert aus der vorherigen Rendition beibehalten. useRef ist hierfür perfekt!

import React, { useState, useRef, useEffect } from 'react';

function CounterWithPrevious() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();

useEffect(() => {
prevCountRef.current = count;
}, [count]);

return (
<div>
<p>Aktueller Zähler: {count}</p>
<p>Vorheriger Zähler: {prevCountRef.current}</p>
<button onClick={() => setCount(count + 1)}>Erhöhen</button>
</div>
);
}

In diesem Beispiel verwenden wir useRef, um den vorherigen Wert unseres Zählers zu speichern. Jedes Mal, wenn der Zähler sich ändert, aktualisieren wir unsere Referenz im useEffect-Hook. Auf diese Weise haben wir immer Zugang zum aktuellen und vorherigen Zähler.

2. Zugriff auf DOM-Elemente

useRef ist auch großartig für den direkten Zugriff auf DOM-Elemente. Lassen Sie uns ein Video-Player-Komponenten-Beispiel erstellen:

import React, { useRef } from 'react';

function VideoPlayer() {
const videoRef = useRef(null);

const playVideo = () => {
videoRef.current.play();
};

const pauseVideo = () => {
videoRef.current.pause();
};

return (
<div>
<video ref={videoRef} src="path/to/your/video.mp4" />
<button onClick={playVideo}>Abspielen</button>
<button onClick={pauseVideo}>Pausieren</button>
</div>
);
}

Hier verwenden wir useRef, um eine Referenz zum Video-Element zu erhalten. Dies ermöglicht es uns, Methoden wie play() und pause() direkt auf das Video-Element aufzurufen, wenn die Buttons geklickt werden.

3. Werte zwischen Rendern bewahren

useRef ist auch nützlich, wenn Sie einen Wert zwischen Rendern bewahren müssen, ohne eine Neuberendung auszulösen. Sehen wir uns ein Beispiel an:

import React, { useState, useRef, useEffect } from 'react';

function IntervalCounter() {
const [count, setCount] = useState(0);
const intervalRef = useRef();

useEffect(() => {
intervalRef.current = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);

return () => clearInterval(intervalRef.current);
}, []);

return <div>Zähler: {count}</div>;
}

In diesem Beispiel verwenden wir useRef, um die Interval-ID zurückzugeben, die von setInterval zurückgegeben wird. Dies ermöglicht es uns, das Interval in der Reinigungsfunktion unseres useEffect-Hooks zu löschen, um Speicherlecks zu verhindern.

Zusammenfassung

Und das war's, Leute! Wir haben die Welt von useRef bereist, seine Signatur, seine Anwendung und einige häufige Verwendungsfälle erkundet. Erinnern Sie sich daran, useRef ist wie ein treuer Sidekick in Ihren React-Abenteuern – immer da, wenn Sie etwas ohne Neuberendung verfolgen müssen.

Hier ist eine schnelle Zusammenfassung der Methoden, die wir behandelt haben:

Methode	Beschreibung
useRef(initialValue)	Erstellt ein Ref-Objekt mit dem bereitgestellten初始值
ref.current	Ruft den aktuellen Wert der Referenz ab oder ändert ihn
<element ref={refObject}>	Bindet eine Referenz an ein DOM-Element

Während Sie Ihre Reise durch React fortsetzen, werden Sie viele kreative Möglichkeiten finden, useRef zu verwenden. Es ist ein leistungsstarkes Werkzeug, das, wenn richtig verwendet, viele knifflige Probleme im React-Entwicklungsprozess lösen kann.

Erinnern Sie sich daran, der Schlüssel zum Beherrschen von React (oder jedem anderen Programmierkonzept) ist die Übung. Also probieren Sie diese Beispiele aus, experimentieren Sie mit Ihren eigenen Ideen und haben Sie keine Angst vor Fehlern. Das ist, wie wir alle lernen und wachsen als Entwickler.

Frohes Coden und möge die References mit Ihnen sein!

Credits: Image by storyset