Reaguj useRefhak

useRefHook umożliwia utrzymywanie wartości między renderowaniami .

Może służyć do przechowywania zmiennej wartości, która nie powoduje ponownego renderowania po aktualizacji.

Może być używany do bezpośredniego dostępu do elementu DOM.

Nie powoduje ponownego renderowania

Gdybyśmy spróbowali policzyć, ile razy nasza aplikacja renderuje się za pomocą useStatehooka, zostaniemy złapani w nieskończoną pętlę, ponieważ ten hook powoduje ponowne renderowanie.

Aby tego uniknąć, możemy użyć useRefHooka.

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()zwraca tylko jeden przedmiot. Zwraca obiekt o nazwie current.

Kiedy inicjujemy useRefustawiamy wartość początkową: useRef(0).

Uruchom to na swoim komputerze i spróbuj wpisać dane wejściowe, aby zobaczyć wzrost liczby renderowania aplikacji.

Dostęp do elementów DOM

Ogólnie rzecz biorąc, chcemy, aby React zajmował się wszystkimi manipulacjami DOM.

Ale jest kilka przypadków, w których useRefmożna go używać bez powodowania problemów.

W React możemy dodać refatrybut do elementu, aby uzyskać do niego dostęp bezpośrednio w 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'));

Śledzenie zmian stanu

Hook może być również useRefużywany do śledzenia poprzednich wartości stanu.

Dzieje się tak, ponieważ jesteśmy w stanie utrzymywać useRefwartości między renderowaniami.

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'));

Tym razem używamy kombinacji useState, useEffecti , useRefaby śledzić poprzedni stan.

W useEffect, aktualizujemy useRefbieżącą wartość za każdym razem, gdy inputValuejest aktualizowana, wprowadzając tekst w polu wejściowym.