React Refs: Demystifikace useRef vs. createRef

V dynamickém světě vývoje Reactu je efektivní správa stavu komponent a interakce s Modellem Objektů Dokumentu (DOM) klíčová. React Refs poskytují mechanismus pro přímý přístup a manipulaci s prvky DOM nebo komponentami Reactu. Dvě primární metody pro vytváření Refs jsou useRef a createRef. Zatímco obě slouží k účelu vytváření Refs, liší se ve své implementaci a případech použití. Cílem této příručky je demystifikovat tyto dva přístupy a poskytnout jasnost o tom, kdy a jak efektivně využít každý z nich ve vašich React projektech, zejména při vývoji pro globální publikum.

Pochopení React Refs

Ref (zkratka pro referenci) je funkce Reactu, která vám umožňuje přistupovat přímo k uzlu DOM nebo komponentě Reactu. To je obzvláště užitečné, když potřebujete:

• Přímo manipulovat s prvkem DOM, například zaměřením na vstupní pole.
• Přistupovat k metodám nebo vlastnostem podřízené komponenty.
• Spravovat hodnoty, které přetrvávají napříč vykresleními, aniž by způsobovaly opětovné vykreslení (podobně jako proměnné instance v komponentách třídy).

Zatímco React podporuje deklarativní přístup, kde je UI spravováno prostřednictvím stavu a props, existují situace, kdy je přímá manipulace nezbytná. Refs poskytují způsob, jak překlenout propast mezi deklarativní povahou Reactu a imperativními operacemi DOM.

createRef: Přístup komponenty třídy

createRef je metoda poskytovaná Reactem. Používá se primárně v komponentách třídy k vytváření Refs. Pokaždé, když je komponenta třídy instancována, createRef vytvoří nový objekt Ref. To zajišťuje, že každá instance komponenty má svůj vlastní jedinečný Ref.

Syntaxe a použití

Chcete-li použít createRef, nejprve deklarujete Ref ve své komponentě třídy, typicky v konstruktoru. Poté připojíte Ref k prvku DOM nebo komponentě pomocí atributu ref.

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

  componentDidMount() {
    // Přístup k elementu DOM po připojení komponenty
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

V tomto příkladu je this.myRef vytvořeno pomocí React.createRef(). Poté je přiřazeno atributu ref vstupního elementu. Po připojení komponenty (v componentDidMount) můžete přistupovat ke skutečnému uzlu DOM pomocí this.myRef.current a provádět na něm operace (v tomto případě zaměření na vstup).

Příklad: Zaměření na vstupní pole

Pojďme se podívat na scénář, kde chcete automaticky zaměřit vstupní pole při připojení komponenty. Jedná se o běžný případ použití pro Refs, zejména ve formulářích nebo interaktivních prvcích.

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

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

  render() {
    return (
      

        
      
    );
  }
}

V tomto příkladu FocusInput zaměří vstupní pole okamžitě po připojení. To může zlepšit uživatelský zážitek tím, že nasměruje pozornost uživatele na vstupní prvek, jakmile je komponenta vykreslena.

Důležitá hlediska s createRef

• Pouze komponenty třídy: createRef je navrženo pro použití v komponentách třídy. I když by to technicky mohlo fungovat ve funkčních komponentách, není to zamýšlené použití a může to vést k neočekávanému chování.
• Nový Ref na každé instanci: Každá instance komponenty třídy dostane svůj vlastní createRef. To je důležité pro udržení izolace mezi instancemi komponent.

useRef: Hook funkční komponenty

useRef je Hook, který byl představen v Reactu 16.8. Poskytuje způsob, jak vytvářet proměnné objekty Ref v rámci funkčních komponent. Na rozdíl od createRef, useRef vrací stejný objekt Ref pokaždé, když se komponenta vykreslí. Díky tomu je ideální pro uchovávání hodnot napříč vykresleními bez spouštění opětovných vykreslení.

Syntaxe a použití

Použití useRef je jednoduché. Voláte Hook useRef a předáváte počáteční hodnotu. Hook vrací objekt s vlastností .current, kterou pak můžete použít k přístupu a úpravě hodnoty.

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

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

  useEffect(() => {
    // Přístup k elementu DOM po připojení komponenty
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

V tomto příkladu useRef(null) vytvoří Ref s počáteční hodnotou null. Hook useEffect se používá k přístupu k elementu DOM po připojení komponenty. Vlastnost myRef.current obsahuje odkaz na vstupní prvek, což vám umožňuje jej zaměřit.

Příklad: Sledování předchozích hodnot prop

Jedním z výkonných případů použití pro useRef je sledování předchozí hodnoty prop. Vzhledem k tomu, že změny v Refs nespouštějí opětovné vykreslování, můžete je použít k ukládání hodnot, které chcete zachovat napříč vykresleními, aniž by to ovlivnilo UI.

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

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

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

  return (
    

      
Aktuální hodnota: {value}
      
Předchozí hodnota: {previousValue.current}
    
  );
}

V tomto příkladu previousValue.current ukládá předchozí hodnotu prop value. Hook useEffect aktualizuje Ref vždy, když se změní prop value. To vám umožňuje porovnat aktuální a předchozí hodnoty, což může být užitečné pro detekci změn nebo implementaci animací.

Důležitá hlediska s useRef

• Pouze funkční komponenty: useRef je Hook a lze jej použít pouze ve funkčních komponentách nebo vlastních Hookech.
• Přetrvává napříč vykresleními: Hook useRef vrací stejný objekt Ref při každém vykreslení. To je klíčové pro jeho schopnost uchovávat hodnoty bez spouštění opětovných vykreslení.
• Proměnná vlastnost .current: Můžete přímo upravit vlastnost .current objektu Ref.
• Počáteční hodnota: Můžete poskytnout počáteční hodnotu pro useRef. Tato hodnota bude přiřazena vlastnosti .current při prvním vykreslení komponenty.
• Žádné opětovné vykreslování: Úprava vlastnosti .current Refu nezpůsobuje opětovné vykreslení komponenty.

useRef vs. createRef: Detailní srovnání

Nyní, když jsme prozkoumali useRef i createRef jednotlivě, porovnejme je vedle sebe, abychom zdůraznili jejich klíčové rozdíly a kdy zvolit jeden před druhým.

Funkce	useRef	createRef
Typ komponenty	Funkční komponenty	Komponenty třídy
Hook nebo metoda	Hook	Metoda
Instance Ref	Vrací stejný objekt Ref při každém vykreslení	Vytvoří nový objekt Ref na každé instanci komponenty
Případy použití	Přístup k prvkům DOM Uchovávání hodnot napříč vykresleními bez spouštění opětovných vykreslení Sledování předchozích hodnot prop Ukládání proměnných hodnot, které nezpůsobují opětovné vykreslení	Přístup k prvkům DOM Přístup k metodám podřízených komponent

Výběr správného Ref: Průvodce rozhodováním

Zde je jednoduchý průvodce, který vám pomůže vybrat mezi useRef a createRef:

• Pracujete s funkční komponentou? Použijte useRef.
• Pracujete s komponentou třídy? Použijte createRef.
• Potřebujete uchovat hodnotu napříč vykresleními bez spouštění opětovných vykreslení? Použijte useRef.
• Potřebujete sledovat předchozí hodnotu prop? Použijte useRef.

Kromě manipulace s DOM: Pokročilé případy použití pro Refs

Zatímco přístup k prvkům DOM a manipulace s nimi je primární případ použití pro Refs, nabízejí možnosti nad rámec této základní funkčnosti. Pojďme prozkoumat některé pokročilé scénáře, kde mohou být Refs obzvláště užitečné.

1. Přístup k metodám podřízené komponenty

Refs lze použít pro přístup k metodám definovaným v podřízených komponentách. To umožňuje nadřazené komponentě spouštět akce nebo získávat data přímo od svých podřízených. Tento přístup je obzvláště užitečný, když potřebujete jemnou kontrolu nad podřízenými komponentami.

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

  handleClick = () => {
    // Volání metody na podřízené komponentě
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        Spustit akci podřízené komponenty
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Akce podřízené komponenty spuštěna!');
  };

  render() {
    return 
Toto je podřízená komponenta.
;
  }
}

V tomto příkladu ParentComponent používá Ref k přístupu k ChildComponent a volání její metody doSomething.

2. Správa zaměření a výběru

Refs jsou neocenitelné pro správu zaměření a výběru v rámci vstupních polí a dalších interaktivních prvků. To je zásadní pro vytváření přístupných a uživatelsky přívětivých rozhraní.

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

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Vybrat text ve vstupu
    }
  }, []);

  return ;
}

Tento příklad zaměřuje vstup a vybírá jeho text, jakmile se komponenta připojí.

3. Animace prvků

Refs lze použít ve spojení s animačními knihovnami (jako je GreenSock nebo Framer Motion) k přímé manipulaci s DOM a vytváření složitých animací. To umožňuje jemnou kontrolu nad animačními sekvencemi.

Příklad s použitím vanilkového JavaScriptu pro jednoduchost:

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

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

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Jednoduchá animace: přesunutí rámečku doprava
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 sekunda
          iterations: Infinity, // Opakovat navždy
          direction: 'alternate',
        }
      );
    }
  }, []);

  return 
;
}

Tento příklad používá Web Animations API k animaci jednoduchého rámečku, který se pohybuje tam a zpět vodorovně.

Osvědčené postupy pro používání React Refs v globálních aplikacích

Při vývoji aplikací React pro globální publikum je důležité zvážit, jak Refs interagují s internacionalizací (i18n) a lokalizací (l10n). Zde jsou některé osvědčené postupy:

1. Přístupnost (A11y)

Ujistěte se, že vaše použití Refs nemá negativní dopad na přístupnost. Například, při programovém zaměření prvků zvažte pořadí zaměření uživatele a zda je změna zaměření vhodná pro čtečky obrazovky a uživatele klávesnice.

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

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

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Zaměření pouze v případě, že tlačítko již není zaměřeno uživatelem
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return Klikněte na mě;
}

2. Internacionalizovaná vstupní pole

Při práci se vstupními poli mějte na paměti různé vstupní metody a znakové sady používané v různých jazycích. Ujistěte se, že vaše manipulace založené na Ref (např. výběr, poloha kurzoru) fungují správně napříč různými typy vstupu a národními prostředími. Důkladně otestujte své komponenty s různými jazyky a vstupními metodami.

3. Rozvržení zprava doleva (RTL)

Pokud vaše aplikace podporuje jazyky RTL (např. arabština, hebrejština), ujistěte se, že vaše manipulace s DOM pomocí Refs zohledňují obrácené rozvržení. Například při animaci prvků zvažte obrácení směru animace pro jazyky RTL.

4. Zvážení výkonu

Zatímco Refs poskytují výkonný způsob interakce s DOM, nadměrné používání může vést k problémům s výkonem. Přímá manipulace s DOM obchází virtuální DOM Reactu a proces usmiřování, což může vést k nesrovnalostem a pomalejším aktualizacím. Používejte Refs uvážlivě a pouze v případě potřeby.

Závěr

React Refs, konkrétně useRef a createRef, jsou základní nástroje pro vývojáře Reactu. Pochopení nuancí každého přístupu a toho, kdy je efektivně aplikovat, je zásadní pro vytváření robustních a výkonných aplikací. createRef zůstává standardem pro správu Refs v rámci komponent třídy a zajišťuje, že každá instance má svůj jedinečný Ref. useRef, se svou trvalou povahou napříč vykresleními, je ideální pro funkční komponenty a nabízí způsob, jak spravovat prvky DOM a zachovávat hodnoty bez spouštění zbytečných opětovných vykreslení. Využitím těchto nástrojů moudře můžete vylepšit funkčnost a uživatelskou zkušenost svých aplikací React, a to pro globální publikum s přístupnými a výkonnými rozhraními.

Jak se React neustále vyvíjí, zvládnutí těchto základních konceptů vám umožní vytvářet inovativní a uživatelsky přívětivé webové zážitky, které překračují geografické a kulturní hranice. Nezapomeňte upřednostňovat přístupnost, internacionalizaci a výkon, abyste dodali skutečně globální aplikace.