React Ref: Odkrývanie tajomstiev useRef vs. createRef

V dynamickom svete vývoja React je efektívne riadenie stavu komponentov a interakcia s Document Object Model (DOM) kľúčové. React Ref poskytujú mechanizmus na priamy prístup a manipuláciu s DOM prvkami alebo React komponentmi. Dve primárne metódy na vytváranie Ref sú useRef a createRef. Hoci obe slúžia na vytváranie Ref, líšia sa svojou implementáciou a prípadmi použitia. Cieľom tohto sprievodcu je objasniť tieto dva prístupy a poskytnúť jasnosť, kedy a ako efektívne využiť každý z nich vo vašich projektoch React, najmä pri vývoji pre globálne publikum.

Pochopenie React Ref

Ref (skratka pre referenciu) je funkcia React, ktorá vám umožňuje priamo pristupovať k DOM uzlu alebo React komponentu. Toto je obzvlášť užitočné, keď potrebujete:

• Priamo manipulovať s DOM elementom, napríklad zamerať vstupné pole.
• Získať prístup k metódam alebo vlastnostiam podradeného komponentu.
• Spravovať hodnoty, ktoré pretrvávajú medzi vykresleniami bez toho, aby spôsobovali opätovné vykreslenie (podobne ako inštančné premenné v triednych komponentoch).

Hoci React podporuje deklaratívny prístup, kde sa používateľské rozhranie riadi prostredníctvom stavu a vlastností, existujú situácie, keď je priama manipulácia nevyhnutná. Ref poskytujú spôsob, ako preklenúť priepasť medzi deklaratívnou povahou React a imperatívnymi operáciami DOM.

createRef: Prístup pre triedne komponenty

createRef je metóda poskytovaná Reactom. Používa sa primárne v triednych komponentoch na vytváranie Ref. Zakaždým, keď sa vytvorí inštancia triedneho komponentu, createRef vytvorí nový Ref objekt. To zaisťuje, že každá inštancia komponentu má svoj vlastný jedinečný Ref.

Syntax a použitie

Ak chcete použiť createRef, najprv deklarujete Ref vo vašom triednom komponente, zvyčajne v konštruktore. Potom pripojíte Ref k DOM elementu alebo komponentu pomocou atribútu ref.

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

  componentDidMount() {
    // Získajte prístup k DOM elementu po pripojení komponentu
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

V tomto príklade sa this.myRef vytvorí pomocou React.createRef(). Potom sa priradí atribútu ref vstupného elementu. Po pripojení komponentu (v componentDidMount) môžete získať prístup k aktuálnemu DOM uzlu pomocou this.myRef.current a vykonávať na ňom operácie (v tomto prípade zamerať vstup).

Príklad: Zameranie vstupného poľa

Zvážte scenár, kde chcete automaticky zamerať vstupné pole pri pripojení komponentu. Toto je bežný prípad použitia pre Ref, najmä vo formulároch alebo interaktívnych prvkoch.

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

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

  render() {
    return (
      

        
      
    );
  }
}

V tomto príklade FocusInput zameria vstupné pole ihneď po pripojení. To môže zlepšiť používateľskú skúsenosť nasmerovaním pozornosti používateľa na vstupný element hneď po vykreslení komponentu.

Dôležité aspekty s createRef

• Iba triedne komponenty: createRef je určený na použitie v triednych komponentoch. Hoci by to technicky mohlo fungovať vo funkcionálnych komponentoch, nie je to zamýšľané použitie a môže to viesť k neočakávanému správaniu.
• Nový Ref pre každú inštanciu: Každá inštancia triedneho komponentu získa svoj vlastný createRef. Toto je dôležité pre udržanie izolácie medzi inštanciami komponentov.

useRef: Hook pre funkcionálne komponenty

useRef je Hook, ktorý bol predstavený v React 16.8. Poskytuje spôsob, ako vytvárať premenlivé Ref objekty v rámci funkcionálnych komponentov. Na rozdiel od createRef, useRef vracia ten istý Ref objekt pri každom vykreslení komponentu. Vďaka tomu je ideálny na pretrvávanie hodnôt medzi vykresleniami bez spúšťania opätovného vykresľovania.

Syntax a použitie

Použitie useRef je priamočiare. Zavoláte Hook useRef a odovzdáte mu počiatočnú hodnotu. Hook vráti objekt s vlastnosťou .current, ktorú potom môžete použiť na prístup a úpravu hodnoty.

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

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

  useEffect(() => {
    // Získajte prístup k DOM elementu po pripojení komponentu
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

V tomto príklade useRef(null) vytvorí Ref s počiatočnou hodnotou null. Hook useEffect sa používa na prístup k DOM elementu po pripojení komponentu. Vlastnosť myRef.current obsahuje referenciu na vstupný element, čo vám umožňuje ho zamerať.

Príklad: Sledovanie predchádzajúcich hodnôt vlastností

Jedným z účinných prípadov použitia pre useRef je sledovanie predchádzajúcej hodnoty vlastnosti. Keďže zmeny v Ref nespúšťajú opätovné vykreslenie, môžete ich použiť na ukladanie hodnôt, ktoré chcete pretrvávať medzi vykresleniami bez ovplyvnenia používateľského rozhrania.

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

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

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

  return (
    

      
Aktuálna hodnota: {value}
      
Predchádzajúca hodnota: {previousValue.current}
    
  );
}

V tomto príklade previousValue.current ukladá predchádzajúcu hodnotu vlastnosti value. Hook useEffect aktualizuje Ref vždy, keď sa zmení vlastnosť value. To vám umožňuje porovnať aktuálne a predchádzajúce hodnoty, čo môže byť užitočné na detekciu zmien alebo implementáciu animácií.

Dôležité aspekty s useRef

• Iba funkcionálne komponenty: useRef je Hook a môže sa používať iba v rámci funkcionálnych komponentov alebo vlastných Hook.
• Pretrváva medzi vykresleniami: Hook useRef vracia ten istý Ref objekt pri každom vykreslení. Toto je kľúčové pre jeho schopnosť pretrvávať hodnoty bez spúšťania opätovného vykreslenia.
• Premenlivá vlastnosť .current: Môžete priamo upraviť vlastnosť .current Ref objektu.
• Počiatočná hodnota: Môžete poskytnúť počiatočnú hodnotu pre useRef. Táto hodnota bude priradená vlastnosti .current pri prvom vykreslení komponentu.
• Žiadne opätovné vykreslenie: Úprava vlastnosti .current Ref nespôsobí opätovné vykreslenie komponentu.

useRef vs. createRef: Podrobné porovnanie

Teraz, keď sme preskúmali useRef a createRef individuálne, porovnajme ich vedľa seba, aby sme zdôraznili ich kľúčové rozdiely a kedy si vybrať jeden pred druhým.

Funkcia	useRef	createRef
Typ komponentu	Funkcionálne komponenty	Triedne komponenty
Hook alebo metóda	Hook	Metóda
Inštancia Ref	Vráti ten istý Ref objekt pri každom vykreslení	Vytvorí nový Ref objekt pri každej inštancii komponentu
Prípady použitia	Prístup k DOM elementom Pretrvávanie hodnôt medzi vykresleniami bez spúšťania opätovného vykresľovania Sledovanie predchádzajúcich hodnôt vlastností Ukladanie premenlivých hodnôt, ktoré nespôsobujú opätovné vykreslenie	Prístup k DOM elementom Prístup k metódam podradeného komponentu

Výber správneho Ref: Sprievodca rozhodovaním

Tu je jednoduchý sprievodca, ktorý vám pomôže vybrať si medzi useRef a createRef:

• Pracujete s funkcionálnym komponentom? Použite useRef.
• Pracujete s triednym komponentom? Použite createRef.
• Potrebujete pretrvávať hodnotu medzi vykresleniami bez spúšťania opätovného vykresľovania? Použite useRef.
• Potrebujete sledovať predchádzajúcu hodnotu vlastnosti? Použite useRef.

Mimo manipulácie s DOM: Rozšírené prípady použitia pre Ref

Hoci prístup a manipulácia s DOM elementmi je primárny prípad použitia pre Ref, ponúkajú možnosti nad rámec tejto základnej funkcionality. Preskúmajme niektoré rozšírené scenáre, kde môžu byť Ref obzvlášť užitočné.

1. Prístup k metódam podradeného komponentu

Ref možno použiť na prístup k metódam definovaným v podradených komponentoch. To umožňuje nadradenému komponentu priamo spúšťať akcie alebo získavať údaje od svojich podradených komponentov. Tento prístup je obzvlášť užitočný, keď potrebujete jemné ovládanie podradených komponentov.

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

  handleClick = () => {
    // Zavolajte metódu na podradenom komponente
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        Spustiť akciu podradeného komponentu
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Akcia podradeného komponentu spustená!');
  };

  render() {
    return 
Toto je podradený komponent.
;
  }
}

V tomto príklade ParentComponent používa Ref na prístup k ChildComponent a volanie jeho metódy doSomething.

2. Správa zaostrenia a výberu

Ref sú neoceniteľné pre správu zaostrenia a výberu v rámci vstupných polí a iných interaktívnych prvkov. Toto je kľúčové pre vytváranie prístupných a používateľsky prívetivých rozhraní.

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

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Vyberte text vo vstupe
    }
  }, []);

  return ;
}

Tento príklad zameria vstup a vyberie jeho text hneď po pripojení komponentu.

3. Animovanie prvkov

Ref možno použiť v spojení s animačnými knižnicami (ako GreenSock alebo Framer Motion) na priamu manipuláciu s DOM a vytváranie zložitých animácií. To umožňuje jemné ovládanie animačných sekvencií.

Príklad použitia vanilla JavaScript pre jednoduchosť:

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

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

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Jednoduchá animácia: posuňte políčko doprava
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 sekunda
          iterations: Infinity, // Opakujte navždy
          direction: 'alternate',
        }
      );
    }
  }, []);

  return 
;
}

Tento príklad používa Web Animations API na animáciu jednoduchého políčka, posúvajúc ho vodorovne dopredu a dozadu.

Osvedčené postupy pre používanie React Ref v globálnych aplikáciách

Pri vývoji React aplikácií pre globálne publikum je dôležité zvážiť, ako Ref interagujú s internacionalizáciou (i18n) a lokalizáciou (l10n). Tu sú niektoré osvedčené postupy:

1. Prístupnosť (A11y)

Uistite sa, že vaše používanie Ref negatívne neovplyvňuje prístupnosť. Napríklad, pri programovom zameriavaní elementov zvážte poradie zaostrenia používateľa a či je zmena zaostrenia vhodná pre čítačky obrazovky a používateľov klávesnice.

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

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

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Zamerajte iba vtedy, ak tlačidlo ešte nie je zamerané používateľom
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return Klikni na mňa;
}

2. Internacionalizované vstupné polia

Pri práci so vstupnými poľami si uvedomte rôzne vstupné metódy a sady znakov používané v rôznych jazykoch. Uistite sa, že vaše manipulácie založené na Ref (napr. výber, pozícia kurzora) fungujú správne v rôznych typoch vstupu a lokalitách. Dôkladne otestujte svoje komponenty s rôznymi jazykmi a vstupnými metódami.

3. Rozloženia sprava doľava (RTL)

Ak vaša aplikácia podporuje jazyky RTL (napr. arabčina, hebrejčina), uistite sa, že vaše manipulácie s DOM pomocou Ref zohľadňujú obrátené rozloženie. Napríklad, pri animovaní prvkov zvážte obrátenie smeru animácie pre jazyky RTL.

4. Aspekty výkonu

Hoci Ref poskytujú výkonný spôsob interakcie s DOM, nadmerné používanie môže viesť k problémom s výkonom. Priama manipulácia s DOM obchádza virtuálny DOM a proces zmierenia React, čo môže viesť k nezrovnalostiam a pomalším aktualizáciám. Používajte Ref uvážlivo a iba vtedy, keď je to potrebné.

Záver

React Ref, konkrétne useRef a createRef, sú základné nástroje pre vývojárov React. Pochopenie nuancií každého prístupu a kedy ich efektívne aplikovať, je kľúčové pre vytváranie robustných a výkonných aplikácií. createRef zostáva štandardom pre správu Ref v rámci triednych komponentov, čo zaisťuje, že každá inštancia má svoj jedinečný Ref. useRef, so svojou trvalou povahou medzi vykresleniami, je ideálny pre funkcionálne komponenty a ponúka spôsob, ako spravovať DOM elementy a pretrvávať hodnoty bez spúšťania zbytočného opätovného vykresľovania. Múdrym využívaním týchto nástrojov môžete vylepšiť funkčnosť a používateľskú skúsenosť vašich aplikácií React a uspokojiť globálne publikum prístupnými a výkonnými rozhraniami.

Keďže sa React neustále vyvíja, zvládnutie týchto základných konceptov vám umožní vytvárať inovatívne a používateľsky prívetivé webové skúsenosti, ktoré presahujú geografické a kultúrne hranice. Nezabudnite uprednostňovať prístupnosť, internacionalizáciu a výkon, aby ste mohli poskytovať skutočne globálne aplikácie.