Was ist „useCallback' in React?

useCallback ist ein React Hook, der Ihnen hilft, Ihre Komponente zu optimieren, indem er sich Callback-Funktionen merkt. Dadurch wird sichergestellt, dass die Funktionsreferenz bei allen Renderings gleich bleibt, sofern sich ihre Abhängigkeiten nicht ändern. Dies ist besonders nützlich, wenn Sie eine Funktion als Requisite an untergeordnete Komponenten übergeben, da dadurch unnötige erneute Renderings oder erneute Ausführungen der useEffect-Hooks der untergeordneten Komponenten verhindert werden.

---

Warum useCallback verwenden?

1. Unnötiges erneutes Rendern verhindern:
   Wenn Sie eine Rückruffunktion als Requisite an eine untergeordnete Komponente übergeben, wird diese Funktion bei jedem Rendern neu erstellt. Dies kann dazu führen, dass untergeordnete Komponenten unnötigerweise neu gerendert werden.

2. Stabile Funktionsreferenzen:
   Wenn eine untergeordnete Komponente useEffect verwendet und von der Callback-Requisite abhängt, führt eine instabile Funktionsreferenz dazu, dass useEffect unnötigerweise erneut ausgeführt wird.

3. Leistung optimieren:
   Hilft, teure Berechnungen oder Vorgänge zu vermeiden, die durch die häufige Neuerstellung derselben Funktion verursacht werden.

---

Syntax

const memoizedCallback = useCallback(
  () => {
    // Your logic here
  },
  [dependencies] // Array of dependencies
);

• Rückruffunktion: Die Funktion, die Sie sich merken möchten.
• Abhängigkeiten: Die Werte, von denen die Funktion abhängt. Sollten sich diese ändern, wird die Funktion neu erstellt.

---

Beispiel ohne useCallback

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

const Child = ({ callback }) => {
  useEffect(() => {
    callback(); // Runs whenever the `callback` reference changes
  }, [callback]);

  return <div>Child Component</div>;
};

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

  const callback = () => {
    console.log("Callback called");
  };

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child callback={callback} />
    </div>
  );
};

export default Parent;

• Problem: Auch wenn sich die Anzahl ändert, wird der useEffect der untergeordneten Komponente erneut ausgeführt, da die Rückruffunktion jedes Mal neu erstellt wird, wenn die übergeordnete Komponente gerendert wird.

---

Behebung mit useCallback

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

const Child = ({ callback }) => {
  useEffect(() => {
    callback(); // Runs only when `callback` changes
  }, [callback]);

  return <div>Child Component</div>;
};

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

  const callback = useCallback(() => {
    console.log("Callback called");
  }, []); // Dependencies are empty, so the callback is memoized

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child callback={callback} />
    </div>
  );
};

export default Parent;

• Lösung: Jetzt bleibt die Rückrufreferenz stabil, sodass der useEffect der untergeordneten Komponente nicht unnötig erneut ausgeführt wird.

---

Wann sollte useCallback verwendet werden?

• Wenn Sie Funktionen als Requisiten an untergeordnete Komponenten übergeben.
• Wenn die untergeordnete Komponente React.memo() zur Optimierung verwendet.
• Wenn die untergeordnete Komponente von useEffect abhängt, das die Funktion verwendet.

---

Häufiger Missbrauch

Verwenden Sie nicht useCallback für jede Funktion. Es ist nur dann von Vorteil, wenn:

1. Die Funktion wird als Requisite an ein Kind übergeben.
2. Die Funktion ist rechenintensiv neu zu erstellen.

Das obige ist der detaillierte Inhalt vonWas ist „useCallback' in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!