ReactJS - Verwendung von useCallback: Ein Leitfaden für Anfänger

Hallo, zukünftige React-Entwickler! Heute tauchen wir in eines der leistungsstarken Hooks von React ein: useCallback. Keine Sorge, wenn du neu im Programmieren bist; ich werde dich durch dieses Konzept Schritt für Schritt führen, genau wie ich es in den letzten Jahren für viele Schüler getan habe. Lassen wir uns gemeinsam auf diese aufregende Reise begeben!

Was ist useCallback?

Bevor wir uns den Details widmen, lassen Sie uns verstehen, was useCallback eigentlich ist. Stell dir vor, du backst Kekse (ich liebe diese Analogie, denn wer liebt Kekse nicht?). Du hast ein spezielles Rezept, das du jedes Mal verwendest. useCallback ist so, als hättest du dieses Rezept einmal aufgeschrieben und verwendest es immer wieder, wenn du Kekse backen möchtest, anstatt es jedes Mal neu zu erinnern.

In React-Begriffen ist useCallback ein Hook, der uns dabei hilft, die Leistung unserer Anwendung zu optimieren, indem er Funktionen memoisiert (sich erinnert).

Signature von useCallback

Schauen wir uns an, wie wir useCallback schreiben:

const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);

Keine Panik! Ich weiß, dass das vielleicht komplex aussieht, aber wir werden es auseinandernehmen:

1. memoizedCallback: Das ist die Funktion, die useCallback zurückgibt.
2. () => { doSomething(a, b); }: Das ist die Funktion, die wir memoisieren möchten.
3. [a, b]: Das wird als Abhängigkeitsarray bezeichnet. Es sagt React, wann unsere Funktion neu erstellt werden soll.

Stell es dir so vor: Du sagst React, "Hey, erinnere dich an diese Funktion für mich und gib mir nur eine neue, wenn a oder b sich ändert."

Verwendung von useCallback

Nun sehen wir useCallback in Aktion mit einem einfachen Beispiel:

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

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

const increment = useCallback(() => {
setCount(c => c + 1);
}, []);

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

Lassen wir das auseinandernehmen:

1. Wir importieren useCallback von React.
2. Wir erstellen eine Zustandsvariable count mit useState.
3. Wir definieren eine increment-Funktion mit useCallback. Diese Funktion erhöht unsere Anzahl um 1.
4. Das leere Array [] als zweiter Parameter bedeutet, dass diese Funktion niemals geändert wird.
5. Wir rendern unsere Anzahl und einen Knopf, der increment aufruft, wenn er geklickt wird.

Anwendungsfälle von useCallback

Nun fragst du dich vielleicht, "Wann sollte ich useCallback verwenden?" Great question! Lassen wir uns einige häufige Szenarien ansehen:

1. Übergabe von Callbacks an optimierte Kindkomponenten

Stell dir vor, du hast eine Kindkomponente, die in React.memo eingewickelt ist (mach dir keine Sorgen, wir werden das in zukünftigen Lektionen behandeln). Du möchtest eine Funktion an diese Komponente übergeben:

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

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

const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);

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

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

Hier stellt useCallback sicher, dass handleClick nur geändert wird, wenn count sich ändert, was unnötige Neuanzeigen von ChildComponent verhindert.

2. In useEffect-Abhängigkeiten

useCallback ist auch nützlich, wenn eine Funktion eine Abhängigkeit eines useEffect-Hooks ist:

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

function DataFetcher() {
const [data, setData] = useState(null);

const fetchData = useCallback(() => {
// Stell dir vor, das ist das Abrufen von Daten aus einer API
setTimeout(() => setData("New Data!"), 1000);
}, []);

useEffect(() => {
fetchData();
}, [fetchData]);

return <div>{data ? data : "Loading..."}</div>;
}

In diesem Beispiel stellt useCallback sicher, dass fetchData nicht bei jeder Anzeige geändert wird, was verhindert, dass der Effekt unnötig ausgeführt wird.

Vorteile und Nachteile

Lassen wir die Vor- und Nachteile von useCallback zusammenfassen:

Vorteile	Nachteile
Verhindert unnötige Neuanzeigen	Kann den Code komplexer machen
Optimiert die Leistung für Kindkomponenten	Übermäßige Verwendung kann zu Leistungseinbußen führen
Nützlich in useEffect-Abhängigkeiten	Erfordert Verständnis von Schließungen und Memoisierung
Hilft bei der Erstellung stabiler Callbacks	Bringt möglicherweise keine erheblichen Vorteile in einfachen Komponenten

Fazit

Whew! Wir haben heute viel Boden cobered. useCallback ist ein leistungsstarkes Werkzeug in deinem React-Werkzeugkasten, aber wie jedes Werkzeug ist es wichtig, es weise zu verwenden. Während du deine React-Reise fortsetzt, wirst du eine Intuition dafür entwickeln, wann du useCallback verwenden sollst.

Erinnere dich daran, Optimierung ist großartig, aber klare, lesbare Code ist noch besser. Dränge dich nicht, useCallback überall zu verwenden – verwende es nur, wenn es für deine Anwendung sinnvoll ist.

Weiter üben, bleib neugierig und viel Spaß beim Programmieren! Und erinnere dich daran, genau wie das Perfektionieren eines Keksrezepts, erfordert das Beherrschen von React Zeit und Geduld. Du schaffst das!

Credits: Image by storyset