Cykl życia komponentu – Kurs React – cz. 6

Dowiedz się czym jest cykl życia komponentu oraz jak z tego skorzystać.

Czym jest cykl życia w React?

Każdy komponent Reactowy posiada cykl życia. Cykl życia zaczyna się jeszcze przed powstaniem komponentu, aż do zakończenia działania. Metody cyklu życia dają dostęp do poszczególnych przedziałów działania komponentu, w których można wykonać kod. Na przykład na podstronie, która wyświetla dane z API, wykonanie zapytania powinno nastąpić po zamontowaniu komponentu.

Dzięki metodom cyklu życia można również zadbać o optymalne zużycie pamięci przeglądarki. Przed odmontowaniem komponentu warto wyłączyć nieużywane funkcje, aby nie zajmowały pamięci w programie (funkcje, które zostały zainicjowane i wymagają wyłączenia).

Nie trzeba uczyć się na pamięć wszystkich metod, ale warto wiedzieć o ich istnieniu.

Poniżej diagram, który przedstawia cykl życia w komponencie.

Wizualizacja dostępna tutaj.

Najczęściej używane metody cyklu życia

Poniżej przedstawię tylko kilka najczęściej używanych metod. W codziennej pracy z Reactem wystarczy poznać tylko kilka z nich, natomiast pozostałe będą potrzebne tylko w specyficznych przypadkach.

componentDidMount()

Metoda wywołuje się w momencie zamontowania komponentu. W tej metodzie dostępny jest DOM i można wykonywać na nim operacje.

Przykład użycia: wykonywanie zapytania do API, pobieranie danych

componentDidUpdate()

Jak nazwa wskazuje, metoda wykonywana jest jeśli komponent jest aktualizowany. W pierwszym wczytaniu komponentu funkcja nie jest wywoływana.

Przykład użycia: sprawdzenie danych (np. dane zalogowanego użytkownika), wykonywanie danej akcji jeśli zmienią się dane

componentWillUnmount()

Wywoływana w momencie odmontowania komponentu.

Przykład użycia: zakończenie działania jakiejś funkcji (która działa w tle np. zegarek i aktualizacja czasu co sekundę

Pozostałe cykle życia

Metodą jest również contructor() i render(), w której zamieszczamy ciało aplikacji. Szczegółowe informacje na temat wszystkich metod można znaleźć w oficjalnej dokumentacji Reacta.

Jak tego używać?

Tak samo jak funkcje w JavaScript.

W powyższym przykładowym komponencie została zastosowana metoda componentDidMount(). W środku metody należy dodać kod, który ma zostać wykonany w danym cyklu. W tym przypadku wywołana została funkcja getSomeDataFromApi() (zakładając, że implementacja znajduje się w innym miejscu, a tutaj ją tylko uruchamiamy).

Ćwiczenie

Zapoznaj się z listą dostępnych metod w dokumentacji Reacta. Wystarczy, że będziesz świadomy jakie są możliwości. Pomiń niewspierane metody (z dopiskiem UNSAFE__).

Praktyczne przykłady będą przedstawione w przyszłych częściach kursu.

Podziel się opinią na temat kursu! Pomógł Ci?