Mönster för React Refs: Tekniker för DOM-manipulering i dynamiska gränssnitt

React, ett kraftfullt JavaScript-bibliotek för att bygga användargränssnitt, uppmuntrar ofta till ett deklarativt tillvägagångssätt vid UI-utveckling. Ibland blir det dock nödvändigt att direkt manipulera Document Object Model (DOM). Det är här React refs kommer in i bilden. Refs ger ett sätt att komma åt DOM-noder eller React-element som skapats i render-metoden. Denna omfattande guide utforskar olika mönster och tekniker för React refs för att effektivt manipulera DOM, hantera fokus, integrera med tredjepartsbibliotek och optimera gränssnittets prestanda. Vi kommer att gå igenom praktiska exempel och bästa praxis som är lämpliga för en global publik av React-utvecklare.

Förstå React Refs

I grunden är en ref ett vanligt JavaScript-objekt med en current-egenskap. Denna egenskap är muterbar, vilket gör att du kan lagra vilket värde som helst, inklusive en DOM-nod eller en instans av en React-komponent. React erbjuder två primära sätt att skapa refs: React.createRef() (klasskomponenter) och useRef()-hooken (funktionella komponenter).

React.createRef() (Klasskomponenter)

React.createRef() skapar ett ref-objekt som tilldelas en egenskap på en klasskomponents instans. Denna ref kvarstår under hela komponentens livscykel.

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

  componentDidMount() {
    // Kom åt DOM-noden efter att komponenten har monterats
    console.log(this.myRef.current); // DOM-nod eller null
  }

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

            

              
                Copy
              
            
          

useRef() (Funktionella komponenter)

useRef()-hooken skapar ett muterbart ref-objekt vars .current-egenskap initieras med det medskickade argumentet (initialValue). Det returnerade ref-objektet kvarstår under hela komponentens livstid.

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

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

  useEffect(() => {
    // Kom åt DOM-noden efter att komponenten har monterats
    console.log(myRef.current); // DOM-nod eller null
  }, []); // Tom beroendearray säkerställer att detta körs endast en gång vid montering

  return 
Hello, world!
;
}

            

              
                Copy
              
            
          

Vanliga användningsområden för React Refs

Refs är otroligt mångsidiga och kan användas i en mängd olika scenarier inom React-utveckling.

1. Komma åt och manipulera DOM-noder

Det vanligaste användningsområdet för refs är att direkt komma åt och manipulera DOM-noder. Detta är användbart för uppgifter som att fokusera på ett inmatningsfält, skrolla till ett element eller mäta dess dimensioner.

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

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

  useEffect(() => {
    // Fokusera på inmatningsfältet efter att komponenten har monterats
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return ;
}

            

              
                Copy
              
            
          

Exempel: Föreställ dig att du bygger ett flerstegsformulär. När en användare fyller i ett fält kanske du vill fokusera automatiskt på nästa inmatningsfält. Refs gör detta sömlöst.

2. Hantera fokus, textmarkering och mediauppspelning

Refs är avgörande för finkornig kontroll över fokus, textmarkering inom element och hantering av mediauppspelning (t.ex. video eller ljud).

            
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 (
    

      
      Spela upp
      Pausa
    
  );
}

            

              
                Copy
              
            
          

Tillgänglighetsaspekt: När du använder refs för att hantera fokus, säkerställ korrekt fokushantering för att upprätthålla tillgängligheten för användare som förlitar sig på tangentbordsnavigering eller hjälpmedelsteknik. Till exempel, efter att en modal öppnats, sätt omedelbart fokus på det första fokuserbara elementet inuti modalen.

3. Integrera med tredjepartsbibliotek

Många tredjepartsbibliotek för JavaScript manipulerar DOM direkt. Refs utgör en brygga mellan Reacts deklarativa modell och dessa imperativa bibliotek.

            
import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto'; // Exempel: Använder 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: ['Röd', 'Blå', 'Gul', 'Grön', 'Lila', 'Orange'],
          datasets: [{
            label: '# av röster',
            data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    }
  }, []);

  return ;
}

            

              
                Copy
              
            
          

Internationaliseringsnotering: När du integrerar tredjepartsbibliotek som hanterar datum, siffror eller valutor, se till att de är korrekt konfigurerade för att stödja användarens locale. Många bibliotek erbjuder alternativ för att specificera önskad locale. Till exempel bör bibliotek för datumformatering initieras med användarens språk och region för att visa datum i rätt format (t.ex. MM/DD/ÅÅÅÅ vs. DD/MM/ÅÅÅÅ).

4. Utlösa imperativa animationer

Även om React-bibliotek som Framer Motion och React Transition Group är att föredra för de flesta animationsbehov, kan refs användas för imperativa animationer när mer finkornig kontroll är nödvändig.

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

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

  useEffect(() => {
    const element = elementRef.current;
    if (element) {
      element.style.opacity = 0; // Initialt dold
      let opacity = 0;
      const intervalId = setInterval(() => {
        opacity += 0.05;
        element.style.opacity = opacity;
        if (opacity >= 1) {
          clearInterval(intervalId);
        }
      }, 20); // Justera intervall för hastighet

      return () => clearInterval(intervalId); // Städa upp vid avmontering
    }
  }, []);

  return 
Fade In!
;
}

            

              
                Copy
              
            
          

5. Mäta elementdimensioner

Refs gör det möjligt för dig att noggrant mäta dimensionerna (bredd, höjd) på element i DOM. Detta är användbart för responsiva layouter, dynamisk positionering och för att skapa anpassade visuella 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 (
    

      
Mät detta element
      
Bredd: {dimensions.width}px
      
Höjd: {dimensions.height}px
    
  );
}

            

              
                Copy
              
            
          

Avancerade Ref-mönster

Utöver den grundläggande användningen av createRef och useRef finns det flera avancerade mönster som utnyttjar refs för mer komplexa scenarier.

1. Callback Refs

Callback refs erbjuder ett mer flexibelt sätt att komma åt DOM-noder. Istället för att tilldela ett ref-objekt, tilldelar du en funktion till ref-attributet. React kommer att anropa denna funktion med DOM-noden när komponenten monteras och med null när den avmonteras.

            
import React, { useState } from 'react';

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

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

  return (
    

      
Detta elements ref hanteras av en callback.
      {element && 
Element: {element.tagName}
}
    
  );
}

            

              
                Copy
              
            
          

Callback refs är särskilt användbara när du behöver utföra ytterligare åtgärder när en ref sätts eller rensas.

2. Vidarebefordra Refs (forwardRef)

React.forwardRef är en teknik som låter en komponent ta emot en ref som skickas från dess föräldrakomponent. Detta är användbart när du vill exponera en DOM-nod från en barnkomponent till dess förä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 (
    

      
      Fokusera på inmatningsfält
    
  );
}

            

              
                Copy
              
            
          

I det här exemplet vidarebefordrar MyInput ref:en till det underliggande input-elementet, vilket gör att ParentComponent direkt kan komma åt och manipulera inmatningsfältet.

3. Exponera komponentmetoder med Refs

Refs kan också användas för att exponera metoder från en barnkomponent till dess förälder. Detta är användbart för att skapa återanvändbara komponenter med imperativa 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 (
    

      
      Fokusera på inmatningsfält
      Hämta värde
    
  );
}

            

              
                Copy
              
            
          

useImperativeHandle-hooken låter dig anpassa det instansvärde som exponeras för föräldrakomponenter när du använder forwardRef. Detta möjliggör kontrollerad åtkomst till barnets metoder.

Bästa praxis för att använda React Refs

Även om refs erbjuder kraftfulla möjligheter är det avgörande att använda dem omdömesgillt och följa bästa praxis.

• Undvik överdriven DOM-manipulering: Reacts deklarativa tillvägagångssätt är generellt mer effektivt. Använd endast refs när det är nödvändigt för uppgifter som inte enkelt kan uppnås genom Reacts state-hantering.
• Använd Refs sparsamt: Överanvändning av refs kan leda till kod som är svårare att underhålla och resonera kring.
• Var medveten om komponentens livscykel: Se till att du endast kommer åt .current-egenskapen för en ref efter att komponenten har monterats (t.ex. i componentDidMount eller useEffect). Att komma åt den innan kan resultera i null-värden.
• Städa upp Refs: När du använder callback refs, se till att du sätter ref:en till null när komponenten avmonteras för att förhindra minnesläckor.
• Överväg alternativ: Innan du tar till refs, undersök om Reacts state-hantering eller kontrollerade komponenter kan uppnå det önskade beteendet.
• Tillgänglighet: När du manipulerar fokus, se till att applikationen förblir tillgänglig för användare med funktionsnedsättningar.

Globala överväganden vid användning av Refs

När du bygger applikationer för en global publik, överväg följande aspekter vid användning av refs:

• Höger-till-vänster (RTL) layouter: När du manipulerar DOM-element relaterade till layout (t.ex. skrollning), se till att din kod hanterar RTL-layouter korrekt för språk som arabiska och hebreiska. Använd egenskaper som scrollLeft och scrollWidth med försiktighet och normalisera dem eventuellt baserat på layoutens riktning.
• Input Method Editors (IME:er): Var medveten om att användare i vissa regioner kan använda IME:er för att mata in text. När du hanterar fokus eller textmarkering, se till att din kod interagerar korrekt med IME:er och inte stör användarens inmatning.
• Inläsning av typsnitt: Om du mäter elementdimensioner innan typsnitten har laddats helt, kan de initiala mätningarna vara felaktiga. Använd tekniker för att säkerställa att typsnitt är laddade innan du förlitar dig på dessa mätningar (t.ex. med document.fonts.ready). Olika skriftsystem (t.ex. latinska, kyrilliska, CJK) har mycket olika typsnittsstorlekar och metrik.
• Användarpreferenser: Ta hänsyn till användarpreferenser för animationer och övergångar. Vissa användare kan föredra reducerad rörelse. Respektera dessa preferenser när du använder refs för att utlösa animationer. Använd CSS-mediafrågan `prefers-reduced-motion` för att upptäcka användarpreferenser.

Slutsats

React refs är ett kraftfullt verktyg för att direkt manipulera DOM, hantera fokus, integrera med tredjepartsbibliotek och optimera gränssnittets prestanda. Genom att förstå de olika ref-mönstren och följa bästa praxis kan du utnyttja refs effektivt samtidigt som du bibehåller fördelarna med Reacts deklarativa tillvägagångssätt. Kom ihåg att ta hänsyn till global tillgänglighet och internationaliseringsaspekter för att skapa inkluderande och användarvänliga applikationer för en mångsidig publik. Med noggrann planering och implementering kan React refs avsevärt förbättra funktionerna och responsiviteten i dina React-applikationer.