Einführung in React useCallBack()

Beim Erstellen einer Website mit React ist es wichtig zu berücksichtigen, wie schnell sie lädt und wie schnell Benutzer damit interagieren können. Eine Möglichkeit, eine React-Website schneller zu machen, besteht darin, zu verhindern, dass sie unnötige Arbeit leistet, wie etwa das erneute Rendern von Teilen der Seite, die sich nicht geändert haben.

Die FunktionuseCallback() in React hilft uns dabei, indem sie sich die von uns definierten Funktionen merkt und sie nur bei Bedarf neu erstellt.Dadurch kann die Website für Benutzer schneller und reaktionsfähiger werden. React ist laut einer Stack Overflow-Umfrage im selben Jahr die beliebteste Front-End-JavaScript-Bibliothek, was darauf hindeutet, dass useCallback() in der Branche wahrscheinlich weit verbreitet ist.

In diesem Artikel erklären wir, was useCallBack() in React ist und wie wir es in unserem React-Code verwenden, um die Leistung zu verbessern.

Was ist useCallBack in React?

useCallback() ist eine von React bereitgestellte Hook-Funktion, die zum Speichern einer Funktion verwendet wird. Mit anderen Worten: Es hilft, die Leistung einer Komponente zu optimieren, indem unerwünschtes erneutes Rendern vermieden wird.

Wenn sich in React der Status oder die Requisite einer Komponente ändert, wird die Komponente neu gerendert, um die aktualisierten Werte widerzuspiegeln. Dieser Vorgang ist rechenintensiv und kann bei unsachgemäßer Handhabung die Leistung der Anwendung beeinträchtigen. Hier bietet sich useCallback() an.

Mit useCallback() können Benutzer eine Funktion auswendig lernen, was bedeutet, dass sie nur dann neu definiert wird, wenn sich ihre Abhängigkeiten ändern. Dies verhindert unnötiges erneutes Rendern von Komponenten und optimiert so die Leistung der Anwendung.

Hier ist ein Beispiel -

const memoizedCallback = useCallback(

() => {

doSomething(a, b);

},

[a, b],

);

Der Einstieg in React durch Tutorials ist zwar eine tolle Möglichkeit, die Teilnahme an einem dynamischen Kurs zum Einstieg in die Entwicklung kann Ihnen jedoch erheblich dabei helfen, Ihre Fähigkeiten zu aktualisieren. Schauen Sie sich den Kurs „Executive Post Graduate Program in Software Development – ​​Specialization in Full Stack Development“ von upGrad bis kickstart an!

Vorteile der Verwendung von useCallBack()

Hier sind einige Vorteile der Verwendung von React useCallBack() –

• useCallback() kann dazu beitragen, dass React-Anwendungen schneller ausgeführt werden, indem unnötige Aktualisierungen von Komponenten verhindert werden.
• Wenn eine Komponente viele Daten abruft und diese als Diagramm anzeigt, kann sie von useCallback() profitieren.
• Wenn die übergeordnete Komponente des Diagramms aktualisiert wird, die Änderungen sich jedoch nicht auf das Diagramm auswirken, besteht keine Notwendigkeit, es zu aktualisieren und die Daten erneut abzurufen.
• Indem wir useCallback() verwenden, um die Funktion zum Abrufen der Daten zu speichern, können wir unnötige Aktualisierungen vermeiden und die Anwendung schneller und reibungsloser machen.
• Diese Optimierung kann das Benutzererlebnis verbessern, da die Anwendung schneller und effizienter arbeitet.

Schauen Sie sichdie Softwareentwicklungskurse von upGrad an , um sich weiterzubilden.

Syntax und Parameter von useCallBack()

const memoizedCallback = useCallback(

() => {

etwas tun();

},

[Abhängigkeit1, Abhängigkeit2]

);

Im Beispiel speichert der useCallback() -Hook die Funktion doSomething(), was bedeutet, dass er die zuvor erstellte Version zwischenspeichert. Die zwischengespeicherte Funktion wird nur bei nachfolgenden Renderings verwendet, es sei denn, der Wert vondependency1 oder dependency2ändert sich.

Wenn sich eine dieser Abhängigkeiten ändert, wird eine neue Version der FunktiondoSomething() erstellt und die zwischengespeicherte Version durch die neue ersetzt.Dies hilft, die Leistung der Anwendung zu optimieren, indem unnötige Funktionserstellungen und erneute Renderings verhindert werden.

Unterschied zwischen useMemo() und useCallBack()

useCallback und useMemo sind React-Hooks, die die Leistung einer React-Anwendung verbessern können, indem sie Werte speichern. Beide Hooks nehmen eine Funktion als Argument und geben eine gespeicherte Version dieser Funktion zurück.

Hier ist der Unterschied zwischen den beiden:

Szenarien für die Verwendung von useCallBack()

Hier sind die Szenarien, in denen useCallBack() verwendet werden kann:

Optimierung untergeordneter Komponenten

useCallback React optimiert untergeordnete Komponenten, die auf Referenzgleichheit angewiesen sind, um unnötige Renderings zu vermeiden, insbesondere bei der Übergabe von Rückrufen an diese untergeordneten Komponenten.

Verhindern unnötiger Renderings

React useCallback ist besonders nützlich, wenn Sie eine Komponente mit einem untergeordneten Element haben, das wiederholt gerendert wird, ohne dass es benötigt wird. Sie können eine Rückruffunktion und ein Abhängigkeitsarray an useCallback übergeben , um unnötige Renderings zu verhindern.

Nutzen Sie Ihre Chance, die Funktion useCallBack() mit Hilfe des Full Stack Software Development Bootcamp- Kurses von upGrad im Detail zu verstehen.

Entdecken Sie unsere beliebten Software-Engineering-Kurse

AnwendungsbeispieleCallBack()

Hier sind einige Beispiele für die Implementierung des useCallBack()-Hooks.

useCallBack-Beispiel 1

Wenn eine übergeordnete Komponente eine Funktion als Requisite an eine untergeordnete Komponente weitergibt, kann ein häufiges erneutes Rendern der übergeordneten Komponente dazu führen, dass die untergeordnete Komponente unnötigerweise erneut gerendert wird. In solchen Fällen kann die Verwendung von useCallback zum Speichern der Funktion dazu beitragen, diese unnötigen erneuten Renderings zu verhindern.

import React, { useCallback } from 'react';

Funktion ParentComponent() {

const handleButtonClick = useCallback(() => {

console.log('Schaltfläche angeklickt');

}, []);

zurückkehren (

<ChildComponent onClick={handleButtonClick} />

);

}

function ChildComponent({ onClick }) {

zurückkehren (

<button onClick={onClick}>Klick mich</button>

);

}

useCallBack-Beispiel 2

Angenommen, Sie verfügen über eine Funktion, die komplexe Berechnungen für einen großen Datensatz durchführt. Wenn diese Funktion häufig aufgerufen wird und ihre Ausführung lange dauert, kann es zu Leistungsproblemen in Ihrer Anwendung kommen. In diesem Szenario können Sie useCallback verwenden, um die Funktion zu speichern und eine unnötige erneute Ausführung der Berechnung zu verhindern.

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

Funktion ParentComponent() {

const [data, setData] = useState([]);

const ProcessData = useCallback(() => {

const processingData = „Verarbeitete Daten“;

return processingData;

}, [Daten]);

zurückkehren (

<ChildComponent processData={processData} />

);

}

Funktion ChildComponent({ ProcessData }) {

const result = processData();

zurückkehren (

<div>{result}</div>

);

}

React Performance-Optimierung mit useCallBack()

Ein useCallback-Hook ist ein leistungsstarkes Tool in React, mit dem Sie sich eine Funktion merken können, um sicherzustellen, dass sie nur neu erstellt wird, wenn eine ihrer Abhängigkeiten geändert wird. Dies ist insbesondere bei leistungsintensiven Funktionen, die häufig aufgerufen werden, von Vorteil. Schauen Sie sich das Beispiel unten an, um zu sehen, wie es verwendet werden kann –

import { useState, useEffect } from 'react';

Funktion App() {

const [word, setWord] = useState(“Bob”);

const say = () => console.log(`Dein Wort ist: ${word}`);

useEffect(() => {

sagen();

}, [sagen]);

return <div>Willkommen!</div>;

}

Das Beispiel zeigt, dass der useEffect-Hook von der Funktion say abhängig ist, was bedeutet, dass er nur bei einer Funktionsänderung ausgelöst werden sollte. Aufgrund der referenziellen Gleichheitsprüfungen von React wird diese Funktion jedoch immer als wahr ausgewertet, auch wenn keine tatsächliche Änderung vorliegt, was zu unnötigen Renderings führt.

Der useEffect-Rückruf wird bei jedem Rendern verwendet, was für die Leistung nicht geeignet ist. Eine Möglichkeit, dieses Problem zu lösen, besteht darin, die Funktion in den useEffect-Block zu verschieben. Dies wäre jedoch keine ideale Lösung, da Sie die Funktion an keinem anderen Ort verwenden könnten. Schauen Sie sich dieses Beispiel unten an –

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

Funktion App() {

const [word, setWord] = useState(“Bob”);

const say = () => console.log(`Dein Wort ist: ${word}`);

useEffect(() => {

sagen();

}, [sagen]);

return <div>Willkommen!</div>;

}

Eine andere Lösung besteht darin, den useCallback-Hook zu implementieren , indem die Funktion umschlossen wird. Es ist wichtig, sich daran zu erinnern, dass die Funktion „useCallback“ genau wie „useEffect“ ein Abhängigkeitsarray erfordert. Wenn die Funktion Variablen akzeptiert, können Benutzer diese mit dem Array übergeben. oder lassen Sie es leer. Da die Say-Funktion hier auf der Wortvariablen basiert, fügen wir sie in das Array ein.

importiere {useState, useEffect,useCallback} aus 'react'

Funktion App(){

const [word,setWord]=useState(“Bob”)

const say = useCallback(()=>console.log(`Dein Wort ist: ${word}`),[word])

useEffect(()=>{

sagen()

},[sagen])

return <div>Willkommen!</div>

}

Wann sollte useCallBack() nicht verwendet werden?

Während useCallback() in bestimmten Szenarien ein nützliches Tool zur Leistungsoptimierung ist, gibt es auch Zeiten, in denen es unnötig oder sogar schädlich ist. Hier sind einige Beispiele dafür, wann useCallback() nicht verwendet werden sollte:

• Wenn die Funktion als Requisite übergeben wird, handelt es sich bereits um eine reine Funktion, die nicht auf einen externen Zustand angewiesen ist.
• Wenn die Funktion als Requisite übergeben wird, verursacht sie keine Leistungsprobleme und wird nicht übermäßig oft aufgerufen.
• Wenn die Funktion als Requisite übergeben wird, wird sie an mehreren Stellen verwendet und muss jedes Mal neu erstellt werden, um unterschiedliche Verhaltensweisen oder Abhängigkeiten widerzuspiegeln.
• Wenn die Funktion als Requisite übergeben wird und Teil eines kleinen Komponentenbaums ist, wäre der Leistungsgewinn durch useCallback() vernachlässigbar.
• Wenn die Funktion als Requisite übergeben wird, wird sie als Ereignishandler verwendet und nur einmal aufgerufen.

In diesen Fällen kann die Verwendung von useCallback() aufgrund des Mehraufwands für die Erstellung und Pflege des gespeicherten Rückrufs tatsächlich zu einer Leistungseinbuße führen. Es ist wichtig, jeden Anwendungsfall sorgfältig zu prüfen und den potenziellen Nutzen gegen die potenziellen Kosten abzuwägen, bevor Sie entscheiden, ob Sie useCallback() verwenden oder nicht.

Gefragte Fähigkeiten in der Softwareentwicklung

Abschluss

Die Verwendung von useCallback kann ein leistungsstarkes Tool zur Optimierung der Leistung Ihrer React-Anwendung sein. Durch das Speichern von Funktionen können unnötige erneute Renderings vermieden werden, was zu einem reibungsloseren und effizienteren Benutzererlebnis führt. Es ist jedoch wichtig, useCallback mit Bedacht einzusetzen und die Szenarien zu verstehen, in denen es am effektivsten ist.

upGrad bietet einen Master of Science in Informatik an , der eine umfassende Informatikausbildung mit Schwerpunkt auf branchenrelevanten Fähigkeiten bietet. Dieses Programm richtet sich an alle Neulinge oder erfahreneren Personen, die ihre Fähigkeiten in der Softwareentwicklung verbessern möchten. Mit diesem Kurs sind die Studierenden mehr als bereit, ihre Karriere in der realen Welt voranzutreiben und Experten in ihren angestrebten Fachgebieten zu werden.