React Refs: Avmystifisering av useRef vs. createRef

I den dynamiske verdenen av React-utvikling er det avgjørende å effektivt håndtere komponenttilstand og samhandle med Document Object Model (DOM). React Refs gir en mekanisme for å få tilgang til og manipulere DOM-elementer eller React-komponenter direkte. To primære metoder for å opprette Refs er useRef og createRef. Selv om begge tjener formålet med å lage Refs, skiller de seg i implementering og bruksområder. Denne guiden tar sikte på å avmystifisere disse to tilnærmingene, og gir klarhet i når og hvordan man kan utnytte hver av dem effektivt i dine React-prosjekter, spesielt når man utvikler for et globalt publikum.

Forståelse av React Refs

En Ref (forkortelse for referanse) er en React-funksjon som lar deg få direkte tilgang til en DOM-node eller en React-komponent. Dette er spesielt nyttig når du trenger å:

• Manipulere et DOM-element direkte, som å fokusere på et inndatafelt.
• Få tilgang til en barnekomponents metoder eller egenskaper.
• Håndtere verdier som vedvarer på tvers av renderinger uten å forårsake re-renderinger (ligner på instansvariabler i klassekomponenter).

Selv om React oppmuntrer til en deklarativ tilnærming, der brukergrensesnittet styres gjennom tilstand og props, finnes det situasjoner der direkte manipulering er nødvendig. Refs gir en måte å bygge bro mellom Reacts deklarative natur og imperative DOM-operasjoner.

createRef: Tilnærmingen for klassekomponenter

createRef er en metode levert av React. Den brukes primært i klassekomponenter for å lage Refs. Hver gang en klassekomponent instansieres, oppretter createRef et nytt Ref-objekt. Dette sikrer at hver instans av komponenten har sin egen unike Ref.

Syntaks og bruk

For å bruke createRef, erklærer du først en Ref i klassekomponenten din, vanligvis i konstruktøren. Deretter fester du Ref-en til et DOM-element eller en komponent ved hjelp av ref-attributtet.

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

  componentDidMount() {
    // Få tilgang til DOM-elementet etter at komponenten er montert
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

I dette eksemplet er this.myRef opprettet med React.createRef(). Den blir deretter tildelt ref-attributtet til input-elementet. Etter at komponenten er montert (i componentDidMount), kan du få tilgang til den faktiske DOM-noden ved hjelp av this.myRef.current og utføre operasjoner på den (i dette tilfellet, fokusere på input-feltet).

Eksempel: Fokusere på et inndatafelt

La oss se på et scenario der du vil fokusere på et inndatafelt automatisk når en komponent monteres. Dette er et vanlig bruksområde for Refs, spesielt i skjemaer eller interaktive elementer.

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

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

  render() {
    return (
      

        
      
    );
  }
}

I dette eksemplet fokuserer FocusInput på inndatafeltet umiddelbart etter montering. Dette kan forbedre brukeropplevelsen ved å lede brukerens oppmerksomhet til inndataelementet så snart komponenten er rendret.

Viktige betraktninger med createRef

• Kun for klassekomponenter: createRef er designet for bruk i klassekomponenter. Selv om den teknisk sett kan fungere i funksjonelle komponenter, er det ikke den tiltenkte bruken og kan føre til uventet oppførsel.
• Ny Ref for hver instans: Hver instans av en klassekomponent får sin egen createRef. Dette er viktig for å opprettholde isolasjon mellom komponentinstanser.

useRef: Hooken for funksjonelle komponenter

useRef er en Hook som ble introdusert i React 16.8. Den gir en måte å lage muterbare Ref-objekter i funksjonelle komponenter. I motsetning til createRef, returnerer useRef det samme Ref-objektet hver gang komponenten rendres. Dette gjør den ideell for å bevare verdier på tvers av renderinger uten å utløse re-renderinger.

Syntaks og bruk

Å bruke useRef er enkelt. Du kaller useRef-hooken og sender inn en startverdi. Hooken returnerer et objekt med en .current-egenskap, som du deretter kan bruke til å få tilgang til og endre verdien.

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

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

  useEffect(() => {
    // Få tilgang til DOM-elementet etter at komponenten er montert
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

I dette eksemplet oppretter useRef(null) en Ref med en startverdi på null. useEffect-hooken brukes til å få tilgang til DOM-elementet etter at komponenten er montert. myRef.current-egenskapen inneholder referansen til input-elementet, slik at du kan fokusere på det.

Eksempel: Spore tidligere prop-verdier

Et kraftig bruksområde for useRef er å spore den forrige verdien av en prop. Siden endringer i Refs ikke utløser re-renderinger, kan du bruke dem til å lagre verdier du vil bevare på tvers av renderinger uten å påvirke brukergrensesnittet.

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

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

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

  return (
    

      
Nåværende verdi: {value}
      
Forrige verdi: {previousValue.current}
    
  );
}

I dette eksemplet lagrer previousValue.current den forrige verdien av value-propen. useEffect-hooken oppdaterer Ref-en hver gang value-propen endres. Dette lar deg sammenligne nåværende og tidligere verdier, noe som kan være nyttig for å oppdage endringer eller implementere animasjoner.

Viktige betraktninger med useRef

• Kun for funksjonelle komponenter: useRef er en Hook og kan bare brukes i funksjonelle komponenter eller egendefinerte Hooks.
• Vedvarer på tvers av renderinger: useRef-hooken returnerer det samme Ref-objektet ved hver rendering. Dette er nøkkelen til dens evne til å bevare verdier uten å utløse re-renderinger.
• Muterbar .current-egenskap: Du kan direkte endre .current-egenskapen til Ref-objektet.
• Startverdi: Du kan gi en startverdi til useRef. Denne verdien vil bli tildelt .current-egenskapen når komponenten først rendres.
• Ingen re-renderinger: Endring av .current-egenskapen til en Ref forårsaker ikke en re-rendering av komponenten.

useRef vs. createRef: En detaljert sammenligning

Nå som vi har utforsket både useRef og createRef individuelt, la oss sammenligne dem side om side for å fremheve deres viktigste forskjeller og når du bør velge den ene fremfor den andre.

Funksjon	useRef	createRef
Komponenttype	Funksjonelle komponenter	Klassekomponenter
Hook eller metode	Hook	Metode
Ref-instans	Returnerer det samme Ref-objektet ved hver rendering	Oppretter et nytt Ref-objekt for hver instans av komponenten
Bruksområder	Få tilgang til DOM-elementer Bevare verdier på tvers av renderinger uten å utløse re-renderinger Spore tidligere prop-verdier Lagre muterbare verdier som ikke forårsaker re-renderinger	Få tilgang til DOM-elementer Få tilgang til metoder i barnekomponenter

Velge riktig Ref: En beslutningsguide

Her er en enkel guide for å hjelpe deg med å velge mellom useRef og createRef:

• Jobber du med en funksjonell komponent? Bruk useRef.
• Jobber du med en klassekomponent? Bruk createRef.
• Trenger du å bevare en verdi på tvers av renderinger uten å utløse re-renderinger? Bruk useRef.
• Trenger du å spore den forrige verdien av en prop? Bruk useRef.

Utover DOM-manipulering: Avanserte bruksområder for Refs

Selv om tilgang til og manipulering av DOM-elementer er et primært bruksområde for Refs, gir de muligheter utover denne kjernefunksjonaliteten. La oss utforske noen avanserte scenarier der Refs kan være spesielt nyttige.

1. Tilgang til metoder i barnekomponenter

Refs kan brukes til å få tilgang til metoder definert i barnekomponenter. Dette lar en foreldrekomponent utløse handlinger eller hente data fra barna sine direkte. Denne tilnærmingen er spesielt nyttig når du trenger finkornet kontroll over barnekomponenter.

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

  handleClick = () => {
    // Kall en metode på barnekomponenten
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        Utløs handling i barn
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Handling i barnekomponent utløst!');
  };

  render() {
    return 
Dette er en barnekomponent.
;
  }
}

I dette eksemplet bruker ParentComponent en Ref for å få tilgang til ChildComponent og kalle dens doSomething-metode.

2. Håndtere fokus og valg

Refs er uvurderlige for å håndtere fokus og valg i inndatafelt og andre interaktive elementer. Dette er avgjørende for å skape tilgjengelige og brukervennlige grensesnitt.

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

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Velg teksten i inndatafeltet
    }
  }, []);

  return ;
}

Dette eksemplet fokuserer på inndatafeltet og velger teksten så snart komponenten monteres.

3. Animere elementer

Refs kan brukes sammen med animasjonsbiblioteker (som GreenSock eller Framer Motion) for å direkte manipulere DOM og lage komplekse animasjoner. Dette gir finkornet kontroll over animasjonssekvenser.

Eksempel som bruker ren JavaScript for enkelhets skyld:

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

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

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Enkel animasjon: flytt boksen til høyre
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 sekund
          iterations: Infinity, // Gjenta for alltid
          direction: 'alternate', // alternerende
        }
      );
    }
  }, []);

  return 
;
}

Dette eksemplet bruker Web Animations API til å animere en enkel boks, og flytter den frem og tilbake horisontalt.

Beste praksis for bruk av React Refs i globale applikasjoner

Når man utvikler React-applikasjoner for et globalt publikum, er det viktig å vurdere hvordan Refs samhandler med internasjonalisering (i18n) og lokalisering (l10n). Her er noen beste praksiser:

1. Tilgjengelighet (A11y)

Sørg for at din bruk av Refs ikke påvirker tilgjengeligheten negativt. For eksempel, når du programmatisk fokuserer på elementer, vurder brukerens fokusrekkefølge og om fokusendringen er passende for skjermlesere og tastaturbrukere.

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

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

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Fokuser kun hvis knappen ikke allerede er fokusert av brukeren
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return Klikk meg;
}

2. Internasjonaliserte inndatafelt

Når du jobber med inndatafelt, vær oppmerksom på forskjellige inndatametoder og tegnsett som brukes i forskjellige språk. Sørg for at dine Ref-baserte manipulasjoner (f.eks. valg, markørposisjon) fungerer korrekt på tvers av ulike inndatatyper og lokaliteter. Test komponentene dine grundig med forskjellige språk og inndatametoder.

3. Høyre-til-venstre (RTL) layouter

Hvis applikasjonen din støtter RTL-språk (f.eks. arabisk, hebraisk), sørg for at dine DOM-manipulasjoner ved hjelp av Refs tar hensyn til den omvendte layouten. For eksempel, når du animerer elementer, vurder å reversere animasjonsretningen for RTL-språk.

4. Ytelseshensyn

Selv om Refs gir en kraftig måte å samhandle med DOM på, kan overforbruk føre til ytelsesproblemer. Direkte DOM-manipulering omgår Reacts virtuelle DOM og avstemmingsprosess, noe som potensielt kan føre til inkonsistenser og tregere oppdateringer. Bruk Refs med omhu og bare når det er nødvendig.

Konklusjon

React Refs, spesifikt useRef og createRef, er essensielle verktøy for React-utviklere. Å forstå nyansene i hver tilnærming og når man skal anvende dem effektivt er avgjørende for å bygge robuste og ytelsessterke applikasjoner. createRef forblir standarden for å håndtere Refs i klassekomponenter, og sikrer at hver instans har sin unike Ref. useRef, med sin vedvarende natur på tvers av renderinger, er ideell for funksjonelle komponenter, og tilbyr en måte å håndtere DOM-elementer og bevare verdier uten å utløse unødvendige re-renderinger. Ved å utnytte disse verktøyene klokt, kan du forbedre funksjonaliteten og brukeropplevelsen til dine React-applikasjoner, og imøtekomme et globalt publikum med tilgjengelige og ytelsessterke grensesnitt.

Ettersom React fortsetter å utvikle seg, vil mestring av disse grunnleggende konseptene gi deg kraft til å skape innovative og brukervennlige nettopplevelser som overskrider geografiske og kulturelle grenser. Husk å prioritere tilgjengelighet, internasjonalisering og ytelse for å levere virkelig globale applikasjoner.