useEffect, useLayoutEffect i useEffectEvent: Porównanie haków pobierających dane w Reakcie
Haki reactowe to potężny sposób na zarządzanie efektami ubocznymi w komponentach reactowych. Trzy najpopularniejsze haki do obsługi efektów ubocznych to useEffect, useLayoutEffect i useEffectEvent. Każdy hak ma swój unikalny przypadek użycia, więc wybór odpowiedniego do danego zadania jest kluczowy.
Haczyk useEffect
funkcja renderowania efektów i lista zależności.
Funkcja efektu hermetyzuje kod odpowiedzialny za wywołanie efektu ubocznego, podczas gdy tablica zależności określa, kiedy wspomniana funkcja powinna zostać wykonana. W przypadkach, gdy tablica zależności pozostaje pozbawiona zawartości, funkcja efektu zostanie wykonana wyłącznie podczas początkowego renderowania komponentu. I odwrotnie, jeśli tablica zależności zawiera jakiekolwiek zmiany, funkcja efektu zostanie uruchomiona na nowo przy każdej modyfikacji.
Rzeczywiście, najlepszą ilustrację zastosowania haka useEffect do pobierania danych można znaleźć poniżej:
import React from "react";
function App() {
const [data, setData] = React.useState([]);
React.useEffect(() => {
fetch("<https://jsonplaceholder.typicode.com/posts>")
.then((response) => response.json())
.then((data) => setData(data));
}, []);
return (
<div className="app">
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</div>
);
}
export default App;
Przykład ten prezentuje funkcjonalny komponent Reacta, zwany komponentem “App”, który wykorzystuje hook “useEffect” do pobierania danych z zewnętrznego API. W szczególności, funkcja obsługi efektu powiązana z hakiem “useEffect” pobiera przykładowe informacje z interfejsu API JSONPlaceholder, przetwarza odpowiedź JSON, a następnie aktualizuje stan “data” uzyskanymi danymi.
Biorąc pod uwagę aktualny stan danych naszej aplikacji, aplikacja wyświetla atrybut title powiązany z każdym odpowiednim elementem tych informacji.
Charakterystyka haka useEffect
Aplikacja została zaprojektowana z myślą o działaniu asynchronicznym i zawiera tę funkcjonalność natywnie, co zapewnia płynne działanie podczas pobierania danych.
Wykorzystanie haka useEffect jest zaplanowane tak, aby nastąpiło po zakończeniu procesu renderowania danego komponentu, gwarantując w ten sposób, że wspomniany hak nie blokuje ani nie utrudnia interfejsu użytkownika w tym okresie.
Dyrektywa oferuje usprawnione podejście do wykonywania zadań czyszczenia poprzez zapewnienie funkcji, która jest automatycznie wywoływana po zakończeniu działania listenera lub subskrypcji. Taka funkcjonalność może okazać się szczególnie korzystna w sytuacjach, w których efektywne zamknięcie i zwolnienie zasobów jest najważniejsze, na przykład w przypadkach związanych z listenerami lub subskrypcjami.
Hak useLayoutEffect
Wykorzystanie haka useLayoutEffect ściśle odzwierciedla funkcjonalność haka useEffect ; jednak działa on synchronicznie po wszystkich instancjach zmian DOM. W związku z tym funkcja ta jest wykonywana przed zdolnością przeglądarki do renderowania wizualnej reprezentacji na ekranie, co czyni ją bardzo korzystną w przypadku przedsięwzięć wymagających dokładnej manipulacji strukturą modelu obiektów dokumentu (DOM) i atrybutami stylizacji, w tym między innymi określania wymiarów określonego elementu, ponownego dostosowywania wymiarów elementu lub orkiestracji układu przestrzennego wspomnianego elementu za pomocą technik animacji.
Wykorzystując hak useLayoutEffect , można zmodyfikować wymiary elementu przycisku, jak pokazano poniżej:
import React from "react";
function App() {
const button = React.useRef();
React.useLayoutEffect(() => {
const { width } = button.current.getBoundingClientRect();
button.current.style.width = `${width \\+ 12}px`;
}, []);
return (
<div className="app">
<button ref={button}>Click Me</button>
</div>
);
}
export default App;
Powyższy fragment kodu rozszerza wymiary komponentu przycisku o dwanaście jednostek, wykorzystując useLayoutEffect funkcjonalne narzędzie. W rezultacie ta konfiguracja gwarantuje, że dostosowana szerokość zostanie zastosowana do przycisku przed jego wizualnym pojawieniem się na urządzeniu wyświetlającym użytkownika.
Charakterystyka haka useLayoutEffect
Synchroniczne wykonywanie kodu JavaScript zapewnia, że operacja odbywa się w sposób sekwencyjny bez żadnych przerw w interfejsie użytkownika. Takie podejście może jednak spowodować opóźnienie lub zablokowanie interfejsu użytkownika ze względu na czasochłonność niektórych operacji.
Operacja odczytu/zapisu DOM jest idealnie zaprojektowana do natychmiastowego dostępu do obiektowego modelu dokumentu zarówno w celu odczytu, jak i zapisu danych, szczególnie gdy priorytetem jest obserwacja modyfikacji przed ponownym malowaniem przeglądarki.
Hak useEffectEvent
Wykorzystanie haka useEffectEvent stanowi skuteczne rozwiązanie trudnych kwestii zależności związanych z konwencjonalnym hakiem useEffect . Wydaje się, że osoby dobrze zaznajomione z działaniem useEffect mogą zmagać się z zawiłościami jego tablicy zależności, która czasami wymaga włączenia elementów wykraczających poza to, co jest absolutnie wymagane do prawidłowego funkcjonowania.
Na przykład:
import React from "react";
function App() {
const connect = (url) => {
// logic for connecting to the url
};
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
};
const onConnected = (url, loginOptions) => {
logConnection(`Connected to ${url}`, loginOptions);
};
React.useEffect(() => {
const device = connect(url);
device.onConnected(() => {
onConnected(url);
});
return () => {
device.disconnect();
};
}, [url, onConnected]);
return <div></div>;
}
export default App;
Niniejszy kod prezentuje funkcjonalność
haka useEffect poprzez wywołanie metody connect i ustanowienie asynchronicznej funkcji zwrotnej “onConnected”, która zostanie wykonana po wyzwoleniu zdarzenia “onConnected” przez urządzenie. Następnie to wywołanie zwrotne wykonuje akcję dziennika, która generuje komunikat o połączeniu. Ponadto zapewnia funkcję likwidacji, która wchodzi w życie po odmontowaniu komponentu, przejmując w ten sposób odpowiedzialność za zerwanie połączenia z urządzeniem.
DependencyArray zawiera zarówno adres URL, jak i procedurę obsługi zdarzenia znaną jako “onConnected”. Za każdym razem, gdy komponent aplikacji jest renderowany, dynamicznie generuje tę konkretną funkcję. W konsekwencji, hook Reacta, “useEffect”, przechodzi przez iteracyjny proces, którego głównym celem jest wielokrotna aktualizacja stanu komponentu aplikacji.
Jedną ze skutecznych metod rozwiązania problemu pętli useEffect jest wykorzystanie haka useEffectEvent, który pozwala na usprawnienie rozwiązania bez obciążania tablicy zależności dodatkowymi nieuzasadnionymi wartościami.
import React from "react";
function App() {
const connect = (url) => {
// logic for connecting to the URL
};
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
};
const onConnected = React.useEffectEvent((url, loginOptions) => {
logConnection(`Connected to ${url}`, loginOptions);
});
React.useEffect(() => {
const device = connect(url);
device.onConnected(() => {
onConnected(url);
});
return () => {
device.disconnect();
};
}, [url]);
return <div></div>;
}
export default App;
Wykorzystując hak useEffectEvent do zawijania funkcji onConnected , zapewniamy, że parametry message i loginOptions są zawsze aktualne, gdy są przekazywane do haka useEffect . W związku z tym ten ostatni nie jest już zależny od pierwszego lub jakichkolwiek parametrów do niego dostarczonych.
Podczas korzystania z haka useEffect , korzystne może być poleganie na konkretnej wartości w celu wyzwolenia efektu, mimo że efekt wymaga dodatkowych wartości, które mogą nie być pożądane jako zależności w ramach useEffect .
Charakterystyka haka useEffectEvent
System doskonale radzi sobie z konsekwencjami wyzwalanymi przez zdarzenia.
Wykorzystanie haka useEffect nie jest kompatybilne z funkcjami obsługi zdarzeń, takimi jak onClick , onChange , i tak dalej, ponieważ zdarzenia te są wyzwalane przez interakcje użytkownika, a nie reaktywne zależności, które mogą być monitorowane pod kątem zmian przez Reacta.
Hak useEffect , potężne i wszechstronne narzędzie do zarządzania efektami ubocznymi w komponentach funkcjonalnych, pozostaje funkcją eksperymentalną od wersji Reacta do 18. Należy zauważyć, że jego dostępność może się różnić w zależności od wydania lub kompilacji Reacta.
Kiedy używać którego haka?
Każdy z tych haków pobierania danych ma swoje unikalne zastosowanie, w zależności od konkretnych okoliczności.
Wykorzystanie haka useEffect w React stanowi odpowiednie rozwiązanie do pobierania i aktualizowania danych w komponencie, ponieważ pozwala na efektywne zarządzanie operacjami asynchronicznymi przy jednoczesnym zachowaniu czystej i zorganizowanej bazy kodu.
Gdy konieczne jest wykonanie bezpośrednich modyfikacji w obiektowym modelu dokumentu (DOM) w sposób, który wymaga natychmiastowego renderowania zmian, wskazane byłoby wykorzystanie useLayoutEffect . Funkcja ta pozwala na wydajną obsługę takich zadań, zapewniając, że określone akcje są wykonywane po początkowym renderowaniu i przed wystąpieniem kolejnych aktualizacji lub ponownych przepływów.
Wykorzystanie haka useEffect do lekkich operacji nie grozi zasłonięciem interfejsu użytkownika, pozwalając na ich wykonanie z łatwością i wygodą.
Wykorzystanie efektów ubocznych opartych na zdarzeniach można osiągnąć, stosując zarówno hak useEffectEvent do przechwytywania i obsługi zdarzeń, jak i hak useEffect do wykonywania wszelkich niezbędnych efektów ubocznych w odpowiedzi na te zdarzenia.
Efektywna obsługa efektów ubocznych
Wykorzystanie haków Reacta ujawnia szeroki zakres możliwości, a zrozumienie rozbieżności między hakami useEffect, useLayoutEffect i useEffectEvent może znacząco wpłynąć na sposób zarządzania efektami ubocznymi i manipulacją DOM. Konieczne jest rozważenie szczególnych wymagań i konsekwencji tych haków w celu skonstruowania oprogramowania zorientowanego na użytkownika.