React Refs: Klargörande av useRef vs. createRef

I React-utvecklingens dynamiska värld är effektiv hantering av komponenttillstånd och interaktion med Document Object Model (DOM) avgörande. React Refs erbjuder en mekanism för att direkt komma åt och manipulera DOM-element eller React-komponenter. Två primära metoder för att skapa Refs är useRef och createRef. Även om båda tjänar syftet att skapa Refs, skiljer de sig åt i sin implementering och sina användningsfall. Denna guide syftar till att avmystifiera dessa två tillvägagångssätt och ge klarhet i när och hur du effektivt kan utnyttja dem i dina React-projekt, särskilt när du utvecklar för en global publik.

Förstå React Refs

En Ref (kort för referens) är en React-funktion som gör att du kan komma åt en DOM-nod eller en React-komponent direkt. Detta är särskilt användbart när du behöver:

• Direkt manipulera ett DOM-element, som att fokusera ett inmatningsfält.
• Åtkomst till en underkomponents metoder eller egenskaper.
• Hantera värden som kvarstår över renderingar utan att orsaka nya renderingar (liknande instansvariabler i klasskomponenter).

Medan React uppmuntrar ett deklarativt tillvägagångssätt, där användargränssnittet hanteras via tillstånd och props, finns det situationer där direkt manipulation är nödvändig. Refs tillhandahåller ett sätt att överbrygga klyftan mellan Reacts deklarativa natur och imperativa DOM-operationer.

createRef: Klasskomponentmetoden

createRef är en metod som tillhandahålls av React. Den används främst inom klasskomponenter för att skapa Refs. Varje gång en klasskomponent instansieras, skapar createRef ett nytt Ref-objekt. Detta säkerställer att varje instans av komponenten har sin egen unika Ref.

Syntax och Användning

För att använda createRef deklarerar du först en Ref i din klasskomponent, vanligtvis i konstruktorn. Sedan kopplar du Refen till ett DOM-element eller en komponent med hjälp av attributet ref.

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

  componentDidMount() {
    // Åtkomst till DOM-elementet efter att komponenten har monterats
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

I detta exempel skapas this.myRef med hjälp av React.createRef(). Den tilldelas sedan till attributet ref för inmatningselementet. Efter att komponenten monterats (i componentDidMount), kan du komma åt den faktiska DOM-noden med hjälp av this.myRef.current och utföra operationer på den (i detta fall, fokusera inmatningen).

Exempel: Fokusera ett Inmatningsfält

Låt oss överväga ett scenario där du vill fokusera ett inmatningsfält automatiskt när en komponent monteras. Detta är ett vanligt användningsfall för Refs, särskilt i formulär eller interaktiva element.

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

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      

        
      
    );
  }
}

I detta exempel fokuserar FocusInput inmatningsfältet omedelbart efter montering. Detta kan förbättra användarupplevelsen genom att rikta användarens uppmärksamhet mot inmatningselementet så snart komponenten renderas.

Viktiga överväganden med createRef

• Endast Klasskomponenter: createRef är utformad för användning i klasskomponenter. Även om den tekniskt sett kan fungera i funktionella komponenter, är det inte den avsedda användningen och kan leda till oväntat beteende.
• Ny Ref vid Varje Instans: Varje instans av en klasskomponent får sin egen createRef. Detta är viktigt för att upprätthålla isolering mellan komponentinstanser.

useRef: Den Funktionella Komponent-Hooken

useRef är en Hook som introducerades i React 16.8. Den tillhandahåller ett sätt att skapa föränderliga Ref-objekt inom funktionella komponenter. Till skillnad från createRef returnerar useRef samma Ref-objekt varje gång komponenten renderas. Detta gör den idealisk för att bevara värden över renderingar utan att utlösa nya renderingar.

Syntax och Användning

Att använda useRef är enkelt. Du anropar useRef-Hooken och skickar ett initialt värde. Hooken returnerar ett objekt med en .current-egenskap, som du sedan kan använda för att komma åt och modifiera värdet.

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

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

  useEffect(() => {
    // Åtkomst till DOM-elementet efter att komponenten har monterats
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

I detta exempel skapar useRef(null) en Ref med ett initialt värde av null. useEffect-Hooken används för att komma åt DOM-elementet efter att komponenten har monterats. Egenskapen myRef.current håller referensen till inmatningselementet, vilket gör att du kan fokusera det.

Exempel: Spåra Tidigare Prop-Värden

Ett kraftfullt användningsfall för useRef är att spåra det tidigare värdet av en prop. Eftersom ändringar i Refs inte utlöser nya renderingar, kan du använda dem för att lagra värden som du vill ska kvarstå över renderingar utan att påverka användargränssnittet.

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

function PreviousValueComponent({ value }) {
  const previousValue = useRef();

  useEffect(() => {
    previousValue.current = value;
  }, [value]);

  return (
    

      
Aktuellt Värde: {value}
      
Tidigare Värde: {previousValue.current}
    
  );
}

I detta exempel lagrar previousValue.current det tidigare värdet av value-prop:en. useEffect-Hooken uppdaterar Refen närhelst value-prop:en ändras. Detta gör att du kan jämföra nuvarande och tidigare värden, vilket kan vara användbart för att upptäcka ändringar eller implementera animationer.

Viktiga överväganden med useRef

• Endast Funktionella Komponenter: useRef är en Hook och kan endast användas inom funktionella komponenter eller anpassade Hooks.
• Kvarstår över Renderingar: useRef-Hooken returnerar samma Ref-objekt vid varje rendering. Detta är nyckeln till dess förmåga att bevara värden utan att utlösa nya renderingar.
• Föränderlig .current Egenskap: Du kan direkt modifiera .current-egenskapen hos Ref-objektet.
• Initialt Värde: Du kan ange ett initialt värde till useRef. Detta värde kommer att tilldelas .current-egenskapen när komponenten först renderas.
• Inga Nya Renderingar: Att modifiera .current-egenskapen för en Ref orsakar ingen ny rendering av komponenten.

useRef vs. createRef: En Detaljerad Jämförelse

Nu när vi har utforskat både useRef och createRef individuellt, låt oss jämföra dem sida vid sida för att belysa deras viktigaste skillnader och när man ska välja den ena framför den andra.

Funktion	useRef	createRef
Komponenttyp	Funktionella Komponenter	Klasskomponenter
Hook eller Metod	Hook	Metod
Ref-instans	Returnerar samma Ref-objekt vid varje rendering	Skapar ett nytt Ref-objekt vid varje instans av komponenten
Användningsområden	Åtkomst till DOM-element Bevara värden över renderingar utan att utlösa nya renderingar Spåra tidigare prop-värden Lagra föränderliga värden som inte orsakar nya renderingar	Åtkomst till DOM-element Åtkomst till underkomponentmetoder

Välja Rätt Ref: En Beslutsguide

Här är en enkel guide som hjälper dig att välja mellan useRef och createRef:

• Arbetar du med en funktionell komponent? Använd useRef.
• Arbetar du med en klasskomponent? Använd createRef.
• Behöver du bevara ett värde över renderingar utan att utlösa nya renderingar? Använd useRef.
• Behöver du spåra det tidigare värdet av en prop? Använd useRef.

Bortom DOM-manipulation: Avancerade Användningsfall för Refs

Även om åtkomst och manipulation av DOM-element är ett primärt användningsfall för Refs, erbjuder de möjligheter utöver denna kärnfunktionalitet. Låt oss utforska några avancerade scenarier där Refs kan vara särskilt användbara.

1. Åtkomst till Underkomponentmetoder

Refs kan användas för att komma åt metoder definierade i underkomponenter. Detta gör att en förälderkomponent direkt kan utlösa åtgärder eller hämta data från sina barn. Detta tillvägagångssätt är särskilt användbart när du behöver finkornig kontroll över underkomponenter.

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

  handleClick = () => {
    // Anropa en metod på underkomponenten
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        Utlös Barnåtgärd
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Underkomponentåtgärd utlöst!');
  };

  render() {
    return 
Detta är en underkomponent.
;
  }
}

I detta exempel använder ParentComponent en Ref för att komma åt ChildComponent och anropa dess doSomething-metod.

2. Hantera Fokus och Markering

Refs är ovärderliga för att hantera fokus och markering inom inmatningsfält och andra interaktiva element. Detta är avgörande för att skapa tillgängliga och användarvänliga gränssnitt.

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

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Markera texten i inmatningen
    }
  }, []);

  return ;
}

Detta exempel fokuserar inmatningen och markerar dess text så snart komponenten monteras.

3. Animera Element

Refs kan användas i kombination med animationsbibliotek (som GreenSock eller Framer Motion) för att direkt manipulera DOM och skapa komplexa animationer. Detta möjliggör finkornig kontroll över animationssekvenser.

Exempel med enkel JavaScript för enkelhetens skull:

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

function AnimatedBox() {
  const boxRef = useRef(null);

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Enkel animation: flytta rutan till höger
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 sekund
          iterations: Infinity, // Upprepa för evigt
          direction: 'alternate',
        }
      );
    }
  }, []);

  return 
;
}

Detta exempel använder Web Animations API för att animera en enkel ruta och flytta den fram och tillbaka horisontellt.

Bästa Praxis för att Använda React Refs i Globala Applikationer

När du utvecklar React-applikationer för en global publik är det viktigt att överväga hur Refs interagerar med internationalisering (i18n) och lokalisering (l10n). Här är några bästa metoder:

1. Tillgänglighet (A11y)

Se till att din användning av Refs inte negativt påverkar tillgängligheten. När du till exempel programmatiskt fokuserar element, överväg användarens fokusordning och om fokusändringen är lämplig för skärmläsare och tangentbordsanvändare.

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

function AccessibleFocus() {
  const buttonRef = useRef(null);

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Fokusera endast om knappen inte redan är fokuserad av användaren
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return Klicka på mig;
}

2. Internationaliserade Inmatningsfält

När du arbetar med inmatningsfält, var medveten om olika inmatningsmetoder och teckenuppsättningar som används i olika språk. Se till att dina Ref-baserade manipulationer (t.ex. markering, markörposition) fungerar korrekt över olika inmatningstyper och språk. Testa dina komponenter noggrant med olika språk och inmatningsmetoder.

3. Höger-till-Vänster (RTL) Layouter

Om din applikation stöder RTL-språk (t.ex. arabiska, hebreiska), se till att dina DOM-manipulationer med Refs tar hänsyn till den omvända layouten. När du till exempel animerar element, överväg att vända animationsriktningen för RTL-språk.

4. Prestandaöverväganden

Även om Refs erbjuder ett kraftfullt sätt att interagera med DOM, kan överanvändning leda till prestandaproblem. Direkt DOM-manipulation kringgår Reacts virtuella DOM- och avstämningsprocess, vilket potentiellt kan leda till inkonsekvenser och långsammare uppdateringar. Använd Refs omdömesgillt och endast när det är nödvändigt.

Slutsats

React Refs, specifikt useRef och createRef, är ovärderliga verktyg för React-utvecklare. Att förstå nyanserna i varje tillvägagångssätt och när man effektivt ska tillämpa dem är avgörande för att bygga robusta och högpresterande applikationer. createRef förblir standarden för att hantera Refs inom klasskomponenter, vilket säkerställer att varje instans har sin unika Ref. useRef, med sin ihållande natur över renderingar, är idealisk för funktionella komponenter, och erbjuder ett sätt att hantera DOM-element och bevara värden utan att utlösa onödiga nya renderingar. Genom att klokt utnyttja dessa verktyg kan du förbättra funktionaliteten och användarupplevelsen i dina React-applikationer och tillgodose en global publik med tillgängliga och högpresterande gränssnitt.

När React fortsätter att utvecklas kommer att bemästra dessa grundläggande koncept att ge dig möjlighet att skapa innovativa och användarvänliga webbupplevelser som överskrider geografiska och kulturella gränser. Kom ihåg att prioritera tillgänglighet, internationalisering och prestanda för att leverera verkligt globala applikationer.