Hook useRef pro práci s refy v Reactu

V této lekci budeme pracovat s refy. Pro názornost si rozebereme funkci hoku useRef ve srovnání s hokem useState.

Vytvořme komponentu s tlačítkem:

App.jsxreturn (
  <div>
    <button>
      state click
    </button>
  </div>
);

Importujme do komponenty useState:

App.jsximport { useState } from 'react';

A vytvořme stav state:

App.jsxconst [state, setState] = useState(0);

A nyní udělejme tak, aby po kliknutí na tlačítko se náš state zvýšil o 1. Hodnotu stavu budeme vypisovat přímo do textu tlačítka:

App.jsx<button onClick={handleStateClick}>
  state click: {state}
</button>

Pojďme popsat funkci pro zpracování kliknutí na tlačítko handleStateClick:

App.jsxfunction handleStateClick() {
  setState(state + 1);
}

Klikněme na tlačítko a uvidíme, jak hodnota stavu roste.

A nyní vytvořme komponentu App, ale použijme nikoli stav, ale ref.

Nejprve importujme do komponenty useRef:

App.jsximport { useRef } from 'react';

A vytvořme ref ref. Hook useRef vrací jako výsledek objekt refu s jedinou vlastností current, která nás bude zajímat v dalším kroku. Nastavme jeho počáteční hodnotu na 0:

App.jsxconst ref = useRef(0);

Přidejme na tlačítko obslužnou rutinu kliknutí. Pamatujte, že musíme číst/měnit nikoli samotný ref, ale jeho vlastnost current:

App.jsx<button onClick={handleRefClick}>
  ref click: {ref.current}
</button>

Přidejme funkci pro zpracování kliknutí na naše tlačítko. Zde budeme zvyšovat current o 1, stejně jako v předchozím příkladu se stavem. Na rozdíl od stavu, kde je vyžadována funkce setState pro změnu jeho hodnoty, s vlastností refu pracujeme přímo:

App.jsxfunction handleRefClick() {
  ref.current = ref.current + 1;
}

Nyní klikněme na naše tlačítko. A co vidíme? Při kliknutí na něj, jak jsme měli původně 0, tak se nemění.

Můžete samozřejmě začít pochybovat o tom, že se hodnota vůbec mění. Pojďme to zkontrolovat. K tomu přidáme do funkce obslužné rutiny kliknutí další řádek kódu s výpisem hodnoty current do konzole:

App.jsxfunction handleRefClick() {
  ref.current = ref.current + 1;
  console.log('ref click: ' + ref.current);
}

A nyní, otevřeme-li konzoli v prohlížeči, znovu klikněme na tlačítko a přesvědčme se, že hodnota se skutečně mění při každém kliknutí a žádný podvod neexistuje.

Nyní vidíme, že na rozdíl od stavu, změna hodnoty refu nezpůsobuje renderování komponenty. Proto pokaždé v textu tlačítka vidíme počáteční hodnotu 0.

Pokud jsou tedy vaše data používána pro renderování, ukládejte je do stavu, a pokud nepotřebujete renderování, v takovém případě může být použití refů efektivnější.