React useEffect() Hook: użycie, jak i kiedy go używać

Wprowadzenie do hooka useEffect().

useeffect hakuje kluczowy komponent.Obsługuje zadania takie jak pobieranie danych, konfigurowanie detektorów zdarzeń lub modyfikowanie modelu DOM i umożliwia użytkownikom przeprowadzanie efektów ubocznych za pomocą komponentów funkcjonalnych. Kontroluje również cykl życia komponentów.

Hak useeffect wykorzystuje dwa argumenty, funkcję i opcjonalną tablicę zależności.Funkcja przekazana jako pierwszy argument jest wykonywana po wstępnym renderowaniu komponentu i ponownie po każdej aktualizacji. Możesz wskazać zmienne, od których zależy efekt za pomocą tablicy zależności. Nowe uruchomienie efektu jest wykonywane, jeśli którakolwiek ze zmiennych tablicy zależności ulegnie zmianie.

Z założeniahak useeffect został stworzony, aby sprostać wyzwaniom napotykanym w ramach cyklu życia komponentów klasy ES6.Jednak obecnie stała się jedną z podstawowych koncepcji reagowania.

Po tym skrócie na temat tego,czym jest useeffect w React , spójrzmy teraz na jego składnię.

Podstawowa składnia hooka useEffect().

useEffect obsługuje dwa argumenty ; drugi argument jest opcjonalny. Składnia jest następująca:

useEffect(<funkcja>, <zależność>)

Funkcja zawiera logikę efektów ubocznych. Prowokuje wykonanie wywołania zwrotnego bezpośrednio po aktualizacji DOM.

Zależność zawiera opcjonalną tablicę zależności twoich efektów ubocznych, tj. wartości stanu i rekwizytów. Zauważ, że hookuse effect uruchamia wywołanie zwrotne tylko wtedy, gdy zależności uległy zmianie podczas renderowania.

Składnia służy jedynemu celowi useEffect(). Pozwala umieścić logikę efektu ubocznego w funkcji wywołania zwrotnego, a następnie użyć argumentu zależności do kontrolowania, kiedy efekt uboczny ma się uruchomić.

Podczas implementacji hooka useEffect() możesz wziąć pod uwagę następującą składnię:

// importuj efekt użycia

zaimportuj { useEffect } z „reagowania”;

funkcja Mój Składnik() {

// wywołuje go powyżej zwróconego JSX

// przekazuje do niej dwa argumenty tj. tablicę i funkcję

useEffect(() => {

// funkcja efektu

powrót () => {

// funkcja czyszczenia

};

}, [/* tablica zależności */]);

// logika renderowania komponentu

}

}

Sprawdź naszebezpłatne kursy technologiczne,aby uzyskać przewagę nad konkurencją.

Montowanie i odmontowywanie komponentów za pomocą hooka useEffect().

Montowanie

Początkowy etap cyklu życia komponentu React obejmuje tworzenie i wstawianie komponentów do modelu DOM. Ten etap cyklu życia React useeffect obejmuje metodę cyklu życia componentDidMount, która jest wykonywana podczas montowania komponentu.

Oto przykład montowania komponentów za pomocą haka useEffect().

składnikDidMount() {

console.log("Komponent został pomyślnie zamontowany");

this.setState({

załadowany: prawda

})

}

W powyższym przykładzie componentDidMount pozwala na użycie setState. Możesz więc łatwo ustawić i zmienić stan w metodzie cyklu życia. Odpowiednia metoda wykorzystuje wywołania interfejsu API, wywołuje zdalne punkty końcowe i pobiera dane.

Odmontowywanie

Ta metoda cyklu życia reakcji useeffect obsługuje czyszczenie w modelu DOM.To jest jakfunkcja czyszcząca useeffect , która usuwa komponent z DOM.W React nazywa się to odmontowywaniem. Odmontowywanie wykorzystuje tylko jedną metodę cyklu życia, tj. componentWillUnmount. Jest wywoływana, gdy chcesz usunąć komponent z DOM.

składnikWillUnmount() {

console.log("Komponent został pomyślnie odmontowany");

}

Używanie hooka use effect() do obsługi zmian stanu

Efekt użycia jest wykonywany po każdym renderowaniu.Jest również używany do uruchamiania niektórych kodów w celu potwierdzenia zmiany stanu. Możesz kontrolować czas wykonania efektu, przekazując drugi argument w useEffect() Hook. Drugi argument działa jak tablica zależności, tzn. jeśli odpowiednie zmienne zostaną zmienione, efekt musi zostać uruchomiony ponownie. Zauważ, że stan jest jednym z typów zmiennych.

Poniższa sekcja ilustruje przykład wyjaśniający, w jaki sposóbhak efektu użycia obsługuje zmiany stanu.

Na przykład możesz chcieć uruchomić efekt uboczny w oparciu o wartość „dzień”. Załóżmy, że masz efekt uboczny polegający na wyświetlaniu wiadomości powitalnej w zależności od wartości dnia. Wartość dnia jest zapisywana w zmiennej stanu.

Za każdym razem, gdy wybierzesz dzień, stan zostanie zaktualizowany. Zmiana wartości stanu umożliwia aktualizację komunikatu powitalnego. Powinieneś przekazać zmienną stanu do hooka useEffect jako podzbiór tablicy zależności.

useEffect(() =>

{

// Efekt uboczny

}, [państwo]);

W powyższym przykładzie useeffect response native efekt uboczny wystąpiłby, gdyby wartość zmiennej stanu została zaktualizowana.

Zapoznaj się z naszymi popularnymi kursami inżynierii oprogramowania

Korzystanie z funkcji useEffect() Hook z interfejsami API i żądaniami sieciowymi

Możesz użyć haka „useEffect()” z interfejsami API i żądaniami sieciowymi, aby pobrać dane z serwera i obsłużyć błędy. Oto przykład użycia funkcji „useEffect()” z interfejsem API i obsługi błędów sieciowych:

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

funkcja Mój Składnik() {

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

const [błąd, setError] = useState(null);

useEffect(() => {

funkcja asynchroniczna fetchData() {

próbować {

const response = await fetch('https://api.example.com/data');

if (!odpowiedź.ok) {

throw new Error('Odpowiedź sieci nie była poprawna');

}

const json = czekaj na odpowiedź.json();

setData(json);

} złapać (błąd) {

setBłąd(błąd);

}

}

pobierzDane();

}, []);

jeśli (błąd) {

return <div>Błąd: {error.message}</div>;

}

if (!dane) {

return <div>Ładowanie…</div>;

}

powrót (

<dział>

<p>{data.message}</p>

</div>

);

}

Możesz zmodyfikować ten przykład, aby zawierał wszelkie dodatkowe funkcje potrzebne do obsługi żądań sieciowych i odpowiedzi interfejsu API.

Advanced useEffect() Techniki hook

Jedną z zaawansowanych natywnych technik reagowania na efekt użycia jest zapamiętywanie.Jest to technika optymalizacji, w której dane wyjściowe wywołania funkcji są buforowane. Następniefunkcja zwracająca useeffect zwraca go, gdy ponownie zostanie podane to samo wejście.

Inną dobrze znaną techniką hook useEffect() jest hook useMemo. Pozwala obliczyć wartość i zapamiętać ją. Jego składnia to:

importuj { useMemo } z „reaguj”

const memoizedValue = useMemo(() => obliczanieExpensiveValue(x, y), [x, y])

useEffect() Zależności haka

useEffect() Zależności haka zawierają listę zależności twojego efektu ubocznego, a także zawierają wartości stanu lub rekwizytu. Argument zależności umożliwia przechwycenie niektórych zdarzeń cyklu życia komponentu, takich jak zamontowanie komponentu lub aktualizacja określonej wartości stanu/rekwizytu.

Argument zależności pozwala kontrolować czas wywołania efektu ubocznego, niezależnie od cyklu renderowania komponentu.

Renderowanie warunkowe za pomocą hooka useEffect().

useEffect Hook pozwala umieścić warunki w haku. Oto przykład.

useEffect(() => {

if (powinien wykonać) {

// (lista warunków)

}

}, [należy wykonać])

Musisz wspomnieć o obowiązkowych warunkach, które chcesz wykonać w ramach funkcji shouldExecute.

użyj hooka Effect() vs ComponentDidMount() i ComponentDidUpdate()

useEffect() Hook vs componentDidUpdate():

useEffect() Hook vs componentDidMount():

Typowe błędy i najlepsze praktyki z użyciem hooka useEffect().

Częste błędy

1. Brak definiowania zależności

useEffect działa za każdym razem, gdy komponent jest renderowany. W związku z tym należy zdefiniować wartości, które mają wyzwolić ponowne renderowanie. W przeciwnym razie funkcja useEffect może powodować problemy z wydajnością.

2. Brak sprzątania po wykonaniu haka useEffect

useEffect może zwrócić funkcję czyszczącą, która jest wykonywana, gdy komponent jest odmontowany. Brak czyszczenia po użyciuEffect może powodować wycieki pamięci i inne problemy. Dlatego ważne jest, aby użyć funkcji czyszczenia useeffect .

3. Użycie setState w funkcji useEffect bez zależności

Jeśli zaktualizujesz stan w useEffect, uruchomi to kolejne renderowanie. Może to prowadzić do nieskończonej pętli. Aby temu zapobiec, zawsze musisz zdefiniować aktualizowaną zmienną stanu jako zależność w haku useEffect.

Zapoznaj się z naszymi bezpłatnymi kursami tworzenia oprogramowania

Najlepsze praktyki:

• Jeśli chcesz użyć haka useEffect, upewnij się, że używasz tylko jednego haka na komponent. W przypadku wielu haków useEffect wszystkie będą uruchamiane za każdym razem, gdy komponent zostanie wyrenderowany. Może więc powodować problemy z wydajnością i nieoczekiwane zachowanie.
• Upewnij się, że nie używasz zaczepu useEffect wewnątrz warunków, pętli ani funkcji zagnieżdżonych. Jeśli użyjesz State wewnątrz pętli for, React utworzy nową zmienną stanu za każdym razem, gdy pętla zostanie uruchomiona. W ten sposób prowadzi do nieoczekiwanego zachowania.
• Upewnij się, że nie nadużywasz haka useEffect. Mogą utrudniać odczytanie kodu i mogą wpływać na wydajność, jeśli są nadmiernie używane.
• Haczyk useEffect należy wywoływać tylko z funkcji React. Jeśli wywołasz go z komponentu klasy, zobaczysz błąd.

Wniosek

Najlepiej użyć useeffect w reakcji , jeśli chcesz łatwo uzyskać dostęp do właściwości i stanu komponentów bez pisania dodatkowego kodu.Znacznie upraszcza efekty uboczne w komponentach, ponieważ ułatwia wykonywanie efektów ubocznych, gdy zmienia się stan lub rekwizyt. Możesz wziąć pod uwagę aspekty i najlepsze praktyki omówione powyżej, aby upewnić się, że komponenty React działają optymalnie.

Nauka wymagających umiejętności tworzenia oprogramowania jest kluczowa w obecnych czasach. Możesz wyposażyć się w te najnowocześniejsze umiejętności, realizując tytuł magistra informatyki upGrad na LJMU . Kurs czyni cię ekspertem programistą, przekazując umiejętności takie jak Java, Python i specjalizację w pokrewnych dziedzinach. Dokładne poznanie aspektów omówionych w tym kursie pomaga odkrywać możliwości pracy, takie jak programista javascript, inżynier oprogramowania i inżynier backendu.

Oprócz doskonalenia umiejętności tworzenia oprogramowania, upGrad pomaga również podnieść karierę jako programista full-stack poprzez kursy takie jak Executive PG Program in Full Stack Development z IIITB i Full Stack Software Development Bootcamp . Programy te zapewniają wciągające platformy edukacyjne, które pozwalają kandydatom zdobyć pełne umiejętności programistyczne i skutecznie utorować drogę do udanej kariery!