React createRef: Het beheersen van het aanmaken van referentieobjecten

In de dynamische wereld van React-ontwikkeling is het efficiënt beheren van en interageren met DOM-elementen en component-instanties cruciaal. React's createRef API biedt een krachtig mechanisme voor het creëren van referentieobjecten, waarmee u elementen rechtstreeks kunt benaderen en manipuleren. Deze uitgebreide gids verkent het doel, het gebruik, de voordelen en de best practices van createRef, zodat u de kennis heeft om het effectief in uw React-projecten te gebruiken.

Wat is een referentieobject in React?

Een referentieobject, in de context van React, is een container met een muteerbare ref-eigenschap. Deze ref-eigenschap kan worden gekoppeld aan een DOM-element of een React-component-instantie, wat een directe manier biedt om met dat element of die instantie te interageren zonder voor elke interactie afhankelijk te zijn van React's virtuele DOM-diffingproces. Zie het als een directe link naar het daadwerkelijke DOM-element of de component-instantie in de browser.

Er zijn twee primaire manieren om referentieobjecten in React te creëren:

• React.createRef(): Creëert telkens wanneer het wordt aangeroepen een nieuw referentieobject. Dit is de aanpak voor class-componenten.
• useRef(): Een hook die een muteerbaar ref-object levert waarvan de .current-eigenschap wordt geïnitialiseerd met het doorgegeven argument (initialValue). Deze aanpak wordt gebruikt in functionele componenten.

Deze blog richt zich op React.createRef(). De useRef()-hook wordt in een afzonderlijke bron behandeld vanwege zijn unieke kenmerken en toepassing binnen functionele componenten.

Waarom referentieobjecten gebruiken?

Hoewel React een declaratieve benadering van UI-beheer aanmoedigt, zijn er situaties waarin directe DOM-toegang noodzakelijk of efficiënter is. Hier zijn enkele veelvoorkomende gebruiksscenario's voor referentieobjecten:

• Beheer van focus, tekstselectie of mediaweergave: Imperatief de focus instellen op een invoerveld, tekst selecteren in een textarea, of mediaweergave regelen (afspelen, pauzeren, volume) zijn allemaal scenario's waarin directe DOM-manipulatie vaak de meest eenvoudige aanpak is. Stel u bijvoorbeeld voor dat u een zoekbalk maakt. Nadat de gebruiker tekst heeft ingevoerd en verzonden, wilt u misschien automatisch de focus op het invoerveld leggen voor een nieuwe zoekopdracht. Een ref maakt deze precieze controle mogelijk.
• Activeren van imperatieve animaties: Als u integreert met een animatiebibliotheek van derden die directe DOM-elementreferenties vereist, bieden referentieobjecten de nodige toegang. GSAP (GreenSock Animation Platform) profiteert bijvoorbeeld aanzienlijk van directe elementtoegang via refs voor complexere animaties.
• Integratie met DOM-bibliotheken van derden: Sommige externe bibliotheken (bijv. die voor complexe datavisualisaties of gespecialiseerde UI-interacties) kunnen directe DOM-elementreferenties vereisen om correct te functioneren. Denk aan een bibliotheek die interactieve kaarten genereert. Deze heeft een referentie nodig naar een specifiek DOM-element waar de kaart kan worden weergegeven.
• Meting van de grootte of positie van een DOM-node: Om de afmetingen of positie van een DOM-element binnen de viewport te bepalen, is directe toegang tot het element vereist. Dit wordt vaak gebruikt voor het implementeren van functies zoals lazy loading van afbeeldingen of het dynamisch aanpassen van lay-outs op basis van de zichtbaarheid van elementen.
• Toegang tot component-instanties: Hoewel minder gebruikelijk, kunnen refs worden gebruikt om toegang te krijgen tot de methoden of eigenschappen van een child-component-instantie. Dit wordt over het algemeen afgeraden ten gunste van het doorgeven van data en callbacks, maar het kan nuttig zijn in specifieke scenario's, zoals het besturen van een aangepaste videospelercomponent.

React.createRef(): Een diepgaande kijk

Een referentieobject creëren

De React.createRef() API is eenvoudig te gebruiken. Binnen een class-component declareert u een nieuw referentieobject in de constructor:

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

  render() {
    return (
      <input type="text" ref={this.myRef} />
    );
  }
}

            

              
                Copy
              
            
          

In dit voorbeeld bevat this.myRef nu een referentieobject. Het ref-attribuut op het <input>-element krijgt dit referentieobject toegewezen. React zal de current-eigenschap van this.myRef vullen met de daadwerkelijke DOM-element-instantie wanneer de component mount.

Toegang tot het DOM-element

Nadat de component is gemount (d.w.z. na de componentDidMount lifecycle-methode), kunt u het DOM-element benaderen via de current-eigenschap van het referentieobject:

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

  componentDidMount() {
    // Nu kunt u het input-element benaderen
    this.myRef.current.focus();
  }

  render() {
    return (
      <input type="text" ref={this.myRef} />
    );
  }
}

            

              
                Copy
              
            
          

In dit geval zal this.myRef.current verwijzen naar het <input> DOM-element. De focus()-methode wordt vervolgens aangeroepen om het invoerveld programmatisch te focussen wanneer de component mount. Dit is zeer nuttig voor toegankelijkheid, door de aandacht van de gebruiker op het juiste moment naar de juiste plaats te leiden.

Voorbeeld: Implementatie van een Scroll-naar-boven-knop

Hier is een praktischer voorbeeld dat laat zien hoe createRef kan worden gebruikt om een scroll-naar-boven-knop te implementeren:

            class ScrollToTop extends React.Component {
  constructor(props) {
    super(props);
    this.containerRef = React.createRef();
    this.scrollToTop = this.scrollToTop.bind(this);
  }

  componentDidMount() {
    // Simuleer een lange pagina
    for (let i = 0; i < 100; i++) {
      const newDiv = document.createElement('div');
      newDiv.textContent = `Item ${i + 1}`;
      this.containerRef.current.appendChild(newDiv);
    }
  }

  scrollToTop() {
    this.containerRef.current.scrollTop = 0;
  }

  render() {
    return (
      <div ref={this.containerRef} style={{ height: '200px', overflow: 'auto' }}>
        <button onClick={this.scrollToTop}>Scroll naar boven</button>
      </div>
    );
  }
}

            

              
                Copy
              
            
          

In dit voorbeeld:

• containerRef is een referentie naar de scrollbare <div>.
• componentDidMount vult de <div> met voldoende inhoud om deze scrollbaar te maken.
• De scrollToTop-methode stelt de scrollTop-eigenschap van de <div> in op 0, waardoor de inhoud effectief naar boven wordt gescrold.

Best practices en overwegingen

• Vermijd overmatig gebruik: Gebruik referentieobjecten spaarzaam. React's dataflow-mechanisme zou de primaire manier moeten zijn om UI-updates te beheren. Gebruik refs alleen wanneer directe DOM-manipulatie echt noodzakelijk is.
• Toegang na het mounten: Zorg ervoor dat u de current-eigenschap van het referentieobject alleen benadert nadat de component is gemount (bijv. in componentDidMount of latere lifecycle-methoden). Toegang vóór het mounten zal resulteren in null.
• Null-check: Controleer altijd of this.myRef.current niet null is voordat u probeert toegang te krijgen tot de eigenschappen of methoden ervan. Dit is met name belangrijk bij voorwaardelijk gerenderde elementen.
• Begrijp de lifecycle: Wees u bewust van de component-lifecycle bij het gebruik van refs. Het DOM-element is pas beschikbaar nadat de component is gemount, en het kan op elk moment worden unmount of opnieuw worden gerenderd.
• Functionele componenten en useRef: Gebruik in functionele componenten de useRef-hook in plaats van React.createRef(). useRef is speciaal ontworpen voor functionele componenten en biedt een elegantere manier om referenties te beheren.
• Muteer het DOM niet onnodig rechtstreeks: Hoewel refs directe toegang tot het DOM bieden, vermijd directe manipulatie van het DOM tenzij absoluut noodzakelijk. React's virtuele DOM is ontworpen om UI-updates efficiënt af te handelen, en directe DOM-manipulatie kan dit proces verstoren.
• Toegankelijkheidsoverwegingen: Gebruik refs om de toegankelijkheid te verbeteren. Het automatisch focussen van een invoerveld na een gebruikersinteractie kan bijvoorbeeld de gebruikerservaring voor mensen die ondersteunende technologieën gebruiken aanzienlijk verbeteren. Wees echter bedacht op 'keyboard traps' en zorg ervoor dat gebruikers gemakkelijk weg kunnen navigeren van het gefocuste element.
• Internationalisering (i18n) en lokalisatie (l10n): Wanneer u werkt met elementen die tekst weergeven, wees u dan bewust van internationaliserings- en lokalisatieoverwegingen. De breedte van tekst kan aanzienlijk variëren tussen talen, wat de positionering of grootte van elementen die met createRef worden gerefereerd, kan beïnvloeden. Ontwerp uw componenten flexibel en aanpasbaar aan verschillende tekstlengtes en lay-outs. Zorg er bijvoorbeeld voor dat bij het programmatisch focussen van een foutmelding, de melding in alle talen volledig zichtbaar is.
• Rechts-naar-links (RTL) talen: Als uw applicatie RTL-talen zoals Arabisch of Hebreeuws ondersteunt, zorg er dan voor dat uw gebruik van refs compatibel is met RTL-lay-outs. Houd bijvoorbeeld bij het berekenen van de positie van een element ten opzichte van een ander rekening met de richting van de lay-out.

Veelvoorkomende fouten om te vermijden

• Toegang tot current voordat de component mount: Dit leidt tot fouten omdat het DOM-element nog niet beschikbaar is. Benader current altijd binnen componentDidMount of later.
• Vergeten methoden te binden: Wanneer u refs binnen event handlers gebruikt, zorg er dan voor dat de handler correct is gebonden aan de component-instantie (bijv. met this.myHandler = this.myHandler.bind(this) in de constructor). Anders kan this ongedefinieerd zijn binnen de handler.
• Nieuwe refs creëren in render(): Vermijd het direct creëren van nieuwe referentieobjecten binnen de render()-methode. Dit leidt ertoe dat bij elke render een nieuwe ref wordt gemaakt, wat prestatieproblemen veroorzaakt en het beoogde gedrag kan verstoren. Creëer de ref eenmaal in de constructor.
• Referenties lekken: Zorg ervoor dat u referenties correct opschoont of vrijgeeft wanneer een component wordt unmount om geheugenlekken te voorkomen. Hoewel React dit over het algemeen goed afhandelt, is het een goede gewoonte om bewust te zijn van de levenscyclus van referenties.

Alternatieven voor createRef

Hoewel createRef nuttig is, is het niet altijd de beste keuze. Afhankelijk van de situatie kunt u deze alternatieven overwegen:

• State beheren: In de meeste gevallen is het manipuleren van de state een betere aanpak dan directe DOM-manipulatie. Laat React de rendering afhandelen.
• Callback refs: Callback refs bieden meer controle over wanneer de referentie wordt ingesteld en ongedaan gemaakt. U geeft een functie door als het ref-attribuut. React roept deze functie aan met het DOM-element wanneer de component mount, en roept deze aan met null wanneer de component unmount. Dit is minder gebruikelijk nu useRef bestaat.
• findDOMNode (verouderd): ReactDOM.findDOMNode werd voorheen gebruikt om toegang te krijgen tot de onderliggende DOM-node van een component, maar wordt nu als verouderd beschouwd en over het algemeen afgeraden. createRef is de voorkeursaanpak.
• Refs doorsturen (Forwarding refs): Ref forwarding stelt een parent-component in staat om toegang te krijgen tot de DOM-node van een child-component, zelfs als de child-component een abstractie is die het DOM-element niet rechtstreeks rendert. Dit is nuttig voor het creëren van herbruikbare componenten die hun onderliggende DOM-node moeten blootstellen aan de parent.

Praktijkvoorbeelden van over de hele wereld

De toepassing van createRef en de bijbehorende concepten zijn universeel en overstijgen geografische grenzen. De *specifieke* problemen die ze oplossen, kunnen echter enigszins variëren afhankelijk van het doel van de applicatie en de doelgroep. Hier zijn een paar voorbeelden:

• E-commerce (Wereldwijd): Een e-commercesite die zich richt op gebruikerservaring kan refs gebruiken om automatisch de zoekbalk te focussen wanneer een gebruiker op de startpagina landt, of om de 'Toevoegen aan winkelwagen'-knop te markeren nadat een item is geselecteerd, ongeacht de locatie of taal van de gebruiker. Ze kunnen ook refs gebruiken om de focus te beheren binnen complexe productconfiguratieformulieren, wat zorgt voor een soepele en intuïtieve ervaring.
• Educatieve platforms (Meertalig): Een online leerplatform kan refs gebruiken om de weergave van videocolleges te regelen, waardoor functies zoals pauzeren en terugspoelen mogelijk worden. Voor applicaties die meerdere talen ondersteunen, vereist het beheren van tekstinvoer en -weergave met refs zorgvuldige overweging van tekensets en lay-outrichting (RTL-talen).
• Financiële applicaties (Internationaal): Een handelsplatform kan refs gebruiken om real-time datavisualisaties te beheren, zodat grafieken en diagrammen soepel en efficiënt worden bijgewerkt. In internationale financiële applicaties kunnen refs worden gebruikt om getallen en valuta's te formatteren volgens de locale van de gebruiker. Bijvoorbeeld, het correct weergeven van valutasymbolen (€, $, ¥) en decimale scheidingstekens (,. ).
• Kaart- en navigatie-apps (Wereldwijd): Applicaties zoals Google Maps of Citymapper kunnen refs gebruiken om te interageren met kaartbibliotheken van derden, waardoor gebruikers kunnen pannen, zoomen en direct met kaartelementen kunnen interageren. Deze apps moeten zich aanpassen aan verschillende kaartprojecties, adresformaten en lokale herkenningspunten wereldwijd.
• Socialemediaplatforms (Wereldwijd): Socialemediaplatforms gebruiken refs om de focus binnen commentaardraden te beheren, correcte media-uploads te garanderen en toegankelijke videoweergave mogelijk te maken. Ze moeten ook rekening houden met culturele nuances in contentmoderatie en communicatiestijlen. Bijvoorbeeld, ervoor zorgen dat emoji's en emoticons correct worden weergegeven op verschillende platforms en in verschillende regio's.

Conclusie

React.createRef is een waardevol hulpmiddel in het arsenaal van de React-ontwikkelaar. Het biedt een manier om direct te interageren met DOM-elementen en component-instanties wanneer dat nodig is. Door het doel, het gebruik en de best practices ervan te begrijpen, kunt u het effectief gebruiken om uw React-applicaties te verbeteren en dynamischere en interactievere gebruikersinterfaces te creëren. Onthoud dat u het oordeelkundig moet gebruiken, prioriteit moet geven aan het dataflow-mechanisme van React, en rekening moet houden met toegankelijkheid en internationalisering bij het implementeren van functies die afhankelijk zijn van directe DOM-manipulatie. Hoewel useRef (gebruikt in functionele componenten) een modern alternatief biedt, geeft het begrijpen van createRef een fundamenteel begrip van React-referenties. Door createRef te beheersen, bent u goed uitgerust om een breder scala aan React-ontwikkelingsuitdagingen aan te gaan en robuustere en beter onderhoudbare applicaties te bouwen. Blijf de functies van React verkennen en ermee experimenteren om uw codeervaardigheden te verbeteren en bij te dragen aan de levendige React-gemeenschap.