React Ref Mønstre: Teknikker til DOM-manipulation for Dynamiske UI'er

React, et kraftfuldt JavaScript-bibliotek til at bygge brugergrænseflader, opfordrer ofte til en deklarativ tilgang til UI-udvikling. Dog bliver direkte manipulation af Document Object Model (DOM) undertiden nødvendigt. Det er her, React refs kommer ind i billedet. Refs giver en måde at tilgå DOM-noder eller React-elementer, der er oprettet i render-metoden. Denne omfattende guide udforsker forskellige React ref-mønstre og teknikker til effektivt at manipulere DOM, styre fokus, integrere med tredjepartsbiblioteker og optimere UI-ydelse. Vi vil dykke ned i praktiske eksempler og bedste praksis, der er egnet til et globalt publikum af React-udviklere.

Forståelse af React Refs

I sin kerne er en ref et almindeligt JavaScript-objekt med en current-egenskab. Denne egenskab er muterbar, hvilket giver dig mulighed for at gemme enhver værdi, herunder en DOM-node eller en React-komponentinstans. React tilbyder to primære måder at oprette refs på: React.createRef() (klassekomponenter) og useRef()-hooket (funktionelle komponenter).

React.createRef() (Klassekomponenter)

React.createRef() opretter et ref-objekt, der tildeles en egenskab på en klassekomponents instans. Denne ref vedvarer gennem hele komponentens livscyklus.

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

  componentDidMount() {
    // Tilgå DOM-noden efter komponenten er monteret
    console.log(this.myRef.current); // DOM-node eller null
  }

  render() {
    return 
Hello, world!
;
  }
}

            

              
                Copy
              
            
          

useRef() (Funktionelle komponenter)

useRef()-hooket opretter et muterbart ref-objekt, hvis .current-egenskab initialiseres med det overførte argument (initialValue). Det returnerede ref-objekt vil vedvare i hele komponentens levetid.

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

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

  useEffect(() => {
    // Tilgå DOM-noden efter komponenten er monteret
    console.log(myRef.current); // DOM-node eller null
  }, []); // Tomt afhængighedsarray sikrer, at dette kun kører én gang ved montering

  return 
Hello, world!
;
}

            

              
                Copy
              
            
          

Almindelige Anvendelsestilfælde for React Refs

Refs er utroligt alsidige og finder anvendelse i forskellige scenarier inden for React-udvikling.

1. Adgang til og Manipulation af DOM-noder

Det mest almindelige anvendelsestilfælde for refs er at få direkte adgang til og manipulere DOM-noder. Dette er nyttigt til opgaver som at sætte fokus på et inputfelt, scrolle til et element eller måle dets dimensioner.

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

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

  useEffect(() => {
    // Sæt fokus på inputfeltet efter komponenten er monteret
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return ;
}

            

              
                Copy
              
            
          

Eksempel: Forestil dig at bygge en flertrinsformular. Når en bruger udfylder et felt, vil du måske automatisk sætte fokus på det næste input. Refs gør dette problemfrit.

2. Håndtering af Fokus, Tekstmarkering og Medieafspilning

Refs er essentielle for finkornet kontrol over fokus, tekstmarkering inden i elementer og styring af medieafspilning (f.eks. video eller lyd).

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

function VideoPlayer() {
  const videoRef = useRef(null);

  const playVideo = () => {
    if (videoRef.current) {
      videoRef.current.play();
    }
  };

  const pauseVideo = () => {
    if (videoRef.current) {
      videoRef.current.pause();
    }
  };

  return (
    

      
      Play
      Pause
    
  );
}

            

              
                Copy
              
            
          

Overvejelse om Tilgængelighed: Når du bruger refs til at styre fokus, skal du sikre korrekt fokushåndtering for at opretholde tilgængeligheden for brugere, der er afhængige af tastaturnavigation eller hjælpemidler. For eksempel, efter at en modal åbner, skal fokus straks sættes på det første fokuserbare element i modalen.

3. Integration med Tredjepartsbiblioteker

Mange tredjeparts JavaScript-biblioteker manipulerer DOM direkte. Refs danner en bro mellem Reacts deklarative model og disse imperative biblioteker.

            
import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto'; // Eksempel: Brug af Chart.js

function ChartComponent() {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      const ctx = chartRef.current.getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    }
  }, []);

  return ;
}

            

              
                Copy
              
            
          

Bemærkning om Internationalisering: Når du integrerer tredjepartsbiblioteker, der håndterer datoer, tal eller valutaer, skal du sikre, at de er korrekt konfigureret til at understøtte brugerens landestandard. Mange biblioteker tilbyder muligheder for at specificere den ønskede landestandard. For eksempel bør datoformateringsbiblioteker initialiseres med brugerens sprog og region for at vise datoer i det korrekte format (f.eks. MM/DD/ÅÅÅÅ vs. DD/MM/ÅÅÅÅ).

4. Udløsning af Imperative Animationer

Selvom React-biblioteker som Framer Motion og React Transition Group foretrækkes til de fleste animationsbehov, kan refs bruges til imperative animationer, når mere finkornet kontrol er nødvendig.

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

function FadeIn() {
  const elementRef = useRef(null);

  useEffect(() => {
    const element = elementRef.current;
    if (element) {
      element.style.opacity = 0; // Oprindeligt skjult
      let opacity = 0;
      const intervalId = setInterval(() => {
        opacity += 0.05;
        element.style.opacity = opacity;
        if (opacity >= 1) {
          clearInterval(intervalId);
        }
      }, 20); // Juster interval for hastighed

      return () => clearInterval(intervalId); // Oprydning ved afmontering
    }
  }, []);

  return 
Fade In!
;
}

            

              
                Copy
              
            
          

5. Måling af Elementdimensioner

Refs giver dig mulighed for præcist at måle dimensionerne (bredde, højde) af elementer i DOM. Dette er nyttigt for responsive layouts, dynamisk positionering og oprettelse af brugerdefinerede visuelle effekter.

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

function MeasureElement() {
  const elementRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const element = elementRef.current;
    if (element) {
      const width = element.offsetWidth;
      const height = element.offsetHeight;
      setDimensions({ width, height });
    }
  }, []);

  return (
    

      
Measure This Element
      
Bredde: {dimensions.width}px
      
Højde: {dimensions.height}px
    
  );
}

            

              
                Copy
              
            
          

Avancerede Ref Mønstre

Ud over den grundlæggende brug af createRef og useRef, udnytter flere avancerede mønstre refs til mere komplekse scenarier.

1. Callback Refs

Callback refs giver en mere fleksibel måde at tilgå DOM-noder på. I stedet for at tildele et ref-objekt, tildeler du en funktion til ref-attributten. React vil kalde denne funktion med DOM-noden, når komponenten monteres, og med null, når den afmonteres.

            
import React, { useState } from 'react';

function CallbackRefExample() {
  const [element, setElement] = useState(null);

  const setRef = (node) => {
    setElement(node);
  };

  return (
    

      
Dette elements ref styres af en callback.
      {element && 
Element: {element.tagName}
}
    
  );
}

            

              
                Copy
              
            
          

Callback refs er især nyttige, når du skal udføre yderligere handlinger, når ref'en er sat eller ryddet.

2. Videresendelse af Refs (forwardRef)

React.forwardRef er en teknik, der tillader en komponent at modtage en ref, der er sendt fra dens forældrekomponent. Dette er nyttigt, når du vil eksponere en DOM-node fra en børnekomponent til dens forælder.

            
import React, { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return ;
});

function ParentComponent() {
  const inputRef = React.useRef(null);

  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    

      
      Focus Input
    
  );
}

            

              
                Copy
              
            
          

I dette eksempel videresender MyInput ref'en til det underliggende input-element, hvilket giver ParentComponent mulighed for direkte at tilgå og manipulere inputtet.

3. Eksponering af Komponentmetoder med Refs

Refs kan også bruges til at eksponere metoder fra en børnekomponent til dens forælder. Dette er nyttigt til at skabe genanvendelige komponenter med imperative API'er.

            
import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    getValue: () => {
      return inputRef.current.value;
    }
  }));

  return ;
});

function ParentComponent() {
  const fancyInputRef = useRef(null);

  const handleFocus = () => {
    fancyInputRef.current.focus();
  };

  const handleGetValue = () => {
    alert(fancyInputRef.current.getValue());
  };

  return (
    

      
      Focus Input
      Get Value
    
  );
}

            

              
                Copy
              
            
          

useImperativeHandle-hooket giver dig mulighed for at tilpasse den instansværdi, der eksponeres for forældrekomponenter, når du bruger forwardRef. Dette giver kontrolleret adgang til børnekomponentens metoder.

Bedste Praksis for Brug af React Refs

Selvom refs giver kraftfulde muligheder, er det afgørende at bruge dem med omtanke og følge bedste praksis.

• Undgå Overdreven DOM-manipulation: Reacts deklarative tilgang er generelt mere effektiv. Brug kun refs, når det er nødvendigt for opgaver, der ikke let kan opnås gennem Reacts state management.
• Brug Refs Sparsomt: Overforbrug af refs kan føre til kode, der er sværere at vedligeholde og ræsonnere om.
• Vær Opmærksom på Komponentens Livscyklus: Sørg for, at du kun tilgår .current-egenskaben af en ref, efter at komponenten er monteret (f.eks. i componentDidMount eller useEffect). At tilgå den før kan resultere i null-værdier.
• Ryd Op i Refs: Når du bruger callback refs, skal du sikre dig, at du sætter ref'en til null, når komponenten afmonteres, for at forhindre hukommelseslækager.
• Overvej Alternativer: Før du griber til refs, undersøg om Reacts state management eller kontrollerede komponenter kan opnå den ønskede adfærd.
• Tilgængelighed: Når du manipulerer fokus, skal du sikre, at applikationen forbliver tilgængelig for brugere med handicap.

Globale Overvejelser ved Brug af Refs

Når du bygger applikationer til et globalt publikum, skal du overveje følgende aspekter, når du bruger refs:

• Højre-til-Venstre (RTL) Layouts: Når du manipulerer DOM-elementer relateret til layout (f.eks. scrolling), skal du sikre, at din kode korrekt håndterer RTL-layouts for sprog som arabisk og hebraisk. Brug egenskaber som scrollLeft og scrollWidth med forsigtighed og normaliser dem eventuelt baseret på layoutets retning.
• Input Method Editors (IMEs): Vær opmærksom på, at brugere i nogle regioner kan bruge IME'er til at indtaste tekst. Når du styrer fokus eller tekstmarkering, skal du sikre, at din kode interagerer korrekt med IME'er og ikke forstyrrer brugerens input.
• Indlæsning af Skrifttyper: Hvis du måler elementdimensioner, før skrifttyper er fuldt indlæst, kan de indledende målinger være forkerte. Brug teknikker til at sikre, at skrifttyper er indlæst, før du stoler på disse målinger (f.eks. ved at bruge document.fonts.ready). Forskellige skriftsystemer (f.eks. latinsk, kyrillisk, CJK) har vidt forskellige skriftstørrelser og metrikker.
• Brugerpræferencer: Overvej brugerpræferencer for animationer og overgange. Nogle brugere foretrækker måske reduceret bevægelse. Respekter disse præferencer, når du bruger refs til at udløse animationer. Brug `prefers-reduced-motion` CSS-media-query til at registrere brugerpræferencer.

Konklusion

React refs er et kraftfuldt værktøj til direkte at manipulere DOM, styre fokus, integrere med tredjepartsbiblioteker og optimere UI-ydelse. Ved at forstå de forskellige ref-mønstre og følge bedste praksis kan du udnytte refs effektivt og samtidig bevare fordelene ved Reacts deklarative tilgang. Husk at overveje globale tilgængeligheds- og internationaliseringsaspekter for at skabe inkluderende og brugervenlige applikationer til et mangfoldigt publikum. Med omhyggelig planlægning og implementering kan React refs markant forbedre dine React-applikationers kapabiliteter og responsivitet.