setstate w javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Śledzenie stanu aplikacji to sposób, w jaki aplikacja jednostronicowa (SAP) rejestruje zmiany i zgłasza je użytkownikowi. W przeciwieństwie do struktury szablonów, widoku, kontrolera (MVC), SAP nie przekierowuje użytkownika i dlatego potrzebuje sposobu na zarządzanie nadchodzącymi zmianami po stronie klienta. Aby zapoznać się z frameworkami MVC, zapoznaj się z tym przewodnikiem.

W React komponenty same mogą obsługiwać swój własny stan i odpowiednio się odradzać. Odbywa się to za pomocą metod cyklu życia, które są szczegółowo omówione tutaj. Na potrzeby tego artykułu przyjrzymy się, jak zmieniać stany za pomocą setState.

Ten przewodnik zakłada podstawową znajomość Reacta. Aby przejrzeć lub poznać podstawy Reacta, w tym artykule wymieniono niektóre z najlepszych zasobów edukacyjnych React.

Co to jest React setState?

Metoda React setState jest jak zmiana stanu komponentu ze stabilnością. Istnieje kilka szczegółowych zasad zmiany statusu w React.

  1. setState nie może być wywołany w komponencie klasy. Składniki klasy wywołują metodę konstruktora () i ustawiają ją w stan początkowy. Następnie możemy zmienić stan w dół, wywołując setState.
    W React są dwa różne typy komponentów. Jest to składnik funkcjonalny i składnik klasowy. Dla naszych celów mówimy tylko o składnikach klasy. Bardziej szczegółowe informacje można znaleźć w tym
    artykule dotyczącym różnic między komponentami funkcjonalnymi i klasowymi.
  2. Wywołując tylko funkcję setState w komponent klasy, możemy bezpośrednio odwołać się do samego komponentu za pomocą słowa kluczowego this. Wywołanie this.setState () jest najlepszą praktyką i zapewnia, że kod się nie zepsuje.
  3. Nie modyfikuj stanu bezpośrednio. Bezpośrednia zmiana stanu nie zostanie zapisana w React to Spawning. Cały punkt zmiany stanu polega na wywołaniu nowej interpretacji tego komponentu, aby odzwierciedlić zmiany wprowadzone u użytkownika.

Teraz spójrzmy na składnię w kontekście tych wytycznych.

Składnia setState React

Z pierwszej wytycznej wynika, że możemy używać setState tylko wewnątrz komponentu klasy. Załóżmy na przykład, że masz aplikację biznesową i chcesz zaimplementować koszyk na zakupy. Moglibyśmy skonfigurować komponent klasy o nazwie koszyk na zakupy. Ten komponent będzie odpowiedzialny za zarządzanie własnym statusem, gdy użytkownik doda element do swojego koszyka.

Rozbijając powyższy kod, deklarujemy komponent klasy Cart Jak wszystkie komponenty klas, my rozszerzamy reagujemy .Component.To jest standard Składnia React.

Ponieważ chcemy nadać stan temu panelowi, musimy wywołać metodę konstruktora. Dlatego konstruktor bazowy jest wywoływany z super (props). Możesz zobaczyć konstruktora bazy, który nie został wywołany z żadnymi rekwizytami. Oficjalna dokumentacja Reacta wymaga, aby metoda konstruktora bazowego była zawsze wywoływana z props

Teraz, gdy wykonaliśmy niezbędną składnię React do zbudowania komponentu klasy w celu utrzymania stanu, jesteśmy gotowi, aby wpłynąć na nasz stan początkowy. Jest to jedyny moment, w którym możemy odwoływać się bezpośrednio do stanu. Przypisz stan za pomocą wywołanie this.state =. {ShoppingCart: []} pozwala nam ustawić stan początkowy naszego koszyka na pustą tablicę <

h2> Przykład React setState

w poprzedniej sekcji zbadaliśmy składnię związaną z deklarowaniem stanu początkowego. Po ustawieniu stanu w metodzie konstruktora możemy renderować jak zwykle:

Twój koszyk

); }} ReactDOM.render (, document.getElementById (`root`));

Tutaj mamy komponent klasy z koszykiem zestawu stanu początkowego, który wyświetla koszyk w deklaracji return metody render. Zobaczmy, jak możemy użyć setState do aktualizacji naszego koszyka.

Zdefiniujemy funkcję, która doda nowy element do naszego koszyka, zachowując poprzednio dodane elementy. użyj operatora dyfuzji JavaScript (.. .) do wykonania kopii stanu początkowego i zaktualizowania z nowym stanem. W ten sposób koszyk będzie zawierał wszystkie dodane elementy.

funkcja addItem może być użyta w atrybucie onClick React przycisku, jeśli chcemy, aby użytkownik mógł dodać ten przedmiot, gdy przycisk klika .Dla naszych celów, zobacz Jak używać setState w części funkcji jest wystarczające cient.

Ten artykuł ma na celu wprowadzenie do zrozumienia, jak korzystać z setState i nie jest w żadnym wypadku wyczerpujący.

Wnioski

W tym artykule mamy dowiedziałem się, czym jest setState, wskazówek, jak go używać, składni i krótkiego przykładu. Ma to być podstawa artykułu, który zachęci Cię do głębszego kopania i praktyki wprowadzania aktualizacji stanu komponentów, które chcesz

oficjalna dokumentacja React zawiera dodatkowe przykłady, które zapewnią więcej możliwości przećwiczenia. Pamiętaj - w aplikacji pojedynczej strony śledzenie stanu komponentu jest niezbędne do wprowadzania zmian w użytkowniku.