Mestring af React createRef: En Omfattende Guide til Moderne Udvikling

I den dynamiske verden af front-end-udvikling skiller React sig ud som et kraftfuldt og alsidigt JavaScript-bibliotek til at bygge brugergrænseflader. En af de centrale funktioner, der giver React-udviklere mulighed for at interagere direkte med Document Object Model (DOM) og styre komponentadfærd, er createRef API'et. Denne guide dykker ned i finesserne ved createRef og giver en omfattende forståelse af dets anvendelse, fordele og bedste praksis for udviklere verden over.

Forståelse af React Refs

Før vi dykker ned i createRef, er det vigtigt at forstå konceptet med refs i React. En ref giver en måde at få adgang til DOM-noder eller React-elementer, der er oprettet i render-metoden. Denne adgang giver dig mulighed for at udføre operationer såsom at fokusere et inputfelt, udløse animationer eller måle størrelsen på et element.

I modsætning til traditionel JavaScript DOM-manipulation giver refs i React en kontrolleret og effektiv måde at interagere med DOM på. Reacts virtuelle DOM abstraherer mange af kompleksiteterne ved direkte DOM-manipulation væk, men refs tilbyder en bro, når direkte adgang er nødvendig.

Introduktion til createRef

createRef er en funktion leveret af React, der opretter et ref-objekt. Dette ref-objekt har en current-egenskab, der indeholder den DOM-node eller React-komponentinstans, som ref'en er tilknyttet. createRef API'et blev introduceret som en del af React 16.3 og er den anbefalede måde at oprette refs på i klassekomponenter. For funktionelle komponenter giver useRef (en React Hook) lignende funktionalitet.

Oprettelse af et Ref-objekt

For at oprette et ref-objekt skal du blot kalde createRef()-funktionen:

            import React from 'react';

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

 render() {
 return (
 
 );
 }
}

            

              
                Copy
              
            
          

I dette eksempel er this.myRef et ref-objekt, der er tildelt ref-attributten for input-elementet. current-egenskaben for this.myRef vil indeholde en reference til input-elementet, efter at komponenten er monteret.

Adgang til DOM-noden

Når komponenten er monteret, kan du få adgang til DOM-noden via current-egenskaben for 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 eksempel bruger focusInput-metoden this.myRef.current til at få adgang til input-elementet og kalde dets focus()-metode. Dette vil automatisk fokusere på inputfeltet, når komponenten monteres.

Anvendelsestilfælde for createRef

createRef er værdifuld i forskellige scenarier, hvor direkte DOM-manipulation eller adgang til komponentinstanser er påkrævet. Her er nogle almindelige anvendelsestilfælde:

• Fokus på tekstinput: Som vist i det foregående eksempel bruges createRef almindeligvis til at fokusere tekstinput programmatisk. Dette er nyttigt for at forbedre brugeroplevelsen ved automatisk at fokusere på det første inputfelt i en formular eller fokusere på et inputfelt efter en bestemt handling.
• Håndtering af medieafspilning: Refs kan bruges til at styre medieelementer som <video> eller <audio>. Du kan bruge refs til at afspille, pause eller justere lydstyrken 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
                
              
            

• Udløsning af animationer: Refs kan bruges til at få adgang til DOM-elementer og udløse animationer ved hjælp af JavaScript eller CSS. Dette giver dig mulighed for at skabe komplekse og interaktive animationer, der reagerer på brugerhandlinger.

              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 (
   
  
   
  
   Animér
   
   );
   }
  }
  
              
  
                
                  Copy
                
              
            

  I dette eksempel vil et klik på knappen tilføje animate-klassen til bokselementet, hvilket udløser en CSS-animation.

• Måling af elementstørrelse og -position: Refs er nyttige til at hente størrelsen og positionen af DOM-elementer. Disse oplysninger kan bruges til layoutberegninger, dynamisk styling eller oprettelse af 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øjde: {this.state.height}px
   
   );
   }
  }
  
              
  
                
                  Copy
                
              
            

  Denne komponent rapporterer bredden og højden af div'en, efter at den er blevet monteret.

• Integration med tredjepartsbiblioteker: Refs bruges ofte til at integrere React-komponenter med tredjepartsbiblioteker, der kræver direkte DOM-adgang. For eksempel kan du bruge en ref til at få adgang til et DOM-element og initialisere et 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 introduktionen af createRef var callback refs en almindelig måde at få adgang til DOM-noder i React. Mens callback refs stadig er gyldige, tilbyder createRef en mere ligetil og mindre omstændelig tilgang, især i klassekomponenter.

En callback ref er en funktion, som React kalder med DOM-noden eller komponentinstansen som argument. Du tildeler denne funktion til ref-attributten for 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
              
            
          

Selvom denne tilgang virker, kan den være mere kompleks at administrere, især når man håndterer flere refs. createRef forenkler denne proces ved at levere et dedikeret ref-objekt.

Væsentlige forskelle:

• Læsbarhed: createRef anses generelt for at være mere læsbar og lettere at forstå.
• Konsistens: createRef giver en ensartet måde at oprette og få adgang til refs på.
• Ydeevne: I nogle tilfælde kan callback refs forårsage unødvendige re-renders, fordi callback-funktionen er en ny funktion ved hver render. createRef undgår dette problem.

Bedste praksis for brug af createRef

For at sikre optimal ydeevne og vedligeholdelighed, følg disse bedste praksis, når du bruger createRef:

• Brug createRef i klassekomponenter: createRef er designet til brug i klassekomponenter. For funktionelle komponenter, brug useRef Hook.
• Undgå overdreven brug af refs: Refs bør bruges sparsomt. Overdreven brug af refs kan føre til kode, der er svær at vedligeholde og ræsonnere om. Foretræk deklarative tilgange, når det er muligt.
• Nul-tjek: Tjek altid, om current-egenskaben for ref'en er null, før du tilgår den, især i componentDidMount-livscyklusmetoden. DOM-noden er muligvis ikke tilgængelig umiddelbart efter, at komponenten er monteret.

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

• Undgå at ændre DOM direkte: Selvom refs giver adgang til DOM, bør du undgå at ændre DOM direkte, medmindre det er absolut nødvendigt. Reacts virtuelle DOM giver en effektiv måde at opdatere UI'en på, og direkte DOM-manipulation kan forstyrre Reacts renderingsproces.
• Ryd op i refs, når det er nødvendigt: I nogle tilfælde kan du have brug for at rydde op i refs, når en komponent afmonteres. Dette er især vigtigt, når man arbejder med tredjepartsbiblioteker, der kan have referencer til DOM-elementer.

createRef i Funktionelle Komponenter med Hooks

Mens createRef primært bruges i klassekomponenter, kan funktionelle komponenter opnå lignende funktionalitet ved hjælp af useRef Hook. useRef returnerer et muterbart ref-objekt, hvis .current-egenskab initialiseres med det overførte argument (initialValue). Det returnerede objekt vil bestå i 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 eksempel opretter useRef(null) et ref-objekt, der tildeles inputRef-variablen. useEffect Hook bruges til at fokusere inputfeltet, efter at komponenten er renderet. Det tomme afhængighedsarray [] sikrer, at effekten kun kører én gang, efter den indledende render.

Avancerede Anvendelsestilfælde og Overvejelser

Ud over de grundlæggende anvendelsestilfælde kan createRef anvendes i mere avancerede scenarier:

• Videresendelse af Refs (Forwarding Refs): React tilbyder en mekanisme kaldet React.forwardRef, der giver dig mulighed for at sende en ref gennem en komponent til et af dens børn. Dette er nyttigt, når du har brug for adgang til en DOM-node i en børnekomponent fra en forældrekomponent.

              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 eksempel bruger FancyInput-komponenten forwardRef til at videresende ref'en til det underliggende input-element. ParentComponent kan derefter få adgang til og manipulere input-elementet via ref'en.

• Higher-Order Components (HOCs): Når du bruger Higher-Order Components (HOCs), kan du have brug for at håndtere refs omhyggeligt. Hvis HOC'en ombryder en komponent, der bruger refs, skal du sikre, at refs videresendes 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 
  My Component
  ;
   }
  }
  
  const EnhancedComponent = withRef(MyComponent);
  
              
  
                
                  Copy
                
              
            

• Server-Side Rendering (SSR): Når du bruger server-side rendering, skal du være opmærksom på, at refs muligvis ikke er tilgængelige under den indledende render på serveren. Dette skyldes, at DOM ikke er tilgængeligt på serveren. Du bør kun tilgå refs, efter at komponenten er blevet monteret på klienten.

Konklusion

createRef er et kraftfuldt værktøj til at få adgang til DOM-noder og komponentinstanser i React. Ved at forstå dets anvendelse, fordele og bedste praksis kan du effektivt udnytte refs til at bygge mere interaktive og dynamiske brugergrænseflader. Uanset om du fokuserer på tekstinput, administrerer medieafspilning eller integrerer med tredjepartsbiblioteker, giver createRef en kontrolleret og effektiv måde at interagere med DOM på.

Husk at bruge createRef med omtanke og favorisere deklarative tilgange, når det er muligt. Ved at følge retningslinjerne i denne guide kan du sikre, at dine React-applikationer er effektive, vedligeholdelige og skalerbare.

Mens du fortsætter din rejse med React, vil mestring af createRef utvivlsomt vise sig at være en værdifuld færdighed i din udviklingsværktøjskasse. Fortsæt med at eksperimentere, udforske forskellige anvendelsestilfælde og finpudse din forståelse af denne essentielle React-funktion.