Haken useRefreagieren

Mit dem useRefHook können Sie Werte zwischen Renderings beibehalten.

Es kann verwendet werden, um einen änderbaren Wert zu speichern, der bei einer Aktualisierung kein erneutes Rendern verursacht.

Es kann verwendet werden, um direkt auf ein DOM-Element zuzugreifen.

Verursacht keine erneuten Renderings

Wenn wir versuchen würden zu zählen, wie oft unsere Anwendung mit dem useStateHook rendert, würden wir in einer Endlosschleife gefangen sein, da dieser Hook selbst ein erneutes Rendern verursacht.

Um dies zu vermeiden, können wir den useRefHook verwenden.

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()gibt nur einen Artikel zurück. Es gibt ein Objekt namens zurück current.

Bei der Initialisierung useRefsetzen wir den Anfangswert: useRef(0).

Führen Sie dies auf Ihrem Computer aus und versuchen Sie, die Eingabe einzugeben, um zu sehen, wie sich die Renderanzahl der Anwendung erhöht.

Zugriff auf DOM-Elemente

Im Allgemeinen wollen wir React die gesamte DOM-Manipulation überlassen.

Aber es gibt einige Fälle, in denen useRefes verwendet werden kann, ohne Probleme zu verursachen.

In React können wir refeinem Element ein Attribut hinzufügen, um direkt im DOM darauf zuzugreifen.

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

Statusänderungen verfolgen

Der useRefHook kann auch verwendet werden, um vorherige Statuswerte zu verfolgen.

Dies liegt daran, dass wir in der Lage sind, useRefWerte zwischen dem Rendern beizubehalten.

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

Dieses Mal verwenden wir eine Kombination aus useState, useEffect, und useRef, um den vorherigen Status zu verfolgen.

In useEffectaktualisieren wir den useRefaktuellen Wert jedes Mal, wenn inputValueaktualisiert wird, indem wir Text in das Eingabefeld eingeben.