Wprowadzenie do Reacta useCallBack()

Tworząc stronę internetową za pomocą React, ważne jest, aby wziąć pod uwagę, jak szybko się ładuje i jak szybko użytkownicy mogą z nią wchodzić w interakcje. Jednym ze sposobów na przyspieszenie witryny React jest zapobieganie wykonywaniu przez nią niepotrzebnej pracy, takiej jak ponowne renderowanie części strony, które się nie zmieniły.

FunkcjauseCallback() w React pomaga nam to osiągnąć, zapamiętując zdefiniowane przez nas funkcje i odtwarzając je tylko wtedy, gdy jest to konieczne.Może to sprawić, że witryna będzie szybsza i bardziej responsywna dla użytkowników. Według ankiety Stack Overflow przeprowadzonej w tym samym roku React jest najpopularniejszą biblioteką JavaScript typu front-end , co sugeruje, że useCallback() jest prawdopodobnie szeroko stosowana w branży.

W tym artykule wyjaśnimy, czym jest funkcja useCallBack() w React i jak jej używać w naszym kodzie React, aby poprawić wydajność.

Czym jest useCallBack w React?

useCallback() to funkcja przechwytująca udostępniana przez React, która służy do zapamiętywania funkcji. Innymi słowy, pomaga zoptymalizować wydajność komponentu, unikając niepożądanego ponownego renderowania.

W React, gdy zmienia się stan lub właściwość komponentu, komponent jest ponownie renderowany, aby odzwierciedlić zaktualizowane wartości. Ten proces jest kosztowny obliczeniowo i może obniżyć wydajność aplikacji, jeśli jest obsługiwany niewłaściwie. Tutaj z pomocą przychodzi useCallback().

Dzięki useCallback() użytkownicy mogą zapamiętać funkcję, co oznacza, że ​​jest ona ponownie definiowana tylko wtedy, gdy zmieniają się jej zależności. Zapobiega to niepotrzebnemu ponownemu renderowaniu komponentów, optymalizując w ten sposób wydajność aplikacji.

Oto przykład -

const memoizedCallback = useCallback(

() => {

zróbCoś(a, b);

},

[a, b],

);

Rozpoczęcie pracy z React poprzez samouczki to świetny sposób, ale dynamiczny kurs, aby rozpocząć programowanie, może znacznie pomóc w zaktualizowaniu umiejętności. Sprawdź Executive Post Graduate Programme in Software Development – ​​Specialization in Full Stack Development kurs od upGrad do kickstart!

Zalety korzystania z useCallBack()

Oto kilka zalet korzystania z React useCallBack() –

• useCallback() może pomóc aplikacjom React działać szybciej, zapobiegając niepotrzebnym aktualizacjom komponentów.
• Jeśli komponent pobiera dużo danych i wyświetla je w postaci wykresu, może skorzystać z metody useCallback().
• Jeśli element nadrzędny wykresu zostanie zaktualizowany, ale zmiany nie wpłyną na wykres, nie ma potrzeby aktualizowania go i ponownego pobierania danych.
• Używając useCallback() do zapamiętania funkcji pobierającej dane, możemy uniknąć niepotrzebnych aktualizacji i sprawić, że aplikacja będzie działać szybciej i płynniej.
• Ta optymalizacja może poprawić komfort użytkowania, ponieważ aplikacja będzie działać szybciej i wydajniej.

Sprawdźkursy tworzenia oprogramowania upGrad , aby podnieść swoje umiejętności.

Składnia i parametry funkcji useCallBack()

const memoizedCallback = useCallback(

() => {

Zrób coś();

},

[zależność1, zależność2]

);

W tym przykładzie hak useCallback() zapamiętuje funkcję doSomething(), co oznacza, że ​​zapisuje w pamięci podręcznej wcześniej utworzoną wersję. Funkcja buforowana będzie używana tylko podczas kolejnych renderowań, chyba że zmieni się wartośćzależności1 lub zależności2.

Jeśli którakolwiek z tych zależności ulegnie zmianie, zostanie utworzona nowa wersja funkcjidoSomething() , a wersja z pamięci podręcznej zostanie zastąpiona nową.Pomaga to zoptymalizować wydajność aplikacji, zapobiegając niepotrzebnemu tworzeniu funkcji i ponownemu renderowaniu.

Różnica między useMemo() a useCallBack()

useCallback i useMemo to React Hooks, które mogą poprawić wydajność aplikacji React poprzez zapamiętywanie wartości. Oba zaczepy przyjmują funkcję jako argument i zwracają zapamiętaną wersję tej funkcji.

Oto różnica między nimi:

Scenariusze użycia useCallBack()

Oto scenariusze, w których można użyć useCallBack() –

Optymalizacja komponentów potomnych

useCallback React optymalizuje komponenty potomne, które opierają się na równości referencji, aby uniknąć niepotrzebnego renderowania, zwłaszcza podczas przekazywania wywołań zwrotnych do tych komponentów potomnych.

Zapobieganie niepotrzebnym renderingom

React useCallback jest szczególnie przydatny, gdy masz komponent z elementem potomnym, który wielokrotnie renderuje się bez potrzeby. Możesz przekazać funkcję wywołania zwrotnego i tablicę zależności do useCallback , aby zapobiec niepotrzebnemu renderowaniu.

Wykorzystaj swoją szansę na szczegółowe zrozumienie funkcji useCallBack() z pomocą kursu Full Stack Software Development Bootcamp od upGrad.

Zapoznaj się z naszymi popularnymi kursami inżynierii oprogramowania

Przykłady użyciaCallBack()

Oto kilka przykładów implementacji haka useCallBack().

useCallBack Przykład 1

Gdy komponent nadrzędny przekazuje funkcję jako rekwizyt do komponentu podrzędnego, częste ponowne renderowanie elementu nadrzędnego może spowodować niepotrzebne ponowne renderowanie komponentu podrzędnego. W takich przypadkach użycie useCallback do zapamiętania funkcji może pomóc w zapobieganiu niepotrzebnym ponownym renderowaniom.

import Reaguj, { useCallback } z „reaguj”;

funkcja ParentComponent() {

const handleButtonClick = useCallback(() => {

console.log('Kliknięto przycisk');

}, []);

powrót (

<Komponent potomny onClick={handleButtonClick} />

);

}

funkcja ChildComponent({ onClick }) {

powrót (

<button onClick={onClick}>Kliknij mnie</button>

);

}

useCallBack Przykład 2

Załóżmy, że masz funkcję, która wykonuje złożone obliczenia na dużym zbiorze danych. Jeśli ta funkcja jest często wywoływana i jej wykonanie zajmuje dużo czasu, może to powodować problemy z wydajnością aplikacji. W tym scenariuszu możesz użyć useCallback, aby zapamiętać funkcję i zapobiec niepotrzebnemu ponownemu wykonaniu obliczeń.

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

funkcja ParentComponent() {

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

const ProcessData = useCallback(() => {

const przetworzone dane = „Przetworzone dane”;

zwróć przetworzone dane;

}, [dane]);

powrót (

<Komponent podrzędny processData={processData} />

);

}

funkcja ChildComponent({procesData}) {

const wynik = daneprocesu();

powrót (

<div>{wynik}</div>

);

}

Reaguj na optymalizację wydajności za pomocą useCallBack()

Hak useCallback to potężne narzędzie w React, które pozwala zapamiętać funkcję, zapewniając, że zostanie ona przerobiona tylko wtedy, gdy zmieni się jedna z jej zależności. Jest to szczególnie korzystne w przypadku często wywoływanych funkcji wymagających dużej wydajności. Sprawdź poniższy przykład, aby zobaczyć, jak można go użyć –

import { useState, useEffect } z „reaguj”;

funkcja Aplikacja() {

const [słowo, setWord] = useState("Bob");

const say = () => console.log(`Twoje słowo to: ${słowo}`);

useEffect(() => {

mowić();

}, [mowić]);

powrót <div>Witamy!</div>;

}

Przykład pokazuje, że hak useEffect jest zależny od funkcji say, co oznacza, że ​​powinien być uruchamiany tylko przy zmianie funkcji. Jednak ze względu na kontrole równości referencyjnej Reacta powiedzmy, że funkcja zawsze będzie oceniana jako prawdziwa, nawet w przypadku braku rzeczywistej zmiany, co spowoduje niepotrzebne renderowanie.

Wywołanie zwrotne useEffect zostanie użyte przy każdym renderowaniu, które nie jest odpowiednie dla wydajności. Jednym ze sposobów rozwiązania tego problemu jest przeniesienie funkcji do bloku useEffect, ale nie byłoby to idealne rozwiązanie, ponieważ nie można by użyć tej funkcji w żadnym innym miejscu. Sprawdź ten przykład poniżej –

importuj Reaguj, { useState, useEffect } z „reaguj”;

funkcja Aplikacja() {

const [słowo, setWord] = useState("Bob");

const say = () => console.log(`Twoje słowo to: ${słowo}`);

useEffect(() => {

mowić();

}, [mowić]);

powrót <div>Witamy!</div>;

}

Innym rozwiązaniem jest zaimplementowanie haka useCallback poprzez zawijanie funkcji. Należy pamiętać, że funkcja useCallback wymaga tablicy zależności, podobnie jak funkcja useEffect. Jeśli funkcja przyjmuje dowolne zmienne, użytkownicy mogą przekazać je wraz z tablicą; lub pozostaw to puste. Tutaj, ponieważ funkcja say opiera się na zmiennej word, dołączamy ją do tablicy.

zaimportuj {useState, useEffect,useCallback} z „reaguj”

funkcja Aplikacja(){

const [słowo, zestawWord]=useState("Bob")

const say = useCallback(()=>console.log(`Twoje słowo to: ${słowo}`),[słowo])

użyjEfektu(()=>{

mowić()

},[mowić])

powrót <div>Witamy!</div>

}

Kiedy nie używać useCallBack()

Chociaż useCallback() jest użytecznym narzędziem do optymalizacji wydajności w niektórych scenariuszach, zdarzają się również sytuacje, w których jest niepotrzebne lub nawet szkodliwe. Oto kilka przykładów sytuacji, w których nie należy używać funkcji useCallback():

• Kiedy funkcja jest przekazywana jako rekwizyt, jest już czystą funkcją, która nie opiera się na stanie zewnętrznym.
• Kiedy funkcja jest przekazywana jako rekwizyt, nie powoduje żadnych problemów z wydajnością i nie jest nadmiernie wywoływana.
• Kiedy funkcja jest przekazywana jako rekwizyt, jest używana w wielu miejscach i musi być każdorazowo odtwarzana, aby odzwierciedlić różne zachowania lub zależności.
• Gdy funkcja jest przekazywana, ponieważ rekwizyt jest częścią małego drzewa komponentów, wzrost wydajności wywołany funkcją useCallback() byłby znikomy.
• Kiedy funkcja jest przekazywana jako rekwizyt, jest używana jako procedura obsługi zdarzenia i jest wywoływana tylko raz.

W takich przypadkach użycie useCallback() może w rzeczywistości obniżyć wydajność z powodu narzutu związanego z tworzeniem i utrzymywaniem zapamiętanego wywołania zwrotnego. Ważne jest, aby dokładnie rozważyć każdy przypadek użycia i rozważyć potencjalne korzyści w stosunku do potencjalnych kosztów przed podjęciem decyzji, czy użyć useCallback().

Umiejętności tworzenia oprogramowania na żądanie

Wniosek

Korzystanie z useCallback może być potężnym narzędziem do optymalizacji wydajności aplikacji React. Dzięki zapamiętywaniu funkcji można uniknąć niepotrzebnego ponownego renderowania, co prowadzi do płynniejszego i wydajniejszego działania użytkownika. Jednak ważne jest, aby używać useCallback rozważnie i rozumieć scenariusze, w których jest to najbardziej efektywne.

upGrad oferuje program Master of Science in Computer Science , który zapewnia wszechstronną edukację informatyczną, koncentrując się na umiejętnościach związanych z branżą. Ten program jest przeznaczony dla każdej świeższej lub bardziej doświadczonej osoby, aby poprawić swoje umiejętności tworzenia oprogramowania. Dzięki temu kursowi uczniowie będą bardziej niż gotowi do podniesienia poziomu swojej kariery w prawdziwym świecie i zostania ekspertami w swoich aspirujących dziedzinach.