Verfolgen Sie, wie oft eine Komponente mit useRef() - React gerendert wurde

Lassen Sie uns zunächst darüber nachdenken, wie ein Anfänger versuchen könnte, dieses Problem anzugehen.

Um mitzumachen, wenn Sie möchten, erstellen Sie ein neues React-Projekt und fügen Sie so viel Code in Ihre App.jsx oder eine beliebige Komponente Ihrer Wahl ein und entfernen Sie außerdem alles aus index.css und App.css:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>The component has rendered {0} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

export default App;

Die Vorschau sieht jetzt so aus:

Im obigen Code habe ich eine Zustandsvariable namens „count“ erstellt, die beim Klicken auf die Schaltfläche um 1 erhöht wird. Bei der Zählung handelt es sich hier um eine zusätzliche Zustandsvariable, die hier keine Wirkung hat, Ihnen aber dabei hilft, die Dinge besser zu verstehen. Dieser Code sollte Sie nicht überfordern, wenn Sie zuvor in React codiert haben.

Also kommen wir zum Hauptteil...

1. Verwenden der Statusvariablen

Dies ist der erste Ansatz, der den meisten von uns in den Sinn kommt, wie das Erstellen einer Zustandsvariablen, die mit 0 initialisiert und bei jedem Rendern einer Komponente um 1 erhöht wird.

Ihre App-Komponente sieht folgendermaßen aus:

function App() {
  const [count, setCount] = useState(0);
  const [numberOfTimesRendered, setNumberOfTimesRendered] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
    setNumberOfTimesRendered(numberOfTimesRendered + 1);
  };

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

Dieser Ansatz wird hier gut funktionieren, weist jedoch viele Mängel auf. Die Komponente wird im Idealfall nicht nur einmal gerendert, wenn wir auf die Schaltfläche „Rendern erzwingen“ klicken. Wenn wir auf die Schaltfläche klicken, erhöht sich der Zählwert um 1, was dazu führt, dass die Komponente erneut gerendert wird, da wir alle wissen, dass Änderungen in einer Zustandsvariablen dazu führen, dass eine Komponente erneut gerendert wird. Aber es endet hier nach einem erneuten Rendern durch setCount(count 1), setNumberOfTimesRendered(numberOfTimesRendered 1) wird ausgelöst und bewirkt, dass die Komponente erneut gerendert wird.

Der Wert „numberOfTimesRendered“ erhöht sich um 1, aber jedes Mal, wenn wir auf die Schaltfläche „Rendern erzwingen“ klicken, wird die Komponente zweimal gerendert, was zeigt, warum die Verwendung der Statusvariablen für diese Art von Angelegenheit hier nicht der beste, sondern der schlechteste Ansatz ist.

2. Globale Variable verwenden

Ein anderer Ansatz, den man sich vorstellen kann, besteht darin, eine globale Variable außerhalb des Komponentenlebenszyklus zu definieren und sie um 1 zu erhöhen, wenn die Komponente erneut gerendert wird, etwa so:

let numberOfTimesRendered = 0;

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  numberOfTimesRendered += 1;

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

Dieser Ansatz funktioniert gut und verursacht keine zusätzlichen Renderings. Dies scheint die beste Lösung dafür zu sein, ist es aber nicht, da Sie nichts außerhalb des Komponentenlebenszyklus definieren sollten.

3. Verwendung lokaler Variablen

Man kann sich auch den gleichen Ansatz wie oben vorstellen, aber mit einer lokalen Variablen innerhalb der Komponente, aber lassen Sie mich Ihnen sagen, dass es keinen schlechteren Ansatz als diesen gibt, denn jedes Mal, wenn die Komponente gerendert wird, wird die lokale Variable auf 0 neu initialisiert und wir verlieren jedes Mal den Überblick über die vorherigen Renderings.

4. Verwendung des useRef()-Hooks

Jetzt implementieren wir dies mit useRef().

Wie die meisten von uns wissen, ist useRef ein Hook, um Elemente innerhalb des Doms zu referenzieren und sie manuell zu bearbeiten, aber useRef ist nicht nur darauf beschränkt. Es kann auch Werte enthalten und verwendet werden, um eine Variable über den gesamten Lebenszyklus des Komponentenrenderings hinweg persistent zu halten.

Wenn Sie einen Wert in der useRef speichern, wird er vom Rendering-Lebenszyklus der React-Komponente nicht beeinflusst, der Wert bleibt über eine beliebige Anzahl von erneuten Renderings hinweg bestehen. Die Implementierung sieht folgendermaßen aus:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>The component has rendered {0} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

export default App;

numberOfTimesRendered.current gibt den aktuellen Wert an, der in der Referenzvariablen gespeichert ist. Dieser Ansatz verursacht keine zusätzlichen Neu-Renderings. Das heißt zwar nicht, dass er der beste ist, aber meines Wissens nach einer der optimalsten Ansatz.

---

Damit ist dieser Artikel abgeschlossen. Offen für Feedback und wenn Sie weitere Erläuterungen benötigen, kommentieren Sie bitte unten und ich werde mein Bestes tun, um Ihnen zu helfen.

Vernetzen Sie sich mit mir auf X und LinkedIn!?✨

Das obige ist der detaillierte Inhalt vonVerfolgen Sie, wie oft eine Komponente mit useRef() - React gerendert wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!