React Refs: useRef vs. createRef ontrafelen

In de dynamische wereld van React-ontwikkeling is het efficiënt beheren van de componentstatus en interactie met het Document Object Model (DOM) cruciaal. React Refs bieden een mechanisme om direct toegang te krijgen tot DOM-elementen of React-componenten en deze te manipuleren. Twee primaire methoden voor het creëren van Refs zijn useRef en createRef. Hoewel beide dienen om Refs te creëren, verschillen ze in hun implementatie en use cases. Deze gids is bedoeld om deze twee benaderingen te ontrafelen en duidelijkheid te verschaffen over wanneer en hoe je ze effectief kunt gebruiken in je React-projecten, met name bij het ontwikkelen voor een wereldwijd publiek.

React Refs begrijpen

Een Ref (afkorting van reference) is een React-functie waarmee je direct toegang hebt tot een DOM-knooppunt of een React-component. Dit is met name handig wanneer je het volgende nodig hebt:

Direct een DOM-element manipuleren, zoals het focussen op een invoerveld.
Toegang krijgen tot de methoden of eigenschappen van een kindcomponent.
Waarden beheren die persistent zijn over renders zonder herrenders te veroorzaken (vergelijkbaar met instance variables in class componenten).

Hoewel React een declaratieve aanpak aanmoedigt, waarbij de UI wordt beheerd via state en props, zijn er situaties waarin directe manipulatie noodzakelijk is. Refs bieden een manier om de kloof te overbruggen tussen de declaratieve aard van React en imperatieve DOM-bewerkingen.

`createRef`: De Klasse Component Aanpak

createRef is een methode die door React wordt geleverd. Het wordt voornamelijk gebruikt binnen class componenten om Refs te creëren. Elke keer dat een class component wordt geïnstantieerd, creëert createRef een nieuw Ref-object. Dit zorgt ervoor dat elke instantie van de component zijn eigen unieke Ref heeft.

Syntaxis en Gebruik

Om createRef te gebruiken, declareer je eerst een Ref in je class component, meestal in de constructor. Vervolgens koppel je de Ref aan een DOM-element of een component met behulp van het ref-attribuut.


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

  componentDidMount() {
    // Toegang tot het DOM-element nadat de component is gemonteerd
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

In dit voorbeeld wordt this.myRef gemaakt met behulp van React.createRef(). Het wordt vervolgens toegewezen aan het ref-attribuut van het invoerelement. Nadat de component is gemonteerd (in componentDidMount), heb je toegang tot het daadwerkelijke DOM-knooppunt met behulp van this.myRef.current en kun je er bewerkingen op uitvoeren (in dit geval het focussen op de invoer).

Voorbeeld: Een invoerveld focussen

Laten we een scenario bekijken waarin je automatisch een invoerveld wilt focussen wanneer een component wordt gemonteerd. Dit is een veelvoorkomende use case voor Refs, vooral in formulieren of interactieve elementen.


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

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

  render() {
    return (
      
        
      
    );
  }
}

In dit voorbeeld focust FocusInput het invoerveld direct na montage. Dit kan de gebruikerservaring verbeteren door de aandacht van de gebruiker te richten op het invoerelement zodra de component is weergegeven.

Belangrijke overwegingen met `createRef`

Alleen Klasse Componenten: createRef is ontworpen voor gebruik in class componenten. Hoewel het technisch gezien in functionele componenten kan werken, is dit niet het beoogde gebruik en kan het leiden tot onverwacht gedrag.
Nieuwe Ref bij Elke Instantie: Elke instantie van een class component krijgt zijn eigen createRef. Dit is belangrijk voor het behouden van isolatie tussen componentinstanties.

`useRef`: De Functionele Component Hook

useRef is een Hook die is geïntroduceerd in React 16.8. Het biedt een manier om veranderlijke Ref-objecten te creëren binnen functionele componenten. In tegenstelling tot createRef retourneert useRef hetzelfde Ref-object elke keer dat de component wordt weergegeven. Dit maakt het ideaal voor het persistent maken van waarden over renders zonder herrenders te activeren.

Syntaxis en Gebruik

Het gebruik van useRef is eenvoudig. Je roept de useRef Hook aan en geeft een initiële waarde mee. De Hook retourneert een object met een .current-eigenschap, die je vervolgens kunt gebruiken om de waarde te openen en te wijzigen.


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

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

  useEffect(() => {
    // Toegang tot het DOM-element nadat de component is gemonteerd
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

In dit voorbeeld creëert useRef(null) een Ref met een initiële waarde van null. De useEffect Hook wordt gebruikt om toegang te krijgen tot het DOM-element nadat de component is gemonteerd. De myRef.current-eigenschap bevat de verwijzing naar het invoerelement, waardoor je het kunt focussen.

Voorbeeld: Eerdere prop-waarden bijhouden

Een krachtige use case voor useRef is het bijhouden van de vorige waarde van een prop. Omdat wijzigingen in Refs geen herrenders activeren, kun je ze gebruiken om waarden op te slaan die je persistent wilt maken over renders zonder de UI te beïnvloeden.


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

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

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

  return (
    
      Huidige waarde: {value}
      Vorige waarde: {previousValue.current}
    
  );
}

In dit voorbeeld slaat previousValue.current de vorige waarde van de value-prop op. De useEffect Hook werkt de Ref bij wanneer de value-prop verandert. Hierdoor kun je de huidige en vorige waarden vergelijken, wat handig kan zijn voor het detecteren van wijzigingen of het implementeren van animaties.

Belangrijke overwegingen met `useRef`

Alleen Functionele Componenten: useRef is een Hook en kan alleen worden gebruikt binnen functionele componenten of aangepaste Hooks.
Persistent Over Renders: De useRef Hook retourneert hetzelfde Ref-object bij elke render. Dit is cruciaal voor zijn vermogen om waarden persistent te maken zonder herrenders te activeren.
Veranderlijke .current-eigenschap: Je kunt de .current-eigenschap van het Ref-object rechtstreeks wijzigen.
Initiële Waarde: Je kunt een initiële waarde opgeven voor useRef. Deze waarde wordt toegewezen aan de .current-eigenschap wanneer de component voor het eerst wordt weergegeven.
Geen Herrenders: Het wijzigen van de .current-eigenschap van een Ref veroorzaakt geen component herrender.

`useRef` vs. `createRef`: Een Gedetailleerde Vergelijking

Nu we zowel useRef als createRef afzonderlijk hebben verkend, laten we ze naast elkaar vergelijken om hun belangrijkste verschillen te benadrukken en wanneer je de een boven de ander moet kiezen.

Eigenschap	`useRef`	`createRef`
Component Type	Functionele Componenten	Klasse Componenten
Hook of Methode	Hook	Methode
Ref Instantie	Retourneert hetzelfde Ref-object bij elke render	Creëert een nieuw Ref-object bij elke instantie van de component
Use Cases	Toegang tot DOM-elementen Waarden persistent maken over renders zonder herrenders te activeren Vorige prop-waarden bijhouden Veranderlijke waarden opslaan die geen herrenders veroorzaken	Toegang tot DOM-elementen Toegang tot methoden van kindcomponenten

De Juiste Ref Kiezen: Een Beslissingsgids

Hier is een eenvoudige gids om je te helpen kiezen tussen useRef en createRef:

Werk je met een functionele component? Gebruik useRef.
Werk je met een class component? Gebruik createRef.
Moet je een waarde over renders persistent maken zonder herrenders te activeren? Gebruik useRef.
Moet je de vorige waarde van een prop bijhouden? Gebruik useRef.

Verder dan DOM-manipulatie: Geavanceerde Use Cases voor Refs

Hoewel toegang tot en manipulatie van DOM-elementen een primaire use case is voor Refs, bieden ze mogelijkheden die verder gaan dan deze kernfunctionaliteit. Laten we enkele geavanceerde scenario's verkennen waarin Refs bijzonder nuttig kunnen zijn.

1. Toegang tot Methoden van Kindcomponenten

Refs kunnen worden gebruikt om toegang te krijgen tot methoden die zijn gedefinieerd in kindcomponenten. Hierdoor kan een oudercomponent acties activeren of gegevens rechtstreeks ophalen van zijn kinderen. Deze aanpak is met name handig wanneer je fijne controle nodig hebt over kindcomponenten.


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

  handleClick = () => {
    // Roep een methode aan op de kindcomponent
    this.childRef.current.doSomething();
  };

  render() {
    return (
      
        
        
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Actie van kindcomponent geactiveerd!');
  };

  render() {
    return Dit is een kindcomponent.;
  }
}

In dit voorbeeld gebruikt de ParentComponent een Ref om toegang te krijgen tot de ChildComponent en zijn doSomething-methode aan te roepen.

2. Focus en Selectie Beheren

Refs zijn van onschatbare waarde voor het beheren van focus en selectie binnen invoervelden en andere interactieve elementen. Dit is cruciaal voor het creëren van toegankelijke en gebruiksvriendelijke interfaces.


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

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Selecteer de tekst in de invoer
    }
  }, []);

  return ;
}

Dit voorbeeld focust de invoer en selecteert de tekst zodra de component wordt gemonteerd.

3. Elementen Animeren

Refs kunnen in combinatie met animatiebibliotheken (zoals GreenSock of Framer Motion) worden gebruikt om de DOM direct te manipuleren en complexe animaties te creëren. Dit zorgt voor fijne controle over animatiesequenties.

Voorbeeld met vanilla JavaScript voor de eenvoud:


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

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

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Eenvoudige animatie: verplaats de box naar rechts
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 seconde
          iterations: Infinity, // Herhaal voor altijd
          direction: 'alternate',
        }
      );
    }
  }, []);

  return ;
}

Dit voorbeeld gebruikt de Web Animations API om een eenvoudige box te animeren en deze horizontaal heen en weer te bewegen.

Best Practices voor het Gebruiken van React Refs in Globale Applicaties

Bij het ontwikkelen van React-applicaties voor een wereldwijd publiek is het belangrijk om te overwegen hoe Refs interageren met internationalisering (i18n) en lokalisatie (l10n). Hier zijn enkele best practices:

1. Toegankelijkheid (A11y)

Zorg ervoor dat je gebruik van Refs geen negatieve invloed heeft op de toegankelijkheid. Overweeg bijvoorbeeld, bij het programmatisch focussen op elementen, de focusvolgorde van de gebruiker en of de focuswijziging geschikt is voor schermlezers en toetsenbordgebruikers.


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

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

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Focus alleen als de knop nog niet door de gebruiker is gefocust
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return ;
}

2. Geïnternationaliseerde Invoervelden

Houd bij het werken met invoervelden rekening met verschillende invoermethoden en tekensets die in verschillende talen worden gebruikt. Zorg ervoor dat je op Refs gebaseerde manipulaties (bijv. selectie, cursorpositie) correct werken in verschillende invoertypen en landinstellingen. Test je componenten grondig met verschillende talen en invoermethoden.

3. Right-to-Left (RTL)-Lay-outs

Als je applicatie RTL-talen ondersteunt (bijv. Arabisch, Hebreeuws), zorg er dan voor dat je DOM-manipulaties met behulp van Refs rekening houden met de omgekeerde lay-out. Overweeg bijvoorbeeld, bij het animeren van elementen, de animatierichting om te keren voor RTL-talen.

4. Prestatie-overwegingen

Hoewel Refs een krachtige manier bieden om met de DOM te communiceren, kan overmatig gebruik leiden tot prestatieproblemen. Directe DOM-manipulatie omzeilt de virtuele DOM en het reconciliatieproces van React, wat mogelijk kan leiden tot inconsistenties en tragere updates. Gebruik Refs oordeelkundig en alleen wanneer nodig.

Conclusie

React Refs, met name useRef en createRef, zijn essentiële tools voor React-ontwikkelaars. Het begrijpen van de nuances van elke aanpak en wanneer je ze effectief kunt toepassen, is cruciaal voor het bouwen van robuuste en performante applicaties. createRef blijft de standaard voor het beheren van Refs binnen class componenten, waardoor elke instantie zijn unieke Ref heeft. useRef, met zijn persistente karakter over renders, is ideaal voor functionele componenten en biedt een manier om DOM-elementen te beheren en waarden persistent te maken zonder onnodige herrenders te activeren. Door deze tools verstandig te gebruiken, kun je de functionaliteit en gebruikerservaring van je React-applicaties verbeteren en een wereldwijd publiek bedienen met toegankelijke en performante interfaces.

Terwijl React blijft evolueren, zal het beheersen van deze fundamentele concepten je in staat stellen innovatieve en gebruiksvriendelijke webervaringen te creëren die geografische en culturele grenzen overstijgen. Vergeet niet om prioriteit te geven aan toegankelijkheid, internationalisering en prestaties om echt globale applicaties te leveren.

React Refs: useRef vs. createRef ontrafelen

React Refs begrijpen

createRef: De Klasse Component Aanpak

Syntaxis en Gebruik

Voorbeeld: Een invoerveld focussen

Belangrijke overwegingen met createRef

useRef: De Functionele Component Hook

Syntaxis en Gebruik

Voorbeeld: Eerdere prop-waarden bijhouden

Belangrijke overwegingen met useRef

useRef vs. createRef: Een Gedetailleerde Vergelijking

De Juiste Ref Kiezen: Een Beslissingsgids

Verder dan DOM-manipulatie: Geavanceerde Use Cases voor Refs

1. Toegang tot Methoden van Kindcomponenten

2. Focus en Selectie Beheren

3. Elementen Animeren

Best Practices voor het Gebruiken van React Refs in Globale Applicaties

1. Toegankelijkheid (A11y)

2. Geïnternationaliseerde Invoervelden

3. Right-to-Left (RTL)-Lay-outs

4. Prestatie-overwegingen

Conclusie

`createRef`: De Klasse Component Aanpak

Belangrijke overwegingen met `createRef`

`useRef`: De Functionele Component Hook

Belangrijke overwegingen met `useRef`

`useRef` vs. `createRef`: Een Gedetailleerde Vergelijking