Bemästra React createRef: En Omfattande Guide för Modern Utveckling

I den dynamiska världen av frontend-utveckling utmärker sig React som ett kraftfullt och mångsidigt JavaScript-bibliotek för att bygga användargränssnitt. En av de nyckelfunktioner som låter React-utvecklare interagera direkt med Document Object Model (DOM) och hantera komponentbeteende är createRef API:et. Denna guide fördjupar sig i detaljerna kring createRef och ger en omfattande förståelse för dess användning, fördelar och bästa praxis för utvecklare världen över.

Förståelse för React Refs

Innan vi dyker in i createRef är det viktigt att förstå konceptet med refs i React. En ref ger ett sätt att komma åt DOM-noder eller React-element som skapats i render-metoden. Denna åtkomst låter dig utföra operationer som att fokusera ett inmatningsfält, utlösa animationer eller mäta storleken på ett element.

Till skillnad från traditionell JavaScript DOM-manipulation erbjuder refs i React ett kontrollerat och effektivt sätt att interagera med DOM. Reacts virtuella DOM abstraherar bort många av komplexiteterna med direkt DOM-manipulation, men refs erbjuder en brygga när direkt åtkomst är nödvändig.

Introduktion till createRef

createRef är en funktion som tillhandahålls av React och som skapar ett ref-objekt. Detta ref-objekt har en current-egenskap som håller DOM-noden eller React-komponentinstansen som ref:en är kopplad till. createRef API:et introducerades som en del av React 16.3 och är det rekommenderade sättet att skapa refs i klasskomponenter. För funktionella komponenter erbjuder useRef (en React Hook) liknande funktionalitet.

Skapa ett Ref-objekt

För att skapa ett ref-objekt, anropa helt enkelt funktionen createRef():

            import React from 'react';

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

 render() {
 return (
 
 );
 }
}

            

              
                Copy
              
            
          

I det här exemplet är this.myRef ett ref-objekt som tilldelas ref-attributet för input-elementet. current-egenskapen för this.myRef kommer att hålla en referens till input-elementet efter att komponenten har monterats.

Åtkomst till DOM-noden

När komponenten är monterad kan du komma åt DOM-noden via current-egenskapen för 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 detta exempel använder metoden focusInput this.myRef.current för att komma åt input-elementet och anropa dess focus()-metod. Detta kommer automatiskt att fokusera inmatningsfältet när komponenten är monterad.

Användningsfall för createRef

createRef är värdefullt i olika scenarier där direkt DOM-manipulation eller åtkomst till komponentinstanser krävs. Här är några vanliga användningsfall:

• Fokusera på textinmatningsfält: Som demonstrerats i föregående exempel används createRef ofta för att programmatiskt fokusera textinmatningsfält. Detta är användbart för att förbättra användarupplevelsen genom att automatiskt fokusera det första inmatningsfältet i ett formulär, eller fokusera ett inmatningsfält efter en specifik åtgärd.
• Hantera mediauppspelning: Refs kan användas för att styra mediaelement som <video> eller <audio>. Du kan använda refs för att spela upp, pausa eller justera volymen på mediaelement. Till exempel:

              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ösa animationer: Refs kan användas för att komma åt DOM-element och utlösa animationer med JavaScript eller CSS. Detta låter dig skapa komplexa och interaktiva animationer som svarar på användaråtgärder.

              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 (
   
  
   
  
   Animera
   
   );
   }
  }
  
              
  
                
                  Copy
                
              
            

  I det här exemplet kommer ett klick på knappen att lägga till animate-klassen till box-elementet, vilket utlöser en CSS-animation.

• Mäta elementstorlek och position: Refs är användbara för att erhålla storlek och position för DOM-element. Denna information kan användas för layoutberäkningar, dynamisk styling eller för att skapa interaktiva element.

              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 (
   
  
   
  
   
  Bredd: {this.state.width}px, Höjd: {this.state.height}px
   
   );
   }
  }
  
              
  
                
                  Copy
                
              
            

  Denna komponent rapporterar bredden och höjden på div-elementet efter att det har monterats.

• Integrera med tredjepartsbibliotek: Refs används ofta för att integrera React-komponenter med tredjepartsbibliotek som kräver direkt DOM-åtkomst. Du kan till exempel använda en ref för att komma åt ett DOM-element och initiera ett 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(); // Initiera jQuery-plugin
   }
  
   render() {
   return 
  ;
   }
  }
  
              
  
                
                  Copy
                
              
            

createRef kontra Callback Refs

Innan introduktionen av createRef var callback refs ett vanligt sätt att komma åt DOM-noder i React. Även om callback refs fortfarande är giltiga, erbjuder createRef ett mer rakt på sak och mindre ordrikt tillvägagångssätt, särskilt i klasskomponenter.

En callback ref är en funktion som React anropar med DOM-noden eller komponentinstansen som ett argument. Du tilldelar denna funktion till ref-attributet för ett 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
              
            
          

Även om detta tillvägagångssätt fungerar kan det vara mer komplicerat att hantera, särskilt när man arbetar med flera refs. createRef förenklar denna process genom att tillhandahålla ett dedikerat ref-objekt.

Viktiga skillnader:

• Läsbarhet: createRef anses generellt vara mer läsbart och lättare att förstå.
• Konsekvens: createRef ger ett konsekvent sätt att skapa och komma åt refs.
• Prestanda: I vissa fall kan callback refs orsaka onödiga omrenderingar eftersom callback-funktionen är en ny funktion vid varje render. createRef undviker detta problem.

Bästa praxis för att använda createRef

För att säkerställa optimal prestanda och underhållbarhet, följ dessa bästa praxis när du använder createRef:

• Använd createRef i klasskomponenter: createRef är designat för användning i klasskomponenter. För funktionella komponenter, använd useRef-hooken.
• Undvik överanvändning av refs: Refs bör användas sparsamt. Överanvändning av refs kan leda till kod som är svår att underhålla och resonera kring. Föredra deklarativa tillvägagångssätt när det är möjligt.
• Nullkontroller: Kontrollera alltid om current-egenskapen för ref:en är null innan du använder den, särskilt i livscykelmetoden componentDidMount. DOM-noden kanske inte är tillgänglig omedelbart efter att komponenten har monterats.

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

• Undvik att modifiera DOM direkt: Även om refs ger åtkomst till DOM, undvik att modifiera DOM direkt om det inte är absolut nödvändigt. Reacts virtuella DOM erbjuder ett effektivt sätt att uppdatera UI:t, och direkt DOM-manipulation kan störa Reacts renderingsprocess.
• Städa upp refs vid behov: I vissa fall kan du behöva städa upp refs när en komponent avmonteras. Detta är särskilt viktigt när man hanterar tredjepartsbibliotek som kan hålla referenser till DOM-element.

createRef i funktionella komponenter med Hooks

Medan createRef främst används i klasskomponenter, kan funktionella komponenter uppnå liknande funktionalitet med hjälp av useRef-hooken. useRef returnerar ett muterbart ref-objekt vars .current-egenskap initieras med det angivna argumentet (initialValue). Det returnerade objektet kommer att bestå under hela komponentens livstid.

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

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

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

 return ;
}

            

              
                Copy
              
            
          

I detta exempel skapar useRef(null) ett ref-objekt som tilldelas variabeln inputRef. useEffect-hooken används för att fokusera inmatningsfältet efter att komponenten har renderats. Den tomma beroendearrayen [] säkerställer att effekten endast körs en gång, efter den initiala renderingen.

Avancerade användningsfall och överväganden

Utöver de grundläggande användningsfallen kan createRef användas i mer avancerade scenarier:

• Vidarebefordra Refs: React tillhandahåller en mekanism som kallas React.forwardRef som låter dig skicka en ref genom en komponent till ett av dess barn. Detta är användbart när du behöver komma åt en DOM-nod inom en barnkomponent från en förälderkomponent.

              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 det här exemplet använder komponenten FancyInput forwardRef för att skicka ref:en till det underliggande input-elementet. ParentComponent kan sedan komma åt och manipulera input-elementet via ref:en.

• Higher-Order Components (HOCs): När du använder Higher-Order Components (HOCs) kan du behöva hantera refs noggrant. Om HOC:n omsluter en komponent som använder refs måste du se till att refs vidarebefordras 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 använder server-side rendering, var medveten om att refs kanske inte är tillgängliga under den initiala renderingen på servern. Detta beror på att DOM inte är tillgängligt på servern. Du bör endast komma åt refs efter att komponenten har monterats på klienten.

Sammanfattning

createRef är ett kraftfullt verktyg för att komma åt DOM-noder och komponentinstanser i React. Genom att förstå dess användning, fördelar och bästa praxis kan du effektivt utnyttja refs för att bygga mer interaktiva och dynamiska användargränssnitt. Oavsett om du fokuserar textinmatningsfält, hanterar mediauppspelning eller integrerar med tredjepartsbibliotek, erbjuder createRef ett kontrollerat och effektivt sätt att interagera med DOM.

Kom ihåg att använda createRef med omdöme och föredra deklarativa tillvägagångssätt när det är möjligt. Genom att följa riktlinjerna i denna guide kan du säkerställa att dina React-applikationer är prestandaoptimerade, underhållbara och skalbara.

När du fortsätter din resa med React kommer bemästrandet av createRef utan tvekan att visa sig vara en värdefull färdighet i din utvecklingsverktygslåda. Fortsätt att experimentera, utforska olika användningsfall och finslipa din förståelse för denna väsentliga React-funktion.