React Ref-Muster: Techniken zur DOM-Manipulation für dynamische UIs

React, eine leistungsstarke JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen, fördert oft einen deklarativen Ansatz in der UI-Entwicklung. Manchmal ist jedoch eine direkte Manipulation des Document Object Model (DOM) erforderlich. Hier kommen React Refs ins Spiel. Refs bieten eine Möglichkeit, auf DOM-Knoten oder React-Elemente zuzugreifen, die in der Render-Methode erstellt wurden. Dieser umfassende Leitfaden untersucht verschiedene React Ref-Muster und Techniken zur effektiven Manipulation des DOM, zur Verwaltung des Fokus, zur Integration von Drittanbieter-Bibliotheken und zur Optimierung der UI-Performance. Wir werden uns mit praktischen Beispielen und bewährten Methoden befassen, die für ein globales Publikum von React-Entwicklern geeignet sind.

Grundlagen von React Refs

Im Kern ist ein Ref ein einfaches JavaScript-Objekt mit einer current-Eigenschaft. Diese Eigenschaft ist veränderbar und ermöglicht es Ihnen, jeden beliebigen Wert zu speichern, einschließlich eines DOM-Knotens oder einer React-Komponenteninstanz. React bietet zwei primäre Wege, um Refs zu erstellen: React.createRef() (Klassenkomponenten) und den useRef()-Hook (funktionale Komponenten).

React.createRef() (Klassenkomponenten)

React.createRef() erstellt ein Ref-Objekt, das einer Eigenschaft der Instanz einer Klassenkomponente zugewiesen wird. Dieser Ref bleibt während des gesamten Lebenszyklus der Komponente bestehen.

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

  componentDidMount() {
    // Zugriff auf den DOM-Knoten, nachdem die Komponente gemountet wurde
    console.log(this.myRef.current); // DOM-Knoten oder null
  }

  render() {
    return 
Hello, world!
;
  }
}

            

              
                Copy
              
            
          

useRef() (Funktionale Komponenten)

Der useRef()-Hook erstellt ein veränderbares Ref-Objekt, dessen .current-Eigenschaft mit dem übergebenen Argument (initialValue) initialisiert wird. Das zurückgegebene Ref-Objekt bleibt für die gesamte Lebensdauer der Komponente bestehen.

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

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

  useEffect(() => {
    // Zugriff auf den DOM-Knoten, nachdem die Komponente gemountet wurde
    console.log(myRef.current); // DOM-Knoten oder null
  }, []); // Leeres Abhängigkeitsarray stellt sicher, dass dies nur einmal beim Mounten ausgeführt wird

  return 
Hello, world!
;
}

            

              
                Copy
              
            
          

Häufige Anwendungsfälle für React Refs

Refs sind unglaublich vielseitig und finden in verschiedenen Szenarien der React-Entwicklung Anwendung.

1. Zugriff auf und Manipulation von DOM-Knoten

Der häufigste Anwendungsfall für Refs ist der direkte Zugriff auf und die Manipulation von DOM-Knoten. Dies ist nützlich für Aufgaben wie das Fokussieren eines Eingabefeldes, das Scrollen zu einem Element oder das Messen seiner Abmessungen.

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

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

  useEffect(() => {
    // Fokussiert das Eingabefeld, nachdem die Komponente gemountet wurde
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return ;
}

            

              
                Copy
              
            
          

Beispiel: Stellen Sie sich vor, Sie erstellen ein mehrstufiges Formular. Wenn ein Benutzer ein Feld ausfüllt, möchten Sie vielleicht automatisch das nächste Eingabefeld fokussieren. Refs machen dies nahtlos möglich.

2. Verwaltung von Fokus, Textauswahl und Medienwiedergabe

Refs sind unerlässlich für die feingranulare Steuerung des Fokus, der Textauswahl innerhalb von Elementen und der Verwaltung der Medienwiedergabe (z. B. Video oder Audio).

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

function VideoPlayer() {
  const videoRef = useRef(null);

  const playVideo = () => {
    if (videoRef.current) {
      videoRef.current.play();
    }
  };

  const pauseVideo = () => {
    if (videoRef.current) {
      videoRef.current.pause();
    }
  };

  return (
    

      
      Abspielen
      Pause
    
  );
}

            

              
                Copy
              
            
          

Überlegungen zur Barrierefreiheit: Wenn Sie Refs zur Fokusverwaltung verwenden, stellen Sie ein ordnungsgemäßes Fokusmanagement sicher, um die Barrierefreiheit für Benutzer zu gewährleisten, die auf Tastaturnavigation oder assistive Technologien angewiesen sind. Setzen Sie beispielsweise den Fokus sofort auf das erste fokussierbare Element im Modal, nachdem es geöffnet wurde.

3. Integration von Drittanbieter-Bibliotheken

Viele Drittanbieter-JavaScript-Bibliotheken manipulieren das DOM direkt. Refs bilden eine Brücke zwischen dem deklarativen Modell von React und diesen imperativen Bibliotheken.

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

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

  useEffect(() => {
    if (chartRef.current) {
      const ctx = chartRef.current.getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['Rot', 'Blau', 'Gelb', 'Grün', 'Lila', 'Orange'],
          datasets: [{
            label: '# der Stimmen',
            data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    }
  }, []);

  return ;
}

            

              
                Copy
              
            
          

Hinweis zur Internationalisierung: Bei der Integration von Drittanbieter-Bibliotheken, die Datumsangaben, Zahlen oder Währungen verarbeiten, stellen Sie sicher, dass diese korrekt für die Locale des Benutzers konfiguriert sind. Viele Bibliotheken bieten Optionen zur Angabe der gewünschten Locale. Beispielsweise sollten Datumsformatierungsbibliotheken mit der Sprache und Region des Benutzers initialisiert werden, um Daten im korrekten Format anzuzeigen (z. B. MM/TT/JJJJ vs. TT.MM.JJJJ).

4. Auslösen von imperativen Animationen

Während React-Bibliotheken wie Framer Motion und React Transition Group für die meisten Animationsanforderungen bevorzugt werden, können Refs für imperative Animationen verwendet werden, wenn eine feingranularere Steuerung erforderlich ist.

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

function FadeIn() {
  const elementRef = useRef(null);

  useEffect(() => {
    const element = elementRef.current;
    if (element) {
      element.style.opacity = 0; // Anfänglich ausgeblendet
      let opacity = 0;
      const intervalId = setInterval(() => {
        opacity += 0.05;
        element.style.opacity = opacity;
        if (opacity >= 1) {
          clearInterval(intervalId);
        }
      }, 20); // Intervall für Geschwindigkeit anpassen

      return () => clearInterval(intervalId); // Aufräumen beim Unmounten
    }
  }, []);

  return 
Einblenden!
;
}

            

              
                Copy
              
            
          

5. Messen von Elementabmessungen

Refs ermöglichen es Ihnen, die Abmessungen (Breite, Höhe) von Elementen im DOM genau zu messen. Dies ist nützlich für responsive Layouts, dynamische Positionierung und die Erstellung benutzerdefinierter visueller Effekte.

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

function MeasureElement() {
  const elementRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const element = elementRef.current;
    if (element) {
      const width = element.offsetWidth;
      const height = element.offsetHeight;
      setDimensions({ width, height });
    }
  }, []);

  return (
    

      
Dieses Element messen
      
Breite: {dimensions.width}px
      
Höhe: {dimensions.height}px
    
  );
}

            

              
                Copy
              
            
          

Fortgeschrittene Ref-Muster

Über die grundlegende Verwendung von createRef und useRef hinaus gibt es mehrere fortgeschrittene Muster, die Refs für komplexere Szenarien nutzen.

1. Callback Refs

Callback Refs bieten eine flexiblere Möglichkeit, auf DOM-Knoten zuzugreifen. Anstatt ein Ref-Objekt zuzuweisen, weisen Sie dem ref-Attribut eine Funktion zu. React ruft diese Funktion mit dem DOM-Knoten auf, wenn die Komponente gemountet wird, und mit null, wenn sie unmounted wird.

            
import React, { useState } from 'react';

function CallbackRefExample() {
  const [element, setElement] = useState(null);

  const setRef = (node) => {
    setElement(node);
  };

  return (
    

      
Der Ref dieses Elements wird durch einen Callback verwaltet.
      {element && 
Element: {element.tagName}
}
    
  );
}

            

              
                Copy
              
            
          

Callback Refs sind besonders nützlich, wenn Sie zusätzliche Aktionen ausführen müssen, wenn der Ref gesetzt oder gelöscht wird.

2. Weiterleiten von Refs (forwardRef)

React.forwardRef ist eine Technik, die es einer Komponente ermöglicht, einen von ihrer Elternkomponente übergebenen Ref zu empfangen. Dies ist nützlich, wenn Sie einen DOM-Knoten einer Kindkomponente für ihre Elternkomponente verfügbar machen möchten.

            
import React, { forwardRef } from 'react';

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

function ParentComponent() {
  const inputRef = React.useRef(null);

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

  return (
    

      
      Eingabefeld fokussieren
    
  );
}

            

              
                Copy
              
            
          

In diesem Beispiel leitet MyInput den Ref an das zugrunde liegende Eingabeelement weiter, wodurch die ParentComponent direkt auf die Eingabe zugreifen und sie manipulieren kann.

3. Bereitstellen von Komponentenmethoden mit Refs

Refs können auch verwendet werden, um Methoden einer Kindkomponente für ihre Elternkomponente bereitzustellen. Dies ist nützlich, um wiederverwendbare Komponenten mit imperativen APIs zu erstellen.

            
import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    getValue: () => {
      return inputRef.current.value;
    }
  }));

  return ;
});

function ParentComponent() {
  const fancyInputRef = useRef(null);

  const handleFocus = () => {
    fancyInputRef.current.focus();
  };

  const handleGetValue = () => {
    alert(fancyInputRef.current.getValue());
  };

  return (
    

      
      Eingabefeld fokussieren
      Wert abrufen
    
  );
}

            

              
                Copy
              
            
          

Der useImperativeHandle-Hook ermöglicht es Ihnen, den Instanzwert anzupassen, der Elternkomponenten bei der Verwendung von forwardRef zur Verfügung gestellt wird. Dies ermöglicht einen kontrollierten Zugriff auf die Methoden des Kindes.

Bewährte Methoden für die Verwendung von React Refs

Obwohl Refs leistungsstarke Fähigkeiten bieten, ist es entscheidend, sie mit Bedacht einzusetzen und bewährte Methoden zu befolgen.

• Exzessive DOM-Manipulation vermeiden: Der deklarative Ansatz von React ist im Allgemeinen effizienter. Verwenden Sie Refs nur dann, wenn es für Aufgaben notwendig ist, die nicht einfach durch das State-Management von React erreicht werden können.
• Refs sparsam verwenden: Eine übermäßige Verwendung von Refs kann zu Code führen, der schwerer zu warten und zu verstehen ist.
• Den Komponenten-Lebenszyklus beachten: Stellen Sie sicher, dass Sie nur nach dem Mounten der Komponente auf die .current-Eigenschaft eines Refs zugreifen (z. B. in componentDidMount oder useEffect). Ein früherer Zugriff kann zu null-Werten führen.
• Refs bereinigen: Bei der Verwendung von Callback Refs stellen Sie sicher, dass Sie den Ref beim Unmounten der Komponente auf null setzen, um Speicherlecks zu vermeiden.
• Alternativen in Betracht ziehen: Bevor Sie zu Refs greifen, prüfen Sie, ob das gewünschte Verhalten auch mit dem State-Management von React oder kontrollierten Komponenten erreicht werden kann.
• Barrierefreiheit: Bei der Manipulation des Fokus stellen Sie sicher, dass die Anwendung für Benutzer mit Behinderungen zugänglich bleibt.

Globale Überlegungen zur Verwendung von Refs

Bei der Erstellung von Anwendungen für ein globales Publikum sollten Sie bei der Verwendung von Refs die folgenden Aspekte berücksichtigen:

• Rechts-nach-Links (RTL) Layouts: Bei der Manipulation von DOM-Elementen, die das Layout betreffen (z. B. Scrollen), stellen Sie sicher, dass Ihr Code RTL-Layouts für Sprachen wie Arabisch und Hebräisch korrekt behandelt. Verwenden Sie Eigenschaften wie scrollLeft und scrollWidth sorgfältig und normalisieren Sie sie gegebenenfalls basierend auf der Layout-Richtung.
• Eingabemethoden-Editoren (IMEs): Seien Sie sich bewusst, dass Benutzer in einigen Regionen IMEs zur Texteingabe verwenden. Wenn Sie den Fokus oder die Textauswahl verwalten, stellen Sie sicher, dass Ihr Code korrekt mit IMEs interagiert und die Eingabe des Benutzers nicht stört.
• Schriftarten-Laden: Wenn Sie Elementabmessungen messen, bevor die Schriftarten vollständig geladen sind, können die anfänglichen Messungen falsch sein. Verwenden Sie Techniken, um sicherzustellen, dass Schriftarten geladen sind, bevor Sie sich auf diese Messungen verlassen (z. B. mit document.fonts.ready). Verschiedene Schriftsysteme (z. B. Lateinisch, Kyrillisch, CJK) haben sehr unterschiedliche Schriftgrößen und Metriken.
• Benutzereinstellungen: Berücksichtigen Sie die Vorlieben der Benutzer für Animationen und Übergänge. Einige Benutzer bevorzugen möglicherweise reduzierte Bewegung. Respektieren Sie diese Vorlieben, wenn Sie Refs zum Auslösen von Animationen verwenden. Verwenden Sie die CSS-Media-Query `prefers-reduced-motion`, um die Benutzereinstellungen zu erkennen.

Fazit

React Refs sind ein mächtiges Werkzeug zur direkten Manipulation des DOM, zur Verwaltung des Fokus, zur Integration von Drittanbieter-Bibliotheken und zur Optimierung der UI-Performance. Indem Sie die verschiedenen Ref-Muster verstehen und bewährte Methoden befolgen, können Sie Refs effektiv nutzen und gleichzeitig die Vorteile des deklarativen Ansatzes von React beibehalten. Denken Sie daran, globale Aspekte der Barrierefreiheit und Internationalisierung zu berücksichtigen, um inklusive und benutzerfreundliche Anwendungen für ein vielfältiges Publikum zu erstellen. Mit sorgfältiger Planung und Implementierung können React Refs die Fähigkeiten und die Reaktionsfähigkeit Ihrer React-Anwendungen erheblich verbessern.