React forwardRef: Mestre videresending av ref for gjenbrukbare komponenter

I React-verdenen er det avgjørende å lage gjenbrukbare og sammensettbare komponenter. Noen ganger trenger du imidlertid tilgang til den underliggende DOM-noden til en barnekomponent fra dens forelder. Det er her React.forwardRef kommer til unnsetning. Denne omfattende guiden vil dykke ned i detaljene rundt forwardRef, og forklare dens formål, implementering, bruksområder og beste praksis.

Hva er videresending av ref?

Videresending av ref er en teknikk i React som lar en foreldrekomponent få tilgang til DOM-noden eller React-komponentinstansen til en barnekomponent. I hovedsak "videresender" den en ref som er sendt til en komponent, ned til et av barna. Dette er spesielt nyttig når du trenger å manipulere DOM-en til en barnekomponent direkte, som for eksempel å fokusere et input-felt eller måle dimensjonene.

Uten forwardRef kan refs kun festes direkte til DOM-elementer eller klassekomponenter. Funksjonelle komponenter kan ikke motta eller eksponere refs direkte.

Hvorfor bruke forwardRef?

Flere scenarioer krever bruk av forwardRef:

• DOM-manipulasjon: Når du trenger å samhandle direkte med DOM-en til en barnekomponent. For eksempel å sette fokus på et input-felt, utløse animasjoner eller måle elementer.
• Abstraksjon: Når du lager gjenbrukbare UI-komponenter som trenger å eksponere visse DOM-elementer for tilpasning eller integrering i andre deler av applikasjonen.
• Høyere-ordens komponenter (HOCs): Når du pakker inn en komponent med en HOC og må sikre at refs blir korrekt videresendt til den underliggende komponenten.
• Komponentbiblioteker: Når man bygger komponentbiblioteker, gjør videresending av ref det mulig for utviklere å få tilgang til og tilpasse de underliggende DOM-elementene i komponentene dine, noe som gir større fleksibilitet.

Hvordan forwardRef fungerer

React.forwardRef er en høyere-ordens komponent (HOC) som aksepterer en render-funksjon som sitt argument. Denne render-funksjonen mottar props og ref som argumenter. Render-funksjonen returnerer deretter et React-element. ref-argumentet er den ref-en som ble sendt til komponenten fra dens forelder. Du kan deretter feste denne ref-en til en barnekomponent inne i render-funksjonen.

Her er en oversikt over prosessen:

1. En foreldrekomponent oppretter en ref ved hjelp av useRef.
2. Foreldrekomponenten sender ref-en til en barnekomponent som en prop.
3. Barnekomponenten er pakket inn i React.forwardRef.
4. Inne i render-funksjonen til forwardRef blir ref-en festet til et DOM-element eller en annen React-komponent.
5. Foreldrekomponenten kan nå få tilgang til DOM-noden eller komponentinstansen via ref-en.

Implementering av forwardRef: Et praktisk eksempel

La oss illustrere forwardRef med et enkelt eksempel: en tilpasset input-komponent som lar foreldrekomponenten fokusere input-feltet programmatisk.

Eksempel: Tilpasset input-komponent med videresending av ref

Først, la oss lage den tilpassede input-komponenten:

import React, { forwardRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  return (
    <div>
      <label htmlFor={props.id}>{props.label}</label>
      <input type="text" id={props.id} ref={ref} {...props} />
    </div>
  );
});

CustomInput.displayName = "CustomInput"; // Anbefales for bedre feilsøking

export default CustomInput;

I dette eksempelet:

• Vi importerer forwardRef fra 'react'.
• Vi pakker inn vår funksjonelle komponent med forwardRef.
• forwardRef-funksjonen mottar props og ref som argumenter.
• Vi fester ref-en til <input>-elementet.
• Vi setter displayName for bedre feilsøking i React DevTools.

La oss nå se hvordan vi bruker denne komponenten i en foreldrekomponent:

import React, { useRef, useEffect } from 'react';
import CustomInput from './CustomInput';

const ParentComponent = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    // Fokuser input-feltet når komponenten monteres
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <CustomInput label="Name:" id="name" ref={inputRef} placeholder="Enter your name" />
    </div>
  );
};

export default ParentComponent;

I denne foreldrekomponenten:

• Vi oppretter en ref ved hjelp av useRef.
• Vi sender inputRef til CustomInput-komponenten som ref-prop.
• Inne i useEffect-hooken får vi tilgang til den underliggende DOM-noden ved hjelp av inputRef.current og kaller focus()-metoden.

Når ParentComponent monteres, vil input-feltet i CustomInput-komponenten automatisk bli fokusert.

Bruksområder for forwardRef

Her er noen vanlige bruksområder der forwardRef viser seg å være uvurderlig:

1. Fokusere input-felt

Som vist i eksempelet over, lar forwardRef deg programmatisk fokusere input-felt, noe som er nyttig for skjemavalidering, tilgjengelighet og forbedringer av brukeropplevelsen. For eksempel, etter at en bruker sender inn et skjema med feil, kan du fokusere det første input-feltet med en feil for å veilede brukeren.

2. Måle elementdimensjoner

Du kan bruke forwardRef for å få tilgang til DOM-noden til en barnekomponent og måle dens dimensjoner (bredde, høyde, osv.). Dette er nyttig for å lage responsive layouter, dynamisk størrelsesjustering og tilpassede animasjoner. Du kan for eksempel trenge å måle høyden på et dynamisk innholdsområde for å justere layouten til andre elementer på siden.

3. Integrasjon med tredjepartsbiblioteker

Mange tredjepartsbiblioteker krever direkte tilgang til DOM-noder for initialisering eller konfigurasjon. forwardRef lar deg sømløst integrere disse bibliotekene med dine React-komponenter. Tenk deg å bruke et grafbibliotek som krever et DOM-element som mål for å rendere grafen. forwardRef gjør det mulig for deg å gi det DOM-elementet til biblioteket.

4. Lage tilgjengelige komponenter

Tilgjengelighet krever ofte direkte manipulasjon av DOM-attributter eller fokusstyring. forwardRef kan brukes til å lage tilgjengelige komponenter som overholder tilgjengelighetsstandarder. For eksempel kan du trenge å sette aria-describedby-attributtet på et input-felt for å knytte det til en feilmelding. Dette krever direkte tilgang til input-feltets DOM-node.

5. Høyere-ordens komponenter (HOCs)

Når man lager HOCs, er det viktig å sikre at refs blir korrekt videresendt til den innpakkede komponenten. forwardRef hjelper deg med å oppnå dette. La oss si du har en HOC som legger til styling på en komponent. Ved å bruke forwardRef sikrer du at eventuelle refs som sendes til den stylede komponenten, blir videresendt til den underliggende komponenten.

Beste praksis for bruk av forwardRef

For å sikre at du bruker forwardRef effektivt, bør du vurdere disse beste praksisene:

1. Bruk displayName for feilsøking

Sett alltid displayName-egenskapen på dine forwardRef-komponenter. Dette gjør det enklere å identifisere dem i React DevTools. For eksempel:

CustomInput.displayName = "CustomInput";

2. Vær bevisst på ytelse

Selv om forwardRef er et kraftig verktøy, kan det potensielt påvirke ytelsen hvis det brukes overdrevent. Unngå unødvendig DOM-manipulasjon og optimaliser render-logikken din. Profiler applikasjonen din for å identifisere eventuelle ytelsesflaskehalser relatert til videresending av ref.

3. Bruk refs med omhu

Ikke bruk refs som en erstatning for Reacts dataflyt. Refs bør brukes sparsomt og kun når det er nødvendig for DOM-manipulasjon eller integrasjon med tredjepartsbiblioteker. Stol på props og state for å håndtere komponentdata og -atferd.

4. Dokumenter komponentene dine

Dokumenter tydelig når og hvorfor du bruker forwardRef i komponentene dine. Dette hjelper andre utviklere med å forstå koden din og bruke komponentene dine riktig. Inkluder eksempler på hvordan du bruker komponenten og formålet med den videresendte ref-en.

5. Vurder alternativer

Før du bruker forwardRef, bør du vurdere om det finnes alternative løsninger som kan være mer passende. For eksempel kan du kanskje oppnå ønsket atferd ved å bruke props og state i stedet for å manipulere DOM-en direkte. Utforsk andre alternativer før du tyr til forwardRef.

Alternativer til forwardRef

Selv om forwardRef ofte er den beste løsningen for å videresende refs, finnes det alternative tilnærminger du kan vurdere i visse situasjoner:

1. Callback Refs

Callback refs gir en mer fleksibel måte å få tilgang til DOM-noder på. I stedet for å sende en ref-prop, sender du en funksjon som mottar DOM-noden som et argument. Dette lar deg utføre tilpasset logikk når DOM-noden festes eller fjernes. Imidlertid kan callback refs være mer ordrike og mindre lesbare enn forwardRef.

const MyComponent = () => {
  let inputElement = null;

  const setInputElement = (element) => {
    inputElement = element;
  };

  useEffect(() => {
    if (inputElement) {
      inputElement.focus();
    }
  }, []);

  return <input type="text" ref={setInputElement} />;
};

2. Komposisjon

I noen tilfeller kan du oppnå ønsket atferd ved å komponere komponenter i stedet for å bruke forwardRef. Dette innebærer å bryte ned en kompleks komponent i mindre, mer håndterbare komponenter og sende data og atferd mellom dem ved hjelp av props. Komposisjon kan føre til mer vedlikeholdbar og testbar kode, men det er kanskje ikke egnet for alle scenarioer.

3. Render Props

Render props lar deg dele kode mellom React-komponenter ved å bruke en prop hvis verdi er en funksjon. Du kan bruke render props for å eksponere DOM-noder eller komponentinstanser til foreldrekomponenten. Imidlertid kan render props gjøre koden din mer kompleks og vanskeligere å lese, spesielt når du håndterer flere render props.

Vanlige feil å unngå

Når du jobber med forwardRef, er det viktig å unngå disse vanlige feilene:

1. Glemme å sette displayName

Som nevnt tidligere, kan det å glemme å sette displayName-egenskapen gjøre feilsøking vanskelig. Sett alltid displayName for dine forwardRef-komponenter.

2. Overdreven bruk av refs

Motstå fristelsen til å bruke refs til alt. Refs bør brukes sparsomt og kun når det er nødvendig for DOM-manipulasjon eller integrasjon med tredjepartsbiblioteker. Stol på props og state for å håndtere komponentdata og -atferd.

3. Manipulere DOM-en direkte uten god grunn

Direkte DOM-manipulasjon kan gjøre koden din vanskeligere å vedlikeholde og teste. Manipuler kun DOM-en når det er absolutt nødvendig og unngå unødvendige DOM-oppdateringer.

4. Ikke håndtere null-refs

Sjekk alltid om ref-en er null før du får tilgang til den underliggende DOM-noden eller komponentinstansen. Dette forhindrer feil når komponenten ennå ikke er montert eller har blitt avmontert.

if (inputRef.current) {
  inputRef.current.focus();
}

5. Skape sirkulære avhengigheter

Vær forsiktig når du bruker forwardRef i kombinasjon med andre teknikker som HOCs eller render props. Unngå å skape sirkulære avhengigheter mellom komponenter, da dette kan føre til ytelsesproblemer eller uventet atferd.

Eksempler fra hele verden

Prinsippene for React og forwardRef er universelle, men tenk på hvordan utviklere fra forskjellige regioner kan tilpasse bruken:

• Lokalisering og internasjonalisering (i18n): Utviklere som bygger flerspråklige applikasjoner i Europa eller Asia, kan bruke forwardRef for å måle størrelsen på lokaliserte tekstelementer for å dynamisk justere layouter for forskjellige språk, og slik sikre at tekst ikke flyter utenfor containere. For eksempel har tyske ord en tendens til å være lengre enn engelske ord, noe som krever justeringer.
• Høyre-til-venstre (RTL) layouter: I Midtøsten og deler av Asia må applikasjoner ofte støtte RTL-layouter. forwardRef kan brukes til å programmatisk justere posisjoneringen av elementer basert på gjeldende layout-retning.
• Tilgjengelighet for ulike brukere: Globalt er tilgjengelighet en voksende bekymring. Utviklere kan bruke forwardRef for å forbedre tilgjengeligheten for brukere med nedsatt funksjonsevne, for eksempel ved å programmatisk fokusere elementer for skjermlesere eller justere tabulatorrekkefølgen i skjemafelt.
• Integrasjon med regionspesifikke API-er: Utviklere som integrerer med lokale API-er (f.eks. betalingsløsninger, karttjenester) kan bruke forwardRef for å få tilgang til DOM-elementer som kreves av disse API-ene, og dermed sikre kompatibilitet og sømløs integrasjon.

Konklusjon

React.forwardRef er et kraftig verktøy for å lage gjenbrukbare og sammensettbare React-komponenter. Ved å la foreldrekomponenter få tilgang til DOM-nodene eller komponentinstansene til barna sine, muliggjør forwardRef et bredt spekter av bruksområder, fra DOM-manipulasjon til integrasjon med tredjepartsbiblioteker. Ved å følge beste praksis som er beskrevet i denne guiden, kan du utnytte forwardRef effektivt og unngå vanlige feil. Husk å bruke refs med omhu, dokumentere komponentene dine tydelig, og vurdere alternative løsninger når det er hensiktsmessig. Med en solid forståelse av forwardRef kan du bygge mer robuste, fleksible og vedlikeholdbare React-applikasjoner.