Reagovat useRefHook

useRefHook vám umožňuje uchovat hodnoty mezi rendery .

Lze jej použít k uložení měnitelné hodnoty, která při aktualizaci nezpůsobí opětovné vykreslení.

Lze jej použít pro přímý přístup k prvku DOM.

Nezpůsobuje opakované vykreslování

Pokud bychom se pokusili spočítat, kolikrát se naše aplikace vykresluje pomocí useStateHooku, byli bychom chyceni v nekonečné smyčce, protože tento Hook sám o sobě způsobuje opětovné vykreslování.

Abychom tomu zabránili, můžeme použít useRefHook.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

useRef()vrací pouze jednu položku. Vrací objekt s názvem current.

Při inicializaci useRefnastavíme počáteční hodnotu: useRef(0).

Spusťte to na svém počítači a zkuste zadat vstup, abyste viděli, jak se zvyšuje počet vykreslení aplikace.

Přístup k prvkům DOM

Obecně chceme nechat React zvládnout veškerou DOM manipulaci.

Existují však případy, kdy useRefje lze použít, aniž by to způsobilo problémy.

V Reactu můžeme přidat refatribut k prvku a přistupovat k němu přímo v DOM.

import { useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Sledování změn stavu

useRefHook lze také použít ke sledování předchozích hodnot stavu .

Je to proto, že jsme schopni zachovat useRefhodnoty mezi rendery.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Tentokrát použijeme kombinaci useState, useEffect, a useRefke sledování předchozího stavu.

V useEffect, aktualizujeme useRefaktuální hodnotu při každé inputValueaktualizaci zadáním textu do vstupního pole.