Mestre React createRef: En Omfattende Guide for Moderne Utvikling

I den dynamiske verdenen av front-end-utvikling fremstår React som et kraftig og allsidig JavaScript-bibliotek for å bygge brukergrensesnitt. En av nøkkelfunksjonene som lar React-utviklere samhandle direkte med Document Object Model (DOM) og håndtere komponentatferd, er createRef API-et. Denne guiden dykker ned i detaljene rundt createRef, og gir en omfattende forståelse av bruken, fordelene og beste praksis for utviklere verden over.

Forståelse av React Refs

Før vi dykker ned i createRef, er det essensielt å forstå konseptet med refs i React. En ref gir en måte å få tilgang til DOM-noder eller React-elementer som er opprettet i render-metoden. Denne tilgangen lar deg utføre operasjoner som å fokusere et input-felt, utløse animasjoner eller måle størrelsen på et element.

I motsetning til tradisjonell JavaScript DOM-manipulering, gir refs i React en kontrollert og effektiv måte å samhandle med DOM på. Reacts virtuelle DOM abstraherer bort mange av kompleksitetene ved direkte DOM-manipulering, men refs tilbyr en bro når direkte tilgang er nødvendig.

Introduksjon til createRef

createRef er en funksjon levert av React som oppretter et ref-objekt. Dette ref-objektet har en current-egenskap som holder DOM-noden eller React-komponentinstansen som ref-en er knyttet til. createRef API-et ble introdusert som en del av React 16.3 og er den anbefalte måten å opprette refs i klassekomponenter. For funksjonelle komponenter gir useRef (en React Hook) lignende funksjonalitet.

Opprette et Ref-objekt

For å opprette et ref-objekt, kaller du enkelt og greit createRef()-funksjonen:

            import React from 'react';

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

 render() {
 return (
 
 );
 }
}

            

              
                Copy
              
            
          

I dette eksempelet er this.myRef et ref-objekt som er tildelt ref-attributtet til input-elementet. current-egenskapen til this.myRef vil holde en referanse til input-elementet etter at komponenten er montert.

Tilgang til DOM-noden

Når komponenten er montert, kan du få tilgang til DOM-noden gjennom current-egenskapen til ref-objektet:

            import React from 'react';

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

 componentDidMount() {
 this.focusInput();
 }

 focusInput() {
 this.myRef.current.focus();
 }

 render() {
 return (
 
 );
 }
}

            

              
                Copy
              
            
          

I dette eksempelet bruker focusInput-metoden this.myRef.current for å få tilgang til input-elementet og kalle dessen focus()-metode. Dette vil automatisk fokusere på input-feltet når komponenten monteres.

Bruksområder for createRef

createRef er verdifull i ulike scenarier der direkte DOM-manipulering eller tilgang til komponentinstanser er påkrevd. Her er noen vanlige bruksområder:

• Fokusering på Tekstinput: Som vist i det forrige eksempelet, brukes createRef ofte for å programmatisk fokusere på tekstinput. Dette er nyttig for å forbedre brukeropplevelsen ved å automatisk fokusere på det første input-feltet i et skjema, eller fokusere på et input-felt etter en spesifikk handling.
• Håndtering av Medieavspilling: Refs kan brukes til å kontrollere medieelementer som <video> eller <audio>. Du kan bruke refs til å spille av, pause eller justere volumet på medieelementer. For eksempel:

              import React from 'react';
  
  class VideoPlayer extends React.Component {
   constructor(props) {
   super(props);
   this.videoRef = React.createRef();
   this.playVideo = this.playVideo.bind(this);
   }
  
   playVideo() {
   this.videoRef.current.play();
   }
  
   render() {
   return (
   
  
   
   );
   }
  }
  
              
  
                
                  Copy
                
              
            

• Utløsing av Animasjoner: Refs kan brukes for å få tilgang til DOM-elementer og utløse animasjoner ved hjelp av JavaScript eller CSS. Dette lar deg lage komplekse og interaktive animasjoner som responderer på brukerhandlinger.

              import React from 'react';
  
  class AnimatedBox extends React.Component {
   constructor(props) {
   super(props);
   this.boxRef = React.createRef();
   this.animate = this.animate.bind(this);
   }
  
   animate() {
   const box = this.boxRef.current;
   box.classList.add('animate');
   }
  
   render() {
   return (
   
  
   
  
   Animer
   
   );
   }
  }
  
              
  
                
                  Copy
                
              
            

  I dette eksempelet vil et klikk på knappen legge til animate-klassen i bokselementet, noe som utløser en CSS-animasjon.

• Måling av Elementstørrelse og Posisjon: Refs er nyttige for å hente størrelsen og posisjonen til DOM-elementer. Denne informasjonen kan brukes til layout-beregninger, dynamisk styling eller for å lage interaktive elementer.

              import React from 'react';
  
  class SizeReporter extends React.Component {
   constructor(props) {
   super(props);
   this.elementRef = React.createRef();
   this.state = { width: 0, height: 0 };
   this.reportSize = this.reportSize.bind(this);
   }
  
   componentDidMount() {
   this.reportSize();
   }
  
   reportSize() {
   const element = this.elementRef.current;
   this.setState({ width: element.offsetWidth, height: element.offsetHeight });
   }
  
   render() {
   return (
   
  
   
  
   
  Bredde: {this.state.width}px, Høyde: {this.state.height}px
   
   );
   }
  }
  
              
  
                
                  Copy
                
              
            

  Denne komponenten rapporterer bredden og høyden på div-elementet etter at det er montert.

• Integrering med Tredjepartsbiblioteker: Refs brukes ofte for å integrere React-komponenter med tredjepartsbiblioteker som krever direkte DOM-tilgang. For eksempel kan du bruke en ref for å få tilgang til et DOM-element og initialisere en jQuery-plugin på det.

              import React from 'react';
  import $ from 'jquery';
  
  class MyComponent extends React.Component {
   constructor(props) {
   super(props);
   this.elementRef = React.createRef();
   }
  
   componentDidMount() {
   $(this.elementRef.current).plugin(); // Initialiser jQuery-plugin
   }
  
   render() {
   return 
  ;
   }
  }
  
              
  
                
                  Copy
                
              
            

createRef vs. Callback Refs

Før introduksjonen av createRef, var callback refs en vanlig måte å få tilgang til DOM-noder i React. Selv om callback refs fortsatt er gyldige, tilbyr createRef en mer rett frem og mindre ordrik tilnærming, spesielt i klassekomponenter.

En callback ref er en funksjon som React kaller med DOM-noden eller komponentinstansen som et argument. Du tildeler denne funksjonen til ref-attributtet til et element:

            class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.myRef = null;
 this.setRef = element => {
 this.myRef = element;
 };
 }

 componentDidMount() {
 if (this.myRef) {
 this.myRef.focus();
 }
 }

 render() {
 return ;
 }
}

            

              
                Copy
              
            
          

Selv om denne tilnærmingen fungerer, kan den være mer kompleks å administrere, spesielt når man håndterer flere refs. createRef forenkler denne prosessen ved å tilby et dedikert ref-objekt.

Nøkkelforskjeller:

• Lesbarhet: createRef anses generelt for å være mer lesbar og lettere å forstå.
• Konsistens: createRef gir en konsekvent måte å opprette og få tilgang til refs.
• Ytelse: I noen tilfeller kan callback refs forårsake unødvendige re-rendere fordi callback-funksjonen er en ny funksjon ved hver render. createRef unngår dette problemet.

Beste Praksis for Bruk av createRef

For å sikre optimal ytelse og vedlikeholdbarhet, følg disse beste praksisene når du bruker createRef:

• Bruk createRef i Klassekomponenter: createRef er designet for bruk i klassekomponenter. For funksjonelle komponenter, bruk useRef Hook.
• Unngå Overforbruk av Refs: Refs bør brukes med måte. Overforbruk av refs kan føre til kode som er vanskelig å vedlikeholde og resonnere om. Foretrekk deklarative tilnærminger når det er mulig.
• Null-sjekker: Sjekk alltid om current-egenskapen til ref-en er null før du får tilgang til den, spesielt i componentDidMount-livssyklusmetoden. DOM-noden er kanskje ikke tilgjengelig umiddelbart etter at komponenten er montert.

              componentDidMount() {
   if (this.myRef.current) {
   this.myRef.current.focus();
   }
  }
  
              
  
                
                  Copy
                
              
            

• Unngå å Modifisere DOM Direkte: Selv om refs gir tilgang til DOM, bør du unngå å modifisere DOM direkte med mindre det er absolutt nødvendig. Reacts virtuelle DOM gir en effektiv måte å oppdatere UI-et på, og direkte DOM-manipulering kan forstyrre Reacts render-prosess.
• Rydd Opp i Refs ved Behov: I noen tilfeller kan det være nødvendig å rydde opp i refs når en komponent avmonteres. Dette er spesielt viktig når man håndterer tredjepartsbiblioteker som kan holde på referanser til DOM-elementer.

createRef i Funksjonelle Komponenter med Hooks

Selv om createRef primært brukes i klassekomponenter, kan funksjonelle komponenter oppnå lignende funksjonalitet ved hjelp av useRef Hook. useRef returnerer et muterbart ref-objekt hvis .current-egenskap initialiseres med det gitte argumentet (initialValue). Det returnerte objektet vil bestå gjennom hele komponentens levetid.

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

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

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

 return ;
}

            

              
                Copy
              
            
          

I dette eksempelet oppretter useRef(null) et ref-objekt som tildeles inputRef-variabelen. useEffect Hook brukes til å fokusere på input-feltet etter at komponenten har rendret. Den tomme avhengighetslisten [] sikrer at effekten kun kjøres én gang, etter den første renderen.

Avanserte Bruksområder og Vurderinger

Utover de grunnleggende bruksområdene kan createRef benyttes i mer avanserte scenarier:

• Videresending av Refs (Forwarding Refs): React tilbyr en mekanisme kalt React.forwardRef som lar deg sende en ref gjennom en komponent til et av dens barn. Dette er nyttig når du trenger tilgang til en DOM-node i en barnekomponent fra en forelderkomponent.

              import React, { forwardRef } from 'react';
  
  const FancyInput = forwardRef((props, ref) => (
   
  ));
  
  class ParentComponent extends React.Component {
   constructor(props) {
   super(props);
   this.inputRef = React.createRef();
   }
  
   componentDidMount() {
   this.inputRef.current.focus();
   }
  
   render() {
   return ;
   }
  }
  
              
  
                
                  Copy
                
              
            

  I dette eksempelet bruker FancyInput-komponenten forwardRef for å videresende ref-en til det underliggende input-elementet. ParentComponent kan deretter få tilgang til og manipulere input-elementet gjennom ref-en.

• Higher-Order Components (HOCs): Når du bruker Higher-Order Components (HOCs), kan det hende du må håndtere refs nøye. Hvis HOC-en omslutter en komponent som bruker refs, må du sørge for at refs blir videresendt korrekt.

              import React, { forwardRef } from 'react';
  
  function withRef(WrappedComponent) {
   const WithRef = forwardRef((props, ref) => {
   return ;
   });
   WithRef.displayName = `withRef(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
   return WithRef;
  }
  
  class MyComponent extends React.Component {
   render() {
   return 
  Min Komponent
  ;
   }
  }
  
  const EnhancedComponent = withRef(MyComponent);
  
              
  
                
                  Copy
                
              
            

• Server-Side Rendering (SSR): Når du bruker server-side rendering, vær oppmerksom på at refs kanskje ikke er tilgjengelige under den første renderen på serveren. Dette er fordi DOM ikke er tilgjengelig på serveren. Du bør kun få tilgang til refs etter at komponenten er montert på klienten.

Konklusjon

createRef er et kraftig verktøy for å få tilgang til DOM-noder og komponentinstanser i React. Ved å forstå bruken, fordelene og beste praksis, kan du effektivt utnytte refs for å bygge mer interaktive og dynamiske brukergrensesnitt. Enten du fokuserer på tekstinput, håndterer medieavspilling eller integrerer med tredjepartsbiblioteker, gir createRef en kontrollert og effektiv måte å samhandle med DOM på.

Husk å bruke createRef med omhu, og foretrekk deklarative tilnærminger når det er mulig. Ved å følge retningslinjene som er beskrevet i denne guiden, kan du sikre at dine React-applikasjoner er ytelsesdyktige, vedlikeholdbare og skalerbare.

Etter hvert som du fortsetter din reise med React, vil mestring av createRef utvilsomt vise seg å være en verdifull ferdighet i ditt utviklerverktøysett. Fortsett å eksperimentere, utforske forskjellige bruksområder og finpusse din forståelse av denne essensielle React-funksjonen.