React Hooks: useEffect

Ostatnio pisałem o haczyku useState, więc teraz wyjaśnię, co robi haczyk useEffect w React. Hak useEffect został opracowany w celu rozwiązania niektórych wyzwań związanych z metodami cyklu życia komponentów klasy ES6. Jeśli rozumiesz metody cyklu życia z komponentów klasy, ten zaczep jest odpowiednikiem metod cyklu życia componentDidMount, componentDidUpdate i componentDidUnmount. Posłużę się przykładem, który pokaże, w jaki sposób hooki mogą zająć miejsce tych metod cyklu życia.

Przede wszystkim przyjrzyjmy się, jak wygląda useEffect. Ten hak to funkcja, która przyjmuje dwa argumenty. Pierwszym z nich jest wywołanie zwrotne z logiką efektów ubocznych. Drugi to opcjonalna tablica zależności. Hak useEffect wykonuje wywołanie zwrotne tylko wtedy, gdy zależności zmieniają się między renderowaniami. Pozwala to kontrolować, kiedy pojawia się efekt uboczny. Przyjrzyjmy się, jak wyglądają zależności i co robią.

Jeśli nie podasz tablicy zależności, efekt uboczny będzie działał po każdym renderowaniu.

Jeśli podasz pustą tablicę, efekt uboczny zostanie uruchomiony dopiero po początkowym renderowaniu, podobnie jak w przypadku componentDidMount.

Jeśli podasz wartość stanu lub właściwości w tablicy, efekt uboczny jest uruchamiany za każdym razem, gdy zmienia się zależność, podobnie jak w przypadku componentDidUpdate.

Zróbmy przykład z prostym programem. Mój komponent będzie miał przycisk, który zwiększy licznik. Gdy licznik osiągnie określoną liczbę, zmieni się tytuł dokumentu. Najpierw skonfigurujmy komponent z minimum. Będzie miał stan licznika i funkcję obsługi.

Jak widać, mam już funkcję useEffect na tym komponencie. W przypadku komponentów początkowe renderowanie „Zamontowany” jest rejestrowane w konsoli. Po kliknięciu przycisku liczba zwiększa się o 1. Idealnie, powiedzmy teraz, że chcemy rejestrować coś za każdym razem, gdy komponent jest renderowany, ale nie podczas pierwszego renderowania. Najlepszą rzeczą w haczykach jest to, że możesz mieć wiele haczyków w tym samym komponencie. Będę miał kilka instrukcji warunkowych do kontrolowania, kiedy efekt zostanie uruchomiony. To będzie wyglądać tak.

Utworzyłem zmienną ustawioną na false, która uniemożliwi uruchomienie efektu przy pierwszym renderowaniu. Po tym za każdym razem, gdy licznik zostanie zwiększony, będziesz mógł zobaczyć, że konsola drukuje poprawnie. Dzieje się tak, ponieważ ten hak nie miał argumentu zależności, więc jest renderowany za każdym razem, gdy zmienia się stan. Teraz zaimplementujmy filtr, który zmieni tytuł dokumentu po osiągnięciu określonej liczby w liczniku. W tym celu będę musiał użyć innego haka stanu i ustawić inną instrukcję warunkową.

Teraz, gdy licznik osiągnie 11, tytuł dokumentu zostanie zaktualizowany. Dzieje się tak, ponieważ gdy warunek zostanie spełniony, wartość stanu filtra zostaje zmieniona na true i przechwycenie jest wykonywane. Jest jeszcze jedna rzecz, którą możemy zrobić z useEffect. Niektóre efekty uboczne wymagają oczyszczenia, na przykład czyszczenie liczników czasu. Jeśli wywołanie zwrotne zwróci funkcję, przechwyt uzna to za czyszczenie efektu.

Zobaczysz, że czyszczenie będzie uruchamiane po każdym renderowaniu. Jest to podobne do tego, co możesz zrobić w komponentach klasy za pomocą componendDidUnmount.

Świetnie się bawiłem ucząc się tego haka. To jeden z najważniejszych haczyków, a także jeden z trudniejszych. Jednak po kilku ćwiczeniach ma to sens. Cóż, to wszystko dla useEffect. Udanego kodowania!