Beherrschen des useRef-Hooks von React: Arbeiten mit DOM und veränderlichen Werten

useRef Hook in React

Der useRef-Hook ist ein integrierter React-Hook, der verwendet wird, um Werte über Renderings hinweg beizubehalten, ohne dass es zu erneuten Renderings kommt. Es wird häufig verwendet, um direkt mit DOM-Elementen zu interagieren und Werte zu speichern, die zwischen dem Rendern bestehen bleiben müssen, aber nicht unbedingt ein erneutes Rendern auslösen müssen.

---

Was ist useRef?

Der useRef-Hook wird hauptsächlich für zwei Zwecke verwendet:

1. Zugriff auf DOM-Elemente: Es bietet eine Möglichkeit, DOM-Knoten oder React-Elemente direkt zu referenzieren, sodass Sie unbedingt mit ihnen interagieren können.
2. Persistente Werte über alle Renderings hinweg: Es können veränderliche Werte gespeichert werden, die im Gegensatz zum Status kein erneutes Rendering auslösen, wenn sie aktualisiert werden.

---

Syntax von useRef

const myRef = useRef(initialValue);

• myRef: Ein von useRef.
erstelltes Referenzobjekt
• initialValue: Der Anfangswert, der im Referenzobjekt gespeichert werden soll. Dies kann alles sein, beispielsweise ein DOM-Knoten, ein Objekt oder ein primitiver Wert.

Das von useRef zurückgegebene Referenzobjekt verfügt über eine aktuelle Eigenschaft, in der der tatsächliche Wert gespeichert wird.

---

So funktioniert useRef

1. Zugriff auf DOM-Elemente: Sie können useRef verwenden, um direkten Zugriff auf ein DOM-Element in einer Funktionskomponente zu erhalten, genau wie das ref-Attribut in Klassenkomponenten.

   const MyComponent = () => {
     const inputRef = useRef(null);

     const focusInput = () => {
       // Access the DOM node and focus it
       inputRef.current.focus();
     };

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

• Hier wird inputRef verwendet, um auf die Element, und die Funktion focusInput konzentriert sich auf dieses Eingabeelement, wenn auf die Schaltfläche geklickt wird.

1. Änderbare Werte über Renderings hinweg speichern: Sie können useRef verwenden, um einen Wert zu speichern, der über alle Renderings hinweg bestehen bleibt, bei einer Änderung jedoch kein erneutes Rendering auslöst.

   const TimerComponent = () => {
     const countRef = useRef(0);

     const increment = () => {
       countRef.current++;
       console.log(countRef.current);  // This will log the updated value
     };

     return (
       <div>
         <p>Current count (does not trigger re-render): {countRef.current}</p>
         <button onClick={increment}>Increment</button>
       </div>
     );
   };

• In diesem Beispiel speichert countRef einen veränderlichen Wert. Der Wert kann aktualisiert werden, ohne ein erneutes Rendern zu verursachen, im Gegensatz zu useState, das ein erneutes Rendern auslöst.

---

Häufige Anwendungsfälle von useRef

1. Zugriff auf DOM-Elemente: Zum Beispiel das Fokussieren eines Eingabefelds, das Scrollen zu einem bestimmten Element oder das Messen der Größe eines Elements.

   const ScrollToTop = () => {
     const topRef = useRef(null);

     const scrollToTop = () => {
       topRef.current.scrollIntoView({ behavior: 'smooth' });
     };

     return (
       <div>
         <div ref={topRef}>



<ol>
<li>
<strong>Storing Previous State</strong>: If you need to track the previous value of a prop or state value.
</li>
</ol>

<pre class="brush:php;toolbar:false">   const PreviousState = ({ count }) => {
     const prevCountRef = useRef();

     useEffect(() => {
       prevCountRef.current = count; // Store the current value in the ref
     }, [count]);

     return (
       <div>
         <p>Current Count: {count}</p>
         <p>Previous Count: {prevCountRef.current}</p>
       </div>
     );
   };

• Erklärung: prevCountRef speichert den vorherigen Wert von count, auf den zugegriffen werden kann, ohne dass ein erneutes Rendern ausgelöst wird.

1. Erneutes Rendern für komplexe Werte vermeiden: Wenn Sie ein großes Objekt oder eine komplexe Datenstruktur haben, die kein erneutes Rendern auslösen muss, kann useRef es speichern, ohne die Komponente zu beeinträchtigen Leistung.

2. Tracking-Intervall oder Timeout: Sie können IDs von Timeouts oder Intervallen speichern, um sie später zu löschen.
   

const myRef = useRef(initialValue);

• Erklärung: IntervalRef speichert die ID des Intervalls und kann zum Löschen des Intervalls verwendet werden, wenn die Bereitstellung der Komponente aufgehoben wird.

---

Hauptunterschiede zwischen useRef und useState

Funktion useRef useState

Feature	useRef	useState
Triggers re-render	No (does not trigger a re-render)	Yes (triggers a re-render when state changes)
Use Case	Storing mutable values or DOM references	Storing state that affects rendering
Value storage	Stored in current property	Stored in state variable
Persistence across renders	Yes (keeps value across renders without triggering re-render)	Yes (but triggers re-render when updated)

Triggert erneutes Rendern aus Nein (löst kein erneutes Rendern aus) Ja (löst ein erneutes Rendern aus, wenn sich der Status ändert) Anwendungsfall Speichern veränderlicher Werte oder DOM-Referenzen Speicherstatus, der sich auf das Rendering auswirkt Wertspeicherung In der aktuellen Eigenschaft gespeichert In Zustandsvariable gespeichert Persistenz über Renderings hinweg Ja (behält den Wert über alle Renderings hinweg bei, ohne dass ein erneutes Rendering ausgelöst wird) Ja (löst aber bei Aktualisierung ein erneutes Rendern aus)

---

Beispiel: Verwendung von useRef zur Formularvalidierung

Hier ist ein Beispiel, in dem useRef zur Formularvalidierung verwendet wird und sich auf ein Eingabefeld konzentriert, wenn es ungültig ist.

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

const FormComponent = () => {
  const inputRef = useRef();
  const [inputValue, setInputValue] = useState('');
  const [error, setError] = useState('');

  const validierenInput = () => {
    if (inputValue === '') {
      setError('Eingabe darf nicht leer sein');
      inputRef.current.focus(); // Fokussieren Sie das Eingabeelement
    } anders {
      setError('');
    }
  };

  zurückkehren (
    <div>
      <Eingabe
        ref={inputRef}
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      {Fehler && <p>

• Erklärung:
  • Die Eingabereferenz wird verwendet, um sich auf das Eingabeelement zu konzentrieren, wenn der Eingabewert leer ist.
  • Diese Funktionalität wäre mit useState nicht möglich, da die Fokussierung auf ein DOM-Element einen direkten Zugriff auf das Element erfordert, den useState nicht bereitstellen kann.

---

Zusammenfassung der VerwendungRef Hook

• useRef wird zum Speichern von Verweisen auf DOM-Elemente und veränderliche Werte verwendet, die bei Aktualisierung keine erneuten Renderings auslösen.
• Es ist nützlich, um direkt auf DOM-Knoten zuzugreifen (z. B. zum Fokussieren, Scrollen oder Animationen).
• useRef ist auch praktisch zum Speichern von Werten, die über Renderings hinweg bestehen bleiben, ohne dass ein erneutes Rendering ausgelöst werden muss, z. B. zum Verfolgen früherer Werte oder zum Speichern von Timeout-/Intervall-IDs.
• Hauptunterschied: Im Gegensatz zu useState löst die Aktualisierung von useRef kein erneutes Rendern aus.

---

Fazit

Der useRef-Hook ist unglaublich nützlich für den Umgang mit veränderlichen Werten und der direkten DOM-Manipulation in React. Unabhängig davon, ob Sie mit Formularelementen arbeiten, den vorherigen Status verfolgen oder mit Bibliotheken von Drittanbietern interagieren, bietet useRef eine saubere und effiziente Lösung. Durch die Verwendung von useRef können Sie die Persistenz aufrechterhalten, ohne unnötige erneute Renderings auszulösen, was es zu einer großartigen Wahl für leistungsempfindliche Vorgänge macht.

---

Das obige ist der detaillierte Inhalt vonBeherrschen des useRef-Hooks von React: Arbeiten mit DOM und veränderlichen Werten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!