Einführung

Was ist useRef

useRef ist ein React-Hook, der es ermöglicht, eine dauerhafte Referenz auf einen Wert oder ein DOM-Element zu erstellen. Im Gegensatz zu useState, das zum Verwalten des Status verwendet wird, der erneute Renderings auslöst, wird useRef hauptsächlich für Nebeneffekte oder den direkten Zugriff auf DOM-Elemente verwendet.

Warum useRef verwenden?

Der useRef-Hook ist besonders nützlich für:

• Direkter Zugriff auf DOM-Elemente: Sie können useRef verwenden, um einen Verweis auf ein DOM-Element abzurufen, sodass Sie es direkt bearbeiten können, ohne ein erneutes Rendern auszulösen.
• Persistente Werte erstellen: Im Gegensatz zum Status bleiben mit useRef erstellte Werte zwischen den Renderings bestehen, was sie ideal zum Speichern von Daten macht, die keine erneuten Renderings auslösen müssen.

Den useRef-Hook verstehen

Der useRef-Hook gibt ein Objekt mit der Eigenschaft .current zurück. Wenn Sie useRef aufrufen, wird eine dauerhafte Referenz auf den Wert erstellt, den Sie als Argument übergeben. Diese Referenz wird in der .current-Eigenschaft des zurückgegebenen Objekts gespeichert.

Erstellen einer Referenz mit useRef

Um eine Referenz zu erstellen, rufen Sie einfach useRef mit dem Anfangswert auf.

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  return (...)
}

export default App

Im obigen Beispiel ist countRef eine Referenz auf den Anfangswert 0.

Zugriff auf den Referenzwert

Um auf den Referenzwert zuzugreifen, rufen Sie einfach das countRef-Objekt mit der .current-Eigenschaft auf

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  const increment = () => {
    countRef.current  
  }

  return (
    

      
Count: {countRef.current}
      Increment
    
  )
}

export default App

Wenn Sie im obigen Beispiel auf die Schaltfläche klicken, wird die Inkrementierungsfunktion aufgerufen, die countRef erhöht, aber die Anzahl wird nicht bei

Count: {countRef.current}

Aktualisieren Sie den Code auf das folgende Beispiel, um das erwartete Ergebnis zu erhalten.

import { useRef, useState } from 'react'

const App = () => {
  const countRef = useRef(0)
  const [count, setCount] = useState(0)

  const increment = () => {
    countRef.current  
    setCount(countRef.current)
  }

  return (
    

      
Count: {count}
      Increment
    
  )
}

export default App

Häufige Anwendungsfälle für useRef

Direkter Zugriff auf und Bearbeitung von DOM-Elementen

Es ist möglich, den useRef-Hook zu verwenden, um auf die Eigenschaften von HTML-Elementen zuzugreifen und diese zu ändern.

const App = () => {
  const inputRef = useRef(null)

  const handleFocus = () => {
    inputRef.current.focus()
  }

  return(
    
  )
}

Beständige Werte

Im Gegensatz zu useState oder variable kann useRef Werte und Daten zwischen erneuten Renderings übergeben, z. B. zwischengespeicherte Daten oder Konfigurationseinstellungen.

Leistungsoptimierung

In einigen Fällen kann die Verwendung von useRef bei der Komponentenoptimierung helfen, indem unnötige erneute Renderings vermieden werden. Wenn Sie beispielsweise eine Komponente haben, die eine große Liste von Elementen rendert, können Sie diese mit useRef zwischenspeichern und nur die geänderten Elemente erneut rendern.

Best Practices und Überlegungen

• Schreiben Sie nicht oder lesen Sie nicht ref.current während des Renderns
• Sie können die ref.current Eigenschaft ändern
• Wenn Sie die Eigenschaft ref.current ändern, rendert React Ihre Komponente nicht erneut
• Die Informationen sind lokal für jede Kopie Ihrer Komponente (im Gegensatz zu den Variablen außerhalb, die gemeinsam genutzt werden). Sie können Informationen zwischen erneuten Renderings speichern (im Gegensatz zu regulären Variablen, die bei jedem Rendern zurückgesetzt).
• Sie können stattdessen Refs von Event-Handlern oder Effekten lesen oder schreiben.
• Dom mit Ref manipulieren

Übergabe einer Referenz an eine benutzerdefinierte Komponente.

Wenn Sie versuchen, einen Verweis wie folgt an Ihre eigene Komponente zu übergeben

const inputRef = useRef(null);

return ;

Möglicherweise wird in der Konsole eine Fehlermeldung angezeigt:
Warnung: Funktionskomponenten können keine Referenzen zugewiesen werden. Versuche, auf diese Referenz zuzugreifen, schlagen fehl. Wollten Sie React.forwardRef() verwenden?

Um dieses Problem zu lösen, umschließen Sie die benutzerdefinierte Komponente wie folgt mit „forwardRef“:

const inputRef = useRef(null);

return ;

Benutzerdefinierte Komponente:

import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    
  );
});

export default MyInput;

Abschluss

useRef ist ein leistungsstarker Hook, der hauptsächlich für Nebeneffekte wie das Zwischenspeichern von Daten zwischen erneuten Renderings oder den Zugriff auf Elemente des DOM verwendet wird. Es ist ein großartiges Tool zur Leistungsoptimierung und zum Erreichen spezifischer Funktionen in der React-Anwendung.