UseEffect, useLayoutEffect i useEffectEvent: Porównanie haków do pobierania danych w React

Haki React to potężny sposób zarządzania efektami ubocznymi w komponentach React. Trzy najpopularniejsze hooki do obsługi efektów ubocznych to useEffect, useLayoutEffect i useEffectEvent. Każdy hak ma swoje unikalne zastosowanie, dlatego wybór odpowiedniego do danego zadania jest kluczowy.

Hak useEffect

The użyjEfektu hak jest Podstawowy hak w React który umożliwia wykonywanie efektów ubocznych, takich jak manipulacja DOM, operacje asynchroniczne i pobieranie danych w komponentach funkcjonalnych. Ten hak jest funkcją pobierającą dwa argumenty, funkcję efektu i tablicę zależności.

Funkcja efektu zawiera kod wykonujący efekt uboczny, a tablica zależności określa, kiedy funkcja efektu jest uruchamiana. Jeśli tablica zależności jest pusta, funkcja efektu działa tylko raz podczas początkowego renderowania komponentu. W przeciwnym razie funkcja efektu będzie działać za każdym razem, gdy zmieni się którakolwiek wartość w tablicy zależności.

Oto przykład użycia haka useEffect do pobrania danych:

import React from"react";
functionApp() {
const [data, setData] = React.useState([]);
 React.useEffect(() => {
 fetch("")
 .then((response) => response.json())
 .then((data) => setData(data));
 }, []);
return (

"app">
 {data.map((item) => (
{item.title}</div>
 ))}
 </div>
 );
}
exportdefault App;

Ten kod demonstruje Aplikacja komponent pobierający dane z zewnętrznego API za pomocą haka useEffect. Funkcja efektu useEffect pobiera przykładowe dane z interfejsu API JSONPlaceholder. Następnie analizuje odpowiedź JSON i ustawia pobrane dane w pliku dane państwo.

Dzięki stanowi danych komponent aplikacji renderuje plik tytuł właściwość każdego elementu w stanie.

Charakterystyka zastosowaniaEffect Hook

• Przyjazny asynchronicznie: Natywnie obsługuje operacje asynchroniczne, dzięki czemu jest wygodne do pobierania danych.
• Działa po renderowaniu: Hak useEffect wykonuje swoje efekty po wyrenderowaniu komponentu przez aplikację, upewniając się, że hak nie blokuje interfejsu użytkownika.
• Posprzątać: Zapewnia zintegrowany sposób czyszczenia poprzez zwrócenie funkcji. Może to być szczególnie przydatne podczas pracy ze słuchaczami lub subskrypcjami.

Hak useLayoutEffect

The użyj efektu układu hak jest podobny do użyjEfektu hook, ale działa synchronicznie po wszystkich mutacjach DOM. Oznacza to, że działa, zanim przeglądarka zdąży pomalować ekran, dzięki czemu nadaje się do zadań wymagających precyzji kontrolę nad układem i stylami DOM, taką jak pomiar rozmiaru elementu, zmiana rozmiaru elementu lub animowanie jego pozycja.

Poniżej znajduje się przykład użycia haka useLayoutEffect do zmiany szerokości pliku a przycisk element:

import React from"react";
functionApp() {
const button = React.useRef();
 React.useLayoutEffect(() => {
const { width } = button.current.getBoundingClientRect();
 button.current.style.width = `${width + 12}px`;
 }, []);
return (

"app">
Click Me</button>
 </div>
 );
}
exportdefault App;

Powyższy blok kodu zwiększa szerokość elementu przycisku o 12 pikseli przy użyciu haka useLayoutEffect. Dzięki temu szerokość przycisku zwiększy się, zanim zostanie on wyświetlony na ekranie.

Charakterystyka haka useLayoutEffect

• Synchroniczny: Wykonuje się synchronicznie, potencjalnie blokując interfejs użytkownika, jeśli operacja w nim jest skomplikowana.
• DOM odczyt/zapis: Najlepiej nadaje się do odczytu i zapisu bezpośrednio w DOM, zwłaszcza jeśli potrzebujesz zmian przed ponownym odświeżeniem przeglądarki.

Hak useEffectEvent

The użyjEffectEvent hook to hak React, który rozwiązuje problemy z zależnościami użyjEfektu hak. Jeśli znasz useEffect, wiesz, że tablica zależności może być trudna. Czasami trzeba umieścić w tablicy zależności więcej wartości, które są absolutnie niezbędne.

Na przykład:

import React from"react";
functionApp() {
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>;
}
exportdefault App;

Ten kod demonstruje Aplikacja komponent zarządzający połączeniem z usługą zewnętrzną. The łączyć funkcja łączy się z określonym adresem URL, podczas gdy funkcja logPołączenie funkcja rejestruje szczegóły połączenia. Wreszcie, na Połączony funkcja wywołuje logPołączenie funkcja rejestrowania komunikatu o pomyślnym połączeniu, gdy urządzenie się połączy.

Hak useEffect wywołuje funkcję connect, a następnie konfiguruje funkcję wywołania zwrotnego onConnected, która będzie wykonywana, gdy urządzenie wyzwala zdarzenie onConnected. To wywołanie zwrotne rejestruje komunikat połączenia. Zwraca funkcję czyszczącą, która aktywuje się po odmontowaniu komponentu. Ta funkcja czyszczenia odpowiada za odłączenie urządzenia.

Tablica zależności ma adres URL zmienna i na Połączony funkcjonować. Komponent App utworzy funkcję onConnected przy każdym renderowaniu. Spowoduje to uruchomienie funkcji useEffect w pętli, która będzie kontynuować ponowne renderowanie komponentu aplikacji.

Istnieje wiele sposobów rozwiązania problemu pętli useEffect. Mimo to najskuteczniejszym sposobem na zrobienie tego bez dodawania kolejnych niepotrzebnych wartości do tablicy zależności jest użycie haka useEffectEvent.

import React from"react";
functionApp() {
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>;
}
exportdefault App;

Owijając funkcję onConnected hakiem useEffectEvent, hak useEffectEvent może zawsze odczytać najnowsze wartości wiadomość I Opcje logowania parametrów przed przekazaniem ich do haka useEffect. Oznacza to, że useEffect nie musi polegać na funkcji onConnected ani na przekazywanych do niej wartościach.

Hak useEffectEvent jest przydatny, gdy chcesz, aby efekt useEffect zależał od określonej wartości, nawet jeśli efekt wyzwala zdarzenie wymagające innych wartości, których nie chcesz używać jako zależności w pliku użyjEfektu.

Charakterystyka haka useEffectEvent

• Najlepiej nadaje się do skutków ubocznych zależnych od zdarzeń.
• The użyjEffectEvent hak nie działa z procedurami obsługi zdarzeń, takimi jak na kliknięcie, naZmieńitp.

Hak useEffectEvent jest nadal eksperymentalny i niedostępny w Reaguj na haczyki w wersji 18.

Kiedy używać jakiego haka?

Każdy z powyższych haków do pobierania danych jest odpowiedni w różnych sytuacjach:

• Pobieranie danych: useEffect to doskonały wybór.
• Bezpośrednie manipulacje DOM: Jeśli chcesz dokonać synchronicznych zmian w DOM przed odświeżeniem, wybierz opcję useLayoutEffect.
• Lekkie operacje: W przypadku operacji, które nie wiążą się z ryzykiem zablokowania interfejsu użytkownika, możesz swobodnie używać useEffect.
• Skutki uboczne zależne od zdarzeń: Użyj haka useEffectEvent do zawinięcia zdarzeń i haka useEffect do uruchomienia efektów ubocznych.

Skutecznie radzij sobie ze skutkami ubocznymi

Haki React otwierają świat możliwości i zrozumienie różnicy pomiędzy useEffect, hooki useLayoutEffect i useEffectEvent mogą znacząco wpłynąć na sposób obsługi efektów ubocznych i DOM manipulacja. Aby stworzyć aplikacje przyjazne dla użytkownika, należy wziąć pod uwagę specyficzne wymagania i implikacje tych haków.