Kiedy używać useMemo i useCallback: krótki przewodnik dla fanów React

Jeśli jesteś programistą React, być może spotkałeś się już z internetowymi dyskusjami useMemo i useCallback w React i skończyłeś jako bardziej zdezorientowani niż kiedykolwiek wcześniej. Odróżnienie useMemo od useCallback może być bardzo trudne. W porządku! Na początku może być trudno opanować React-Hooks, ale mogą one być niezwykle przydatne w dalszej kolejności.

W tym artykule pokażemy różnicę między useCallback i useMemo oraz kiedy używać useCallback i useMemo.

Różnica między useMemo a useCallback

W React 16.8 wprowadzono dwa wbudowane hooki. Te funkcje zostały wprowadzone w celu optymalizacji wydajności. Różnica między useMemo a useCallback wydaje się nieistotna, więc postaramy się wyjaśnić zamieszanie.

Czym są React-Hooks?

Hooki to nowe funkcje wprowadzone w React, które umożliwiają useState i inne funkcje Reacta bez pisania klasy. Hooki to metody i funkcje, które „zahaczają się” o stan i cechy cyklu życia Reacta.

useCallback vs useMemo

Hak useCallback jest używany za każdym razem, gdy komponent podrzędny jest ponownie renderowany bez potrzeby. Korzystając z useCallback, możesz zapobiec niepotrzebnemu ponownemu renderowaniu, zwracając tę ​​samą instancję tej funkcji, która jest przekazywana, zamiast tworzyć nowe wystąpienie za każdym razem. Może to zaoszczędzić znaczną ilość czasu (i pieniędzy wydawanych na godziny deweloperskie). Przekazanie tablicy zależności z zapamiętanym wywołaniem zwrotnym spowoduje powstanie zapamiętanej wersji, która zostanie zmieniona tylko wtedy, gdy zmieni się zależność.

useMemo jest wykorzystywane w funkcjonalnym komponencie Reacta. Służy do zwracania zapamiętanej wartości. Zapamiętywanie odnosi się do procesu oszczędzania czasu ponownej kompilacji przez zwrócenie buforowanego wyniku zamiast ponownego kompilowania funkcji z tym samym argumentem dla następnego uruchomienia. Buforowany wynik jest zwracany przy następnym wywołaniu. Podpięcia useMemo zapewniają wartości mapowane w pamięci.

Oczywiście istnieją pewne podobieństwa. Zarówno w useMemo, jak i useCallback, podpięcie akceptuje funkcję oraz tablicę zależności. Jednak useCallback zapamięta zwróconą wartość, a useMemo zapamięta funkcję. Innymi słowy, jeden buforuje typ wartości, a drugi buforuje funkcję.

• CZYTAJ WIĘCEJ – Jak i dlaczego powinieneś organizować swoje pliki
• 9 najlepszych sposobów na wykorzystanie elektronicznych gadżetów w klasie

Kiedy używać useCallback a useMemo

Kiedy więc używać useCallback, a kiedy useMemo jest najlepszą opcją? Spójrzmy na przykład. Jeśli ciężki i kosztowny obliczeniowo kod akceptuje argumenty i zwraca wartość, najlepszym rozwiązaniem jest useMemo. W ten sposób możesz odwoływać się do wartości między renderowaniami bez ponownego uruchamiania kodu i marnowania czasu i mocy obliczeniowej.

Jeśli chcesz, aby instancja funkcji była trwała w wielu renderowaniach, powinieneś zamiast tego użyć useCallback, ponieważ zasadniczo umieszcza funkcję poza zasięgiem komponentu React, aby zachować ją nienaruszoną.

Co to jest useEffect?

Wspomnieliśmy już o tablicy zależności, z którą mogłeś się spotkać podczas używania useEffect. useEffect to kolejny hak React. Służy do obsługi efektów ubocznych w komponentach funkcjonalnych przy użyciu logiki argumentu wywołania zwrotnego. Zależności to lista zależności efektu ubocznego, np. właściwości lub wartości stanu.

Ten haczyk pokazuje Reactowi, że komponent musi wykonać akcję po renderowaniu. Kiedy DOM zostanie zaktualizowany, efekt, który przekażesz, zostanie zapisany. Możesz również wykonać pobieranie danych, aby osiągnąć ten wynik.

Krótko mówiąc, useCallback, useMemo i useEffect dotyczą zwiększania wydajności między ponownym renderowaniem komponentów w aplikacjach React.

Ważne jest jednak, aby nie nadużywać haków. Haki wprowadzają nową i złożoną logikę i potencjalnie mogą mieć odwrotny skutek niż zamierzony, tworząc problemy z wydajnością zamiast je rozwiązywać. useMemo powinno być używane tylko do naprawdę kosztownych obliczeń.

Nie używaj funkcji useMemo ani useCallback do naprawiania podstawowych problemów z aplikacją. W końcu te problemy pojawią się ponownie i będą cię prześladować, więc najlepiej najpierw zajmij się wszystkimi znanymi usterkami.

• CZYTAJ WIĘCEJ – Jak wybrać najlepszy CMS
• Jakie są zalety i wady metod kryptograficznych?

Wniosek

Mam nadzieję, że ten artykuł był wnikliwy i lepiej rozumiesz te dwa haki. W podsumowaniu:

• Oba akceptują funkcję i tablicę zależności
• useMemo zapamiętuje zwróconą wartość, useCallback zapamiętuje funkcję.

Różnica między useMemo a useCallback jest całkiem jasna! Narzędzia te mają potencjał oszczędzania czasu i pieniędzy, ale tylko wtedy, gdy są używane w odpowiednim kontekście i środowisku.

Mam nadzieję, że ten samouczek pomógł ci dowiedzieć się, kiedy używać useMemo i useCallback: Krótki przewodnik dla fanów reakcji . Jeśli chcesz coś powiedzieć, daj nam znać w sekcjach komentarzy. Jeśli podoba Ci się ten artykuł, udostępnij go i śledź WhatVwant na Facebooku, Twitterze i YouTube, aby uzyskać więcej wskazówek technicznych.

Kiedy używać useMemo i useCallback – często zadawane pytania