UseCallback in Reactjs verstehen

Der useCallback-Hook speichert die Funktion selbst, nicht ihren Rückgabewert. useCallback speichert die Funktionsreferenz zwischen.

Eine innerhalb einer Komponente deklarierte Funktion wird bei jedem Rendern neu erstellt, ähnlich wie eine Variable. Der Unterschied besteht darin, dass es jedes Mal mit einer anderen Referenz gerendert wird. Also,

• Ein von dieser Funktion abhängiger useEffect wird bei jedem Rendern erneut ausgeführt.
• Ähnliches passiert mit untergeordneten Komponenten.

Ein von dieser Funktion abhängiger useEffect wird bei jedem Rendern erneut ausgeführt:

import React, { useState, useEffect, useCallback } from 'react';

// Parent Component
const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  // Function declared inside the component
  const handleClick = () => {
    setCount(count + 1);
  };

  // useEffect depending on handleClick
  useEffect(() => {
    console.log("handleClick changed, running useEffect");
  }, [handleClick]);

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

// Child Component
const ChildComponent = React.memo(({ handleClick }) => {
  console.log("ChildComponent re-rendered");
  return <button onClick={handleClick}>Child Increment</button>;
});

export default ParentComponent;

Ähnliches passiert mit untergeordneten Komponenten:

Wenn wir eine Komponente mit teurer oder „langsamer“ Rendering-Logik als untergeordnetes Element einer anderen Komponente haben, werden jedes Mal, wenn die übergeordnete Komponente rendert, auch alle untergeordneten Komponenten erneut gerendert.

Um diese unnötigen erneuten Renderings zu verhindern, können wir React.memo verwenden. Diese Komponente höherer Ordnung speichert die untergeordnete Komponente im Cache und stellt so sicher, dass sie nur dann erneut gerendert wird, wenn sich ihre Requisiten tatsächlich ändern. Beim Übergeben von Funktionen als Requisiten gibt es jedoch einen kleinen Haken, der dazu führt, dass das untergeordnete Element erneut rendert, auch wenn dies nicht der Fall sein sollte.

Das Problem mit Funktionsreferenzen

Stellen Sie sich vor, wir hätten eine SlowComponent als Kind von App. In App haben wir einen Zustand, der sich beim Klicken auf die Schaltfläche ändert und ein erneutes Rendern der App auslöst. Obwohl wir die Requisiten von SlowComponent nicht ändern, wird es dennoch bei jedem Klick neu gerendert.

Warum? Bei jedem Rendern wird die handleClick-Funktion mit einer neuen Referenz neu erstellt, die React als geänderte Requisite interpretiert, was dazu führt, dass SlowComponent erneut gerendert wird. Um dies zu beheben, verwenden wir den useCallback-Hook, um die Referenz der Funktion über alle Renderings hinweg zwischenzuspeichern.

Lösung mit useCallback

Indem wir handleClick in useCallback einschließen, weisen wir React an, es nur dann neu zu erstellen, wenn sich bestimmte Abhängigkeiten ändern. Hier ist die Syntax:

const cachedFn = useCallback(fn, [dependencies]);

• fn: Dies ist die Funktionsdefinition, die Sie zwischenspeichern möchten. Es kann Argumente akzeptieren und jeden Wert zurückgeben.
• Abhängigkeiten: Dies ist eine Reihe von Abhängigkeiten. React erstellt fn neu, wenn sich eine Abhängigkeit ändert. Beim ersten Rendern erstellt React die Funktion und speichert sie zwischen. Bei nachfolgenden Renderings wird die zwischengespeicherte Funktion zurückgegeben, solange sich die Abhängigkeiten nicht geändert haben, um sicherzustellen, dass sie über eine stabile Referenz verfügt.

Anwendung von useCallback in unserem Beispiel
Werfen wir einen Blick darauf, wie wir useCallback verwenden würden, um unsere App-Komponente zu optimieren:

import React, { useState, useCallback } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState("");

  // Wrapping handleClick with useCallback to cache its reference
  const handleClick = useCallback(() => {
    setValue("Kunal");
  }, [setValue]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
      <SlowComponent handleClick={handleClick} />
    </div>
  );
};

const SlowComponent = React.memo(({ handleClick }) => {

// Intentially making the component slow
  for (let i = 0; i < 1000000000; i++) {}
  console.log("SlowComponent re-rendered");
  return <button onClick={handleClick}>Click me in SlowComponent</button>;
});

export default App;

Wann sollte useCallback verwendet werden?

• Wenn Sie Event-Handler für ein Element in Ihrer Komponente definiert haben, schließen Sie diese in einen useCallback ein, um unnötige Neuerstellungen von Event-Handlern zu vermeiden.
• Wenn Sie eine Funktion innerhalb eines useEffect aufrufen, übergeben Sie die Funktion normalerweise als Abhängigkeit. Um zu vermeiden, dass useEffect bei jedem Rendern unnötig verwendet wird, schließen Sie die Funktionsdefinition in einen useCallback ein.
• Wenn Sie einen benutzerdefinierten Hook schreiben und dieser eine Funktion zurückgibt, wird empfohlen, ihn in einen useCallback einzuschließen. Die Benutzer müssen sich also keine Gedanken über die Optimierung des Hooks machen, sondern können sich auf ihren eigenen Code konzentrieren.

Das obige ist der detaillierte Inhalt vonUseCallback in Reactjs verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!