Leider wird useRef unterschätzt. Er gehört nicht zu den beliebtesten Haken, ist aber von Vorteil. Wenn Sie wissen, wie und wo Sie es verwenden, können Sie großartige Ergebnisse erzielen.

Beginnen wir mit den Grundlagen

useRef ist ein React Hook, mit dem Sie auf einen Wert verweisen können, der für das Rendern nicht benötigt wird.

React merkt sich den Wert, den Sie über useRef erstellen, unabhängig davon, ob Sie ein JavaScript-Objekt erstellen, das auf einen Knoten im DOM verweist, oder einen einfachen Wert, und er geht beim erneuten Rendern nicht verloren.

Was gibt es uns?

1. Zugriff auf DOM-Elemente:

   • Sie können Elemente im DOM leicht erreichen. Sie können beispielsweise den Wert eines Eingabefelds abrufen, sich auf bestimmte Elemente konzentrieren, deren Höhe und Breite abrufen, zu einem bestimmten Teil des Bildschirms scrollen und vieles mehr.

2. Änderbare Werte speichern:

   • Sie können sich alle benötigten Daten merken, ohne Komponenten neu zu rendern. Wenn Sie beispielsweise einen Zähler oder einen Timer benötigen, wählen Sie useRef anstelle von useState.

Beispiele

Hier sind einige Beispiele, um die Leistungsfähigkeit von useRef zu veranschaulichen.

Beispiel 1: Verweis auf eine Zahl

import React, { useRef } from 'react';

const Counter = () => {
  const refCount = useRef(0);
  const refInputField = useRef(null);

  const onClick = () => {
    refCount.current = refCount.current   1;
    refInputField.current.focus();
  }

  return (
    
      
        Click me!
      
      
    >
  );
};

export default Counter;

In diesem Beispiel:

• refCount ist ein veränderlicher Verweis auf eine Zahl.
• refInputField ist eine Referenz auf ein Eingabeelement.
• Wenn auf die Schaltfläche geklickt wird, erhöht sich der Zähler und das Eingabefeld erhält den Fokus.

Beispiel 2: Den Überblick über frühere Werte behalten

Ein weiterer häufiger Anwendungsfall für useRef ist das Verfolgen früherer Werte.

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

const PreviousValue = () => {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

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

  return (
    

      
Current Count: {count}
      
Previous Count: {prevCountRef.current}
       setCount(count   1)}>Increment
    
  );
};

export default PreviousValue;

In diesem Beispiel:

• prevCountRef verfolgt den vorherigen Wert von count.
• Der useEffect-Hook aktualisiert prevCountRef.current, wenn sich die Anzahl ändert.
• Dadurch können Sie sowohl die aktuelle als auch die vorherige Zählung anzeigen, ohne unnötige erneute Renderings auszulösen.

Erweiterte Tipps und Tricks mit useRef

1. Behaltende Werte über Renderings hinweg

useRef kann im Gegensatz zu useState verwendet werden, um Werte über mehrere Renderings hinweg beizubehalten, ohne ein erneutes Rendering zu verursachen. Dies ist besonders nützlich zum Speichern von Werten, die sich nicht direkt auf die Benutzeroberfläche auswirken, aber gespeichert werden müssen.

Beispiel: Verfolgen der Renderanzahl einer Komponente.

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

const RenderCounter = () => {
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current  = 1;
  });

  return (
    

      
This component has rendered {renderCount.current} times
    
  );
};

export default RenderCounter;

2. Integration mit Bibliotheken von Drittanbietern

useRef ist von unschätzbarem Wert, wenn Sie mit Bibliotheken von Drittanbietern arbeiten, die eine direkte Manipulation von DOM-Elementen erfordern, wie z. B. die Integration in Diagrammbibliotheken, die Verwaltung von Videoplayern oder die Handhabung von Animationen.

Beispiel: Integration einer Diagrammbibliothek.

import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

const ChartComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
          label: 'Sales',
          data: [65, 59, 80, 81],
        }],
      },
    });
  }, []);

  return ;
};

export default ChartComponent;

3. Vermeidung unnötiger erneuter Renderings in komplexen Anwendungen

In komplexen Anwendungen, bei denen die Leistung von entscheidender Bedeutung ist, kann die Verwendung von useRef zum Speichern veränderlicher Objekte dazu beitragen, unnötige erneute Renderings zu vermeiden.

Beispiel: Speichern eines Objekts mit veränderbarem Zustand.

import React, { useRef } from 'react';

const MutableState = () => {
  const state = useRef({
    name: 'John Doe',
    age: 30,
  });

  const updateName = (newName) => {
    state.current.name = newName;
    console.log('Name updated:', state.current.name);
  };

  return (
    

       updateName('Jane Doe')}>
        Update Name
      
    
  );
};

export default MutableState;

4. Vermeidung von Abschlussproblemen

Die Verwendung von useRef kann dazu beitragen, Abschlussprobleme zu vermeiden, indem eine stabile Referenz auf einen Wert bereitgestellt wird, der über alle Renderings hinweg bestehen bleibt.

Beispiel: Timer mit useRef, um veralteten Zustand zu vermeiden.

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

const Timer = () => {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(countRef.current   1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return 
Count: {count}
;
};

export default Timer;

Abschluss

Haken sind großartig und Sie sollten sie verwenden. Sie können viel erreichen, wenn Sie die Funktionsweise von React verstehen und Hooks richtig anwenden. useRef ist besonders leistungsstark für:

• Auf DOM-Elemente zugreifen und diese bearbeiten.
• Speichern veränderlicher Werte, die kein erneutes Rendern auslösen.
• Persistente Werte über Renderings hinweg.
• Integration mit Bibliotheken von Drittanbietern.
• Vermeidung unnötiger erneuter Renderings in komplexen Anwendungen.
• Abhilfe bei Schließungsproblemen.

Durch das Verständnis und die Nutzung von useRef können Sie effizientere und effektivere React-Komponenten schreiben. Die wahre Kraft von Hooks liegt darin, ihr Verhalten zu verstehen und sie mit Bedacht anzuwenden.

Wissen Sie, dass useState nicht immer die richtige Antwort ist?