Reageerhaak useRef_

Met de useRefHook kunt u waarden behouden tussen renders.

Het kan worden gebruikt om een ​​veranderlijke waarde op te slaan die niet opnieuw wordt weergegeven wanneer deze wordt bijgewerkt.

Het kan worden gebruikt om rechtstreeks toegang te krijgen tot een DOM-element.

Veroorzaakt geen herweergave

Als we zouden proberen te tellen hoe vaak onze applicatie wordt weergegeven met behulp van de useStateHook, zouden we in een oneindige lus terechtkomen omdat deze Hook zelf een re-render veroorzaakt.

Om dit te voorkomen, kunnen we de useRefHook gebruiken.

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()retourneert slechts één artikel. Het retourneert een Object genaamd current.

Wanneer we initialiseren useRef, stellen we de beginwaarde in: useRef(0).

Voer dit uit op uw computer en probeer de invoer in te voeren om het aantal toepassingsrendementen te zien toenemen.

DOM-elementen openen

Over het algemeen willen we React alle DOM-manipulatie laten afhandelen.

Maar er zijn enkele gevallen waarin useRefhet kan worden gebruikt zonder problemen te veroorzaken.

In React kunnen we een refattribuut aan een element toevoegen om het rechtstreeks in de DOM te openen.

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

Statuswijzigingen bijhouden

De useRefHook kan ook worden gebruikt om eerdere statuswaarden bij te houden.

Dit komt omdat we useRefwaarden tussen renders kunnen behouden.

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

Deze keer gebruiken we een combinatie van useState, useEffect, en useRefom de vorige status bij te houden.

In de useEffect, werken we de useRefhuidige waarde bij elke keer dat de inputValuewordt bijgewerkt door tekst in het invoerveld in te voeren.