React Refs: useRef vs. createRef entmystifizieren

In der dynamischen Welt der React-Entwicklung ist ein effizientes Management des Komponentenstatus und die Interaktion mit dem Document Object Model (DOM) von entscheidender Bedeutung. React Refs bieten einen Mechanismus, um direkt auf DOM-Elemente oder React-Komponenten zuzugreifen und diese zu manipulieren. Zwei primäre Methoden zur Erstellung von Refs sind useRef und createRef. Obwohl beide dem Zweck dienen, Refs zu erstellen, unterscheiden sie sich in ihrer Implementierung und ihren Anwendungsfällen. Dieser Leitfaden zielt darauf ab, diese beiden Ansätze zu entmystifizieren und Klarheit darüber zu schaffen, wann und wie sie in Ihren React-Projekten effektiv eingesetzt werden können, insbesondere bei der Entwicklung für ein globales Publikum.

React Refs verstehen

Ein Ref (kurz für Referenz) ist eine React-Funktion, die es Ihnen ermöglicht, direkt auf einen DOM-Knoten oder eine React-Komponente zuzugreifen. Dies ist besonders nützlich, wenn Sie:

• Ein DOM-Element direkt manipulieren müssen, z. B. das Fokussieren eines Eingabefeldes.
• Auf Methoden oder Eigenschaften einer Kindkomponente zugreifen müssen.
• Werte verwalten müssen, die über Renderings hinweg bestehen bleiben, ohne Neurenderings zu verursachen (ähnlich Instanzvariablen in Klassenkomponenten).

Obwohl React einen deklarativen Ansatz fördert, bei dem die Benutzeroberfläche über Status und Props verwaltet wird, gibt es Situationen, in denen eine direkte Manipulation notwendig ist. Refs bieten eine Möglichkeit, die Lücke zwischen Reacts deklarativer Natur und imperativen DOM-Operationen zu schließen.

createRef: Der Ansatz für Klassenkomponenten

createRef ist eine von React bereitgestellte Methode. Sie wird hauptsächlich innerhalb von Klassenkomponenten verwendet, um Refs zu erstellen. Jedes Mal, wenn eine Klassenkomponente instanziiert wird, erstellt createRef ein neues Ref-Objekt. Dies stellt sicher, dass jede Instanz der Komponente ihre eigene einzigartige Ref hat.

Syntax und Verwendung

Um createRef zu verwenden, deklarieren Sie zuerst eine Ref in Ihrer Klassenkomponente, typischerweise im Konstruktor. Dann fügen Sie die Ref mit dem Attribut ref einem DOM-Element oder einer Komponente hinzu.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // Greife nach dem Mounten der Komponente auf das DOM-Element zu
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

In diesem Beispiel wird this.myRef mit React.createRef() erstellt. Es wird dann dem ref-Attribut des Eingabeelements zugewiesen. Nachdem die Komponente gemountet ist (in componentDidMount), können Sie über this.myRef.current auf den tatsächlichen DOM-Knoten zugreifen und Operationen darauf ausführen (in diesem Fall das Eingabefeld fokussieren).

Beispiel: Fokussieren eines Eingabefeldes

Betrachten wir ein Szenario, in dem Sie ein Eingabefeld automatisch fokussieren möchten, wenn eine Komponente mountet. Dies ist ein häufiger Anwendungsfall für Refs, insbesondere in Formularen oder interaktiven Elementen.

class FocusInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      

        
      
    );
  }
}

In diesem Beispiel fokussiert FocusInput das Eingabefeld sofort nach dem Mounten. Dies kann die Benutzererfahrung verbessern, indem die Aufmerksamkeit des Benutzers sofort auf das Eingabeelement gelenkt wird, sobald die Komponente gerendert ist.

Wichtige Überlegungen bei createRef

• Nur für Klassenkomponenten: createRef ist für die Verwendung in Klassenkomponenten konzipiert. Obwohl es technisch in funktionalen Komponenten funktionieren könnte, ist dies nicht die vorgesehene Verwendung und kann zu unerwartetem Verhalten führen.
• Neue Ref bei jeder Instanz: Jede Instanz einer Klassenkomponente erhält ihre eigene createRef. Dies ist wichtig, um die Isolation zwischen Komponenteninstanzen aufrechtzuerhalten.

useRef: Der Hook für funktionale Komponenten

useRef ist ein Hook, der mit React 16.8 eingeführt wurde. Er bietet eine Möglichkeit, veränderliche Ref-Objekte innerhalb funktionaler Komponenten zu erstellen. Im Gegensatz zu createRef gibt useRef bei jedem Rendering der Komponente dasselbe Ref-Objekt zurück. Dies macht ihn ideal, um Werte über Renderings hinweg beizubehalten, ohne Neurenderings auszulösen.

Syntax und Verwendung

Die Verwendung von useRef ist unkompliziert. Sie rufen den useRef-Hook auf und übergeben einen Initialwert. Der Hook gibt ein Objekt mit einer .current-Eigenschaft zurück, die Sie dann verwenden können, um auf den Wert zuzugreifen und ihn zu ändern.

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

function MyFunctionalComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    // Greife nach dem Mounten der Komponente auf das DOM-Element zu
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

In diesem Beispiel erstellt useRef(null) eine Ref mit einem Initialwert von null. Der useEffect-Hook wird verwendet, um nach dem Mounten der Komponente auf das DOM-Element zuzugreifen. Die Eigenschaft myRef.current enthält die Referenz auf das Eingabeelement, wodurch Sie es fokussieren können.

Beispiel: Verfolgen früherer Prop-Werte

Ein mächtiger Anwendungsfall für useRef ist das Verfolgen des vorherigen Werts einer Prop. Da Änderungen an Refs keine Neurenderings auslösen, können Sie sie verwenden, um Werte zu speichern, die Sie über Renderings hinweg beibehalten möchten, ohne die Benutzeroberfläche zu beeinflussen.

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

function PreviousValueComponent({ value }) {
  const previousValue = useRef();

  useEffect(() => {
    previousValue.current = value;
  }, [value]);

  return (
    

      
Aktueller Wert: {value}
      
Vorheriger Wert: {previousValue.current}
    
  );
}

In diesem Beispiel speichert previousValue.current den vorherigen Wert der value-Prop. Der useEffect-Hook aktualisiert die Ref, wann immer sich die value-Prop ändert. Dies ermöglicht Ihnen den Vergleich der aktuellen und vorherigen Werte, was nützlich sein kann, um Änderungen zu erkennen oder Animationen zu implementieren.

Wichtige Überlegungen bei useRef

• Nur für funktionale Komponenten: useRef ist ein Hook und kann nur innerhalb funktionaler Komponenten oder benutzerdefinierter Hooks verwendet werden.
• Bleibt über Renderings hinweg bestehen: Der useRef-Hook gibt bei jedem Rendering dasselbe Ref-Objekt zurück. Dies ist entscheidend für seine Fähigkeit, Werte beizubehalten, ohne Neurenderings auszulösen.
• Veränderliche .current-Eigenschaft: Sie können die .current-Eigenschaft des Ref-Objekts direkt ändern.
• Initialwert: Sie können useRef einen Initialwert übergeben. Dieser Wert wird der .current-Eigenschaft zugewiesen, wenn die Komponente zum ersten Mal gerendert wird.
• Keine Neurenderings: Das Ändern der .current-Eigenschaft einer Ref führt nicht zu einem Neurendering der Komponente.

useRef vs. createRef: Ein detaillierter Vergleich

Nachdem wir nun sowohl useRef als auch createRef einzeln untersucht haben, vergleichen wir sie Seite an Seite, um ihre Hauptunterschiede hervorzuheben und zu zeigen, wann man das eine dem anderen vorziehen sollte.

Merkmal	useRef	createRef
Komponententyp	Funktionale Komponenten	Klassenkomponenten
Hook oder Methode	Hook	Methode
Ref-Instanz	Gibt bei jedem Rendering dasselbe Ref-Objekt zurück	Erstellt bei jeder Instanz der Komponente ein neues Ref-Objekt
Anwendungsfälle	Zugriff auf DOM-Elemente Werte über Renderings hinweg beibehalten, ohne Neurenderings auszulösen Verfolgen früherer Prop-Werte Speichern veränderlicher Werte, die keine Neurenderings auslösen	Zugriff auf DOM-Elemente Zugriff auf Methoden von Kindkomponenten

Die richtige Ref wählen: Ein Entscheidungsleitfaden

Hier ist ein einfacher Leitfaden, der Ihnen bei der Wahl zwischen useRef und createRef hilft:

• Arbeiten Sie mit einer funktionalen Komponente? Verwenden Sie useRef.
• Arbeiten Sie mit einer Klassenkomponente? Verwenden Sie createRef.
• Müssen Sie einen Wert über Renderings hinweg beibehalten, ohne Neurenderings auszulösen? Verwenden Sie useRef.
• Müssen Sie den vorherigen Wert einer Prop verfolgen? Verwenden Sie useRef.

Über die DOM-Manipulation hinaus: Erweiterte Anwendungsfälle für Refs

Obwohl der Zugriff auf und die Manipulation von DOM-Elementen ein primärer Anwendungsfall für Refs ist, bieten sie Möglichkeiten jenseits dieser Kernfunktionalität. Lassen Sie uns einige fortgeschrittene Szenarien untersuchen, in denen Refs besonders nützlich sein können.

1. Zugriff auf Methoden von Kindkomponenten

Refs können verwendet werden, um auf in Kindkomponenten definierte Methoden zuzugreifen. Dies ermöglicht einer Elternkomponente, Aktionen auszulösen oder Daten direkt von ihren Kindern abzurufen. Dieser Ansatz ist besonders nützlich, wenn Sie eine detaillierte Kontrolle über Kindkomponenten benötigen.

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    // Ruft eine Methode auf der Kindkomponente auf
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        Kind-Aktion auslösen
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Kindkomponenten-Aktion ausgelöst!');
  };

  render() {
    return 
Dies ist eine Kindkomponente.
;
  }
}

In diesem Beispiel verwendet die ParentComponent eine Ref, um auf die ChildComponent zuzugreifen und deren doSomething-Methode aufzurufen.

2. Fokus- und Auswahlverwaltung

Refs sind von unschätzbarem Wert für die Verwaltung des Fokus und der Auswahl innerhalb von Eingabefeldern und anderen interaktiven Elementen. Dies ist entscheidend für die Erstellung zugänglicher und benutzerfreundlicher Schnittstellen.

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

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Wählt den Text im Eingabefeld aus
    }
  }, []);

  return ;
}

Dieses Beispiel fokussiert die Eingabe und wählt ihren Text aus, sobald die Komponente mountet.

3. Elemente animieren

Refs können in Verbindung mit Animationsbibliotheken (wie GreenSock oder Framer Motion) verwendet werden, um das DOM direkt zu manipulieren und komplexe Animationen zu erstellen. Dies ermöglicht eine feine Kontrolle über Animationssequenzen.

Beispiel mit einfachem JavaScript zur Veranschaulichung:

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

function AnimatedBox() {
  const boxRef = useRef(null);

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Einfache Animation: Verschiebt die Box nach rechts
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 Sekunde
          iterations: Infinity, // Unendlich wiederholen
          direction: 'alternate',
        }
      );
    }
  }, []);

  return 
;
}

Dieses Beispiel verwendet die Web Animations API, um eine einfache Box zu animieren, die sich horizontal hin und her bewegt.

Best Practices für die Verwendung von React Refs in globalen Anwendungen

Bei der Entwicklung von React-Anwendungen für ein globales Publikum ist es wichtig zu berücksichtigen, wie Refs mit Internationalisierung (i18n) und Lokalisierung (l10n) interagieren. Hier sind einige Best Practices:

1. Barrierefreiheit (A11y)

Stellen Sie sicher, dass Ihre Verwendung von Refs die Barrierefreiheit nicht negativ beeinflusst. Berücksichtigen Sie beispielsweise beim programmatischen Fokussieren von Elementen die Fokusreihenfolge des Benutzers und ob die Fokusänderung für Screenreader und Tastaturbenutzer angemessen ist.

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

function AccessibleFocus() {
  const buttonRef = useRef(null);

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Nur fokussieren, wenn der Button nicht bereits vom Benutzer fokussiert wurde
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return Klicken Sie mich;
}

2. Internationalisierte Eingabefelder

Berücksichtigen Sie bei der Arbeit mit Eingabefeldern die verschiedenen Eingabemethoden und Zeichensätze, die in verschiedenen Sprachen verwendet werden. Stellen Sie sicher, dass Ihre Ref-basierten Manipulationen (z. B. Auswahl, Cursorposition) in verschiedenen Eingabetypen und Lokalisierungen korrekt funktionieren. Testen Sie Ihre Komponenten gründlich mit verschiedenen Sprachen und Eingabemethoden.

3. Rechts-nach-Links (RTL) Layouts

Wenn Ihre Anwendung RTL-Sprachen (z. B. Arabisch, Hebräisch) unterstützt, stellen Sie sicher, dass Ihre DOM-Manipulationen mit Refs das umgekehrte Layout berücksichtigen. Berücksichtigen Sie beispielsweise beim Animieren von Elementen, die Animationsrichtung für RTL-Sprachen umzukehren.

4. Überlegungen zur Leistung

Obwohl Refs eine leistungsstarke Möglichkeit bieten, mit dem DOM zu interagieren, kann übermäßiger Gebrauch zu Leistungsproblemen führen. Direkte DOM-Manipulationen umgehen Reacts virtuelles DOM und den Reconciliation-Prozess, was möglicherweise zu Inkonsistenzen und langsameren Updates führt. Verwenden Sie Refs mit Bedacht und nur bei Bedarf.

Fazit

React Refs, insbesondere useRef und createRef, sind unverzichtbare Werkzeuge für React-Entwickler. Das Verständnis der Nuancen jedes Ansatzes und wann sie effektiv angewendet werden sollten, ist entscheidend für den Aufbau robuster und performanter Anwendungen. createRef bleibt der Standard für die Verwaltung von Refs innerhalb von Klassenkomponenten und stellt sicher, dass jede Instanz ihre einzigartige Ref hat. useRef ist mit seiner persistenten Natur über Renderings hinweg ideal für funktionale Komponenten und bietet eine Möglichkeit, DOM-Elemente zu verwalten und Werte beizubehalten, ohne unnötige Neurenderings auszulösen. Durch den klugen Einsatz dieser Tools können Sie die Funktionalität und Benutzerfreundlichkeit Ihrer React-Anwendungen verbessern und ein globales Publikum mit zugänglichen und leistungsstarken Schnittstellen bedienen.

Während sich React weiterentwickelt, wird die Beherrschung dieser grundlegenden Konzepte Sie befähigen, innovative und benutzerfreundliche Weberlebnisse zu schaffen, die geografische und kulturelle Grenzen überschreiten. Denken Sie daran, Barrierefreiheit, Internationalisierung und Leistung zu priorisieren, um wirklich globale Anwendungen bereitzustellen.