useRef-Hook erklärt

Der useRef-Hook in React ist eine leistungsstarke Funktion, mit der Sie einen veränderlichen Verweis auf ein DOM-Element oder einen anderen Wert erstellen können, der für den gesamten Lebenszyklus einer Komponente bestehen bleibt. Hier ist eine detaillierte Erklärung der Funktionsweise und der Anwendungsfälle:

Was ist useRef?

• Persistenter Speicher: useRef bietet eine Möglichkeit, eine veränderliche Referenz zu speichern, die bei Aktualisierung kein erneutes Rendern auslöst. Dies unterscheidet sich vom Status, bei dem das Aktualisieren einer Statusvariablen dazu führt, dass die Komponente erneut gerendert wird.

• Gibt ein veränderliches Objekt zurück: Wenn Sie useRef(initialValue) aufrufen, wird ein veränderliches Objekt mit einer aktuellen Eigenschaft zurückgegeben, die Sie ändern können. Der Anfangswert, den Sie an useRef übergeben, ist auf „aktuell“ eingestellt, Sie können „aktuell“ jedoch jederzeit ändern.

Grundlegende Syntax

const myRef = useRef(initialValue);

AnwendungsbeispielRef

Hier ist ein einfaches Beispiel, bei dem useRef verwendet wird, um auf ein DOM-Element zuzugreifen:

import React, { useRef } from 'react';

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

  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

export default FocusInput;

Erläuterung des Beispiels

1. Ref erstellen: const inputRef = useRef(null); Erstellt eine Referenz, um eine Referenz auf das Eingabeelement zu halten.

2. Zuweisen der Ref: Das ref-Attribut des Eingabeelements wird inputRef zugewiesen. Dadurch kann React das Eingabe-DOM-Element an die aktuelle Eigenschaft von inputRef anhängen.

3. Zugriff auf die Referenz: Wenn auf die Schaltfläche geklickt wird, greift die Funktion focusInput über inputRef.current auf das Eingabeelement zu und ruft darauf focus() auf.

Anwendungsfälle

1. Zugriff auf DOM-Elemente: Wie im Beispiel gezeigt, wird useRef häufig verwendet, um direkt auf DOM-Elemente zuzugreifen und mit ihnen zu interagieren.

2. Änderbare Werte speichern: Sie können useRef verwenden, um jeden veränderlichen Wert zu speichern, der bei Änderung nicht erneut gerendert werden muss, z. B. eine Timer-ID oder einen vorherigen Wert.
   

   const timerRef = useRef();

   const startTimer = () => {
     timerRef.current = setTimeout(() => {
       // some action
     }, 1000);
   };

   const stopTimer = () => {
     clearTimeout(timerRef.current);
   };

1. Beibehalten von Werten über mehrere Renderings hinweg: Im Gegensatz zu state wird ein in useRef gehaltener Wert bei erneuten Renderings nicht zurückgesetzt. Dies kann nützlich sein, um Werte zu verfolgen, die in Rückrufen oder Effekten verwendet werden.

2. Integration mit Bibliotheken von Drittanbietern: Wenn Sie Bibliotheken von Drittanbietern verwenden, die das DOM direkt bearbeiten, kann useRef eine Möglichkeit bieten, einen Verweis auf diese DOM-Knoten beizubehalten.

Vergleich mit useState

• Erneutes Rendern: Das Aktualisieren einer Statusvariablen mit useState löst ein erneutes Rendern der Komponente aus, während das Aktualisieren einer useRef nicht erfolgt.

• Speicher: Verwenden Sie useRef für Werte, die sich nicht auf das Rendering der Komponente auswirken, während useState für Werte verwendet werden sollte, die dies tun.

Wichtige Punkte, die Sie sich merken sollten

• useRef kann jeden Wert enthalten, nicht nur DOM-Elemente.
• Die aktuelle Eigenschaft kann frei aktualisiert werden, ohne dass ein erneutes Rendern erforderlich ist.
• Ideal für den Zugriff auf DOM-Knoten oder das Speichern veränderlicher Werte, die kein Rendern auslösen müssen.

Wenn Sie diese Konzepte verstehen, können Sie den useRef-Hook in Ihren React-Anwendungen effektiv nutzen! Wenn Sie spezielle Anwendungsfälle oder Fragen zu useRef haben, können Sie diese gerne stellen!

Das obige ist der detaillierte Inhalt vonuseRef-Hook erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!