Stan aplikacji (state) – Kurs React – cz. 5

Zarządzanie stanem aplikacji to kolejna istotna rzecz w React. W tej części wyjaśniam czym jest state oraz pokazuję przykład jego implementacji.

Czym jest stan aplikacji (state)?

Stan aplikacji to miejsce, w którym przechowujemy różnego rodzaju informacje na temat aplikacji. Na podstawie tych danych React renderuje aplikację, a w przypadku jeśli dane zmienią się to React zadba o to, żeby dokonała się aktualizacja. To oznacza, że głównym zadaniem programisty to zarządzanie tymi danymi.

Co można osiągnąć, dzięki state?

State umożliwia renderowanie danych w komponentach, dzięki niemu można uzyskać informacje na temat czy dany element został kliknięty czy strona się załadowała lub zaktualizować treść w aplikacji. Możliwości jest naprawdę dużo. Oczywiście jeśli zaimplementujemy daną funkcjonalność, ponieważ state to tylko dane.

Jak skorzystać ze stanu w React?

Do wykorzystania stanu w React potrzebne jest dopisanie kilka linijek kodu.

Kod należy dodać na początku komponentu, w tym przypadku będzie to główny komponent App. W powyższym kodzie zostaje wywołany konstruktor klasy, a następnie funkcja super(), która jest wymagana do dziedziczenia – w tym przypadku po React.Component. Następnie ustawiany jest początkowy stan aplikacji. W obiekcie dodany jest przykładowy element isClicked z wartością false. Wartości mogą być różne np. tablica, obiekt, tekst.

Przykładowy komponent – Button

W tej części zostanie dodany kolejny komponent, który będzie wykorzystany w przykładzie.

Zostaną wykonane następujące kroki:

• utworzenie folderu Button w folderze components
• utworzenie pliku Button.js w folderze Button
• utworzenie folderu styled, a w nim Button.js

Zawartość plików jest następująca.

components/Button/Button.js

this.props.children to elementy, które znajdują się pomiędzy otwarciem i zamknięciem tagu.

components/Button/styled/Button.js

Struktura plików i folderów:

Przykład użycia state

W przykładzie zostanie stworzony komponent, w którym będzie zmieniać się treść po kliknięciu.

Wywołany zostanie komponent Button. Do wywołania zdarzenia kliku, należy przekazać atrybut onClick z funkcją, która będzie odpowiedzialna za zmianę stanu.

Wyświetlanie treści na podstawie state

Na podstawie stanu tj. this.state.isClicked wyświetlimy odpowiedni tekst. Jeśli isClicked będzie równy true to wtedy zostanie wyświetlony pierwszy tekst, jeśli false to drugi.

Teraz należy stworzyć funkcję onClick() w komponencie App.

W nowej funkcji onClick będzie zmieniony stan aplikacji, a dokładniej wartość isClicked. Po kliknięciu wartość powinna być przeciwna do aktualnej (true zmienia się w false, false w true).

Przypisanie this

Do poprawnego działania potrzebne jest przypisanie this do komponentu.

Więcej o tym dlaczego trzeba przypisywać this w artykule na medium.com.

W konstruktorze pojawia się dodatkowa linia.

Już prawie koniec… onClick w Button.js

Pozostało jeszcze przypisanie onClick w komponencie Button, ponieważ aktualnie onClick jest przekazywany jako props i należy go wywołać w środku komponentu Button

Efekt końcowy

Wszystkie zmiany zostały wykonane i klik w button już działa. Plik App.js po zmianach jest następujący.

Aplikacja po wyrenderowaniu prezentuje się następująco

Po kliknięciu w Button zmienia się stan i React aktualizuje komponent.

Po ponownym kliknięciu aplikacja wróci do poprzedniego stanu.

Aktualizacja state tylko za pomocą setState()

Ważne jest, aby dane aktualizować tylko przez setState(). Przypisanie stanu w taki sposób: this.state.isClicked = true nie spowoduje ponownego renderu komponentu (treść nie zaktualizuje się).

Ćwiczenie

Wykonaj komponent lub element, który w zależności od stanu będzie wyświetlał inna treść.

Dodatkowe:

Wykonaj licznik, który będzie zliczał kliknięcie w dany komponent np. w Button oraz wyświetli wartość w tym komponencie