Beherrschen Sie die DOM-Manipulation und -Leistung mit React useRef Hook

React useRef Hook verstehen: From Zero to Hero

Einführung

Beim Erstellen von Anwendungen mit React ist die Verwaltung des Komponentenstatus und der Komponentenleistung eine der größten Herausforderungen für Entwickler. Der useState-Hook von React wird häufig für die Statusverwaltung verwendet, kann jedoch manchmal zu unnötigen erneuten Renderings führen. Hier wird der useRef-Hook von unschätzbarem Wert. Es ermöglicht uns, direkt mit dem DOM zu interagieren, Änderungen zu verfolgen und Werte zu speichern, ohne ein erneutes Rendern von Komponenten auszulösen.

In diesem Leitfaden werden wir den useRef-Hook Schritt für Schritt erkunden und dabei seinen Zweck, seine Vorteile und häufige Anwendungsfälle behandeln. Am Ende wird sogar ein Anfänger in der Lage sein, useRef souverän zu implementieren, um verschiedene Herausforderungen in seinen React-Anwendungen zu lösen.

Was ist React useRef Hook?

Der useRef-Hook ist Teil der Kern-Hooks-API von React. Es gibt ein veränderliches Objekt mit einer .current-Eigenschaft zurück, das zum Speichern eines beliebigen Werts verwendet werden kann. Im Gegensatz zum Status führt die Änderung des .current-Werts nicht dazu, dass die Komponente erneut gerendert wird.

Hier ist die einfache Syntax für useRef:

const myRef = useRef(initialValue);

• initialValue: Der Anfangswert des useRef-Objekts.
• myRef.current: Die Eigenschaft, die den Referenzwert speichert.

Warum useRef verwenden?

• Unnötige erneute Renderings vermeiden: Zustandsänderungen lösen in React erneute Renderings aus, aber mit useRef können Sie Werte zwischen Renderings beibehalten, ohne Aktualisierungen zu verursachen.
• Zugriff auf DOM-Elemente: Oft müssen wir mit nativen DOM-Elementen interagieren, beispielsweise um ein Eingabefeld zu fokussieren. useRef bietet eine effiziente Möglichkeit, dies zu tun.
• Statusänderungen verfolgen: Sie können Werte wie den vorherigen Status oder Render-Zählungen verfolgen, die über Renderings hinweg bestehen bleiben.

Problem: Der Reaktionsstatus führt zu unnötigen erneuten Renderings

In React lösen Zustandsänderungen ein erneutes Rendern aus. Bei leistungskritischen Anwendungen kann übermäßiges erneutes Rendern die App verlangsamen. Nehmen wir ein Beispiel.

Beispielproblem: Status, der erneute Renderings verursacht

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log("Button clicked");
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

In diesem Beispiel führt das Klicken auf die Schaltfläche dazu, dass die gesamte Komponente neu gerendert wird, auch wenn Sie möglicherweise nur bestimmte Daten wie die Anzahl aktualisieren möchten.

Lösung: Verwenden Sie useRef, um erneutes Rendern zu verhindern

Mit useRef können wir Werte speichern, ohne unnötige Neu-Renderings zu verursachen.

Siehe Beispiel zur Lösung des Problems

const MyComponent = () => {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1;
    console.log("Button clicked, count: ", countRef.current);
  };

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

In diesem Beispiel erhöhen wir countRef.current, ohne ein erneutes Rendern auszulösen, da React nicht erneut rendert, wenn sich useRef ändert.

Zugriff auf DOM-Elemente mit useRef

Reacts deklarative Natur abstrahiert direkte DOM-Manipulationen. Aber es gibt Zeiten, in denen wir direkt auf DOM-Elemente zugreifen müssen, etwa um ein Eingabefeld zu fokussieren oder zu einem bestimmten Abschnitt zu scrollen. Hier kommt useRef zur Rettung.

Beispiel: Fokussieren eines Eingabefelds

const myRef = useRef(initialValue);

In diesem Beispiel weisen wir inputRef dem ref-Attribut des Eingabefelds zu. Die handleFocus-Funktion wird aufgerufen, wenn auf die Schaltfläche geklickt wird, sodass wir das Eingabefeld mithilfe von inputRef.current.focus() programmgesteuert fokussieren können.

Statusänderungen ohne erneutes Rendern verfolgen

Manchmal müssen Sie Werte im Zeitverlauf verfolgen, ohne ein erneutes Rendern auszulösen. Ein häufiger Anwendungsfall besteht darin, den vorherigen Zustand einer Variablen zu verfolgen.

Beispiel: Vorherigen Status mit useRef verfolgen

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log("Button clicked");
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

In diesem Beispiel verwenden wir useRef, um den vorherigen Wert zu speichern. Die Komponente wird mit dem aktuellen Wert gerendert, aber der vorherige Wert wird in prevValueRef.current gespeichert und löst kein erneutes Rendern aus.

Verursacht useRef ein erneutes Rendern?

Nein, das Ändern eines useRef-Objekts führt nicht zu einem erneuten Rendern. Dieses Verhalten macht useRef perfekt zum Speichern von Werten, die Sie über Renderings hinweg beibehalten müssen, aber nicht als Teil der Rendering-Logik verwenden möchten.

Beispiel: Kein erneutes Rendern bei useRef-Änderung

const MyComponent = () => {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1;
    console.log("Button clicked, count: ", countRef.current);
  };

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

Obwohl wir in diesem Beispiel renderCountRef.current bei jedem erneuten Rendern ändern, führt dies nicht zu zusätzlichen erneuten Renderings.

Erweitertes Beispiel: useRef zum Verfolgen von Klickereignissen

Lassen Sie uns ein fortgeschritteneres Beispiel erstellen, in dem wir zählen, wie oft auf eine Schaltfläche geklickt wird, ohne dass es zu erneuten Renderings kommt.

const FocusInput = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

In diesem Fall wird die Klickanzahl der Schaltfläche über clickCountRef.current verfolgt, aber React rendert die Komponente nicht erneut.

Häufige Fehler mit useRef

Vergessen, die Referenz zu initialisieren

Denken Sie immer daran, Ihre Referenz mit einem Wert oder Null zu initialisieren.

const PreviousStateExample = ({ value }) => {
  const prevValueRef = useRef();

  useEffect(() => {
    prevValueRef.current = value;
  }, [value]);

  const prevValue = prevValueRef.current;

  return (
    <div>
      <p>Current Value: {value}</p>
      <p>Previous Value: {prevValue}</p>
    </div>
  );
};

Verwenden von useRef zum Speichern des Komponentenstatus

Verwenden Sie useRef nicht als Ersatz für useState. useRef sollte nur für Werte verwendet werden, die keinen Einfluss auf das Rendering haben. Wenn der Wert die Anzeige der Komponente beeinflusst, verwenden Sie useState.

const NoRenderOnRefChange = () => {
  const renderCountRef = useRef(0);

  useEffect(() => {
    renderCountRef.current += 1;
    console.log("Component re-rendered:", renderCountRef.current);
  });

  return <p>Check the console for render count</p>;
};

Häufig gestellte Fragen (FAQs)

1. Wann sollte ich useRef anstelle von useState verwenden?

Verwenden Sie useRef, wenn Sie einen veränderlichen Wert speichern müssen, ohne ein erneutes Rendern auszulösen. Für Werte, die sich auf die Benutzeroberfläche auswirken, verwenden Sie useState.

2. Kann ich useRef zum Speichern des vorherigen Status verwenden?

Ja, Sie können useRef verwenden, um frühere Werte zu speichern, ohne erneute Renderings auszulösen. Denken Sie jedoch daran, die Referenz in useEffect zu aktualisieren.

3. Verursacht das Ändern von useRef ein erneutes Rendern?

Nein, das Ändern von useRef.current führt nicht zu erneuten Renderings. Deshalb ist es ideal für Szenarien, in denen Sie unnötige Updates vermeiden möchten.

4. Wie greife ich mit useRef auf DOM-Elemente zu?

Weisen Sie useRef dem ref-Attribut eines DOM-Elements zu, dann können Sie über ref.current auf das DOM-Element zugreifen.

Abschluss

Der useRef-Hook ist ein vielseitiges und leistungsstarkes Tool in React, mit dem Entwickler Werte speichern, vorherige Zustände verfolgen und mit DOM-Elementen interagieren können, ohne dass es zu erneuten Renderings kommt. Von der Verwaltung der Klickzahlen bis zur Fokussierung von Eingaben eröffnet useRef Möglichkeiten zur Leistungsoptimierung und Bereitstellung saubererer, effizienterer Lösungen. Mit diesem Leitfaden verfügen Sie nun über das Wissen, um useRef in verschiedenen Szenarien zu implementieren, von Anwendungsfällen für Einsteiger bis hin zu fortgeschritteneren Anwendungen.

Das obige ist der detaillierte Inhalt vonBeherrschen Sie die DOM-Manipulation und -Leistung mit React useRef Hook. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!