Teraz możemy się z powrotem komunikować.
I tak naprawdę aktualizujemy naszą tablicę celów kursu w komponencie aplikacji.
Ale to, co widzisz, jest pomimo tego, że tablica jest aktualizowana i wyraźnie nowy cel jest częścią tablicy, nasze wyniki
tutaj na ekranie nie uległy zmianie.
I to prowadzi nas do podstawowej koncepcji stanu reagowania.
React nie renderuje absolutorium w postaci kodu X, a zatem prawdziwy interfejs użytkownika przez cały czas, gdy jakieś zdarzenie zostanie wyzwolone w dowolnym
miejscu w aplikacji.
To, że kliknę ten przycisk tutaj, nie oznacza, że reakcja spowoduje ponowne renderowanie całego ekranu, aby upewnić
się, że nie przegapi żadnej zmiany danych.
Nie tak działa reakcja.
Zamiast tego musisz powiedzieć.
Reaguj, kiedy powinien.
Re render.
A potem robisz to, stosując koncepcję zwaną dyskursem państwowym.
Cele są.
Oto zwykła tablica JavaScript.
Innymi słowy, reakcja całkowicie ignoruje to.
Musimy zareagować, że zamiast tego nie powinno go ignorować i umrzeć.
Ilekroć zmieniamy, tablica powinna aktualizować interfejs użytkownika.
J jest kodem X poza komponentem, w którym go zmieniliśmy.
Więc w tym przypadku komponentu aplikacji.
Aby to zrobić, importujemy jeszcze jedną rzecz z pakietu REAC.
I to jest stan wykorzystania funkcji wbudowanej w bibliotekę reagowania, tak zwany hook hook.
I dowiesz się więcej o hakach w mojej reakcji na kompletny przewodnik.
Kierunek.
Oczywiście.
Funkcja, której nie możemy wykonać, kończy się na wszystkich komponentach funkcjonalnych.
I tylko zamiast komponentów funkcjonalnych w komponentach opartych na klasach.
Masz również mechanizm zarządzania stanem, nie skupiający się na tym kursie tutaj, ale możesz to zrobić również
tam.
Ale w komponentach funkcjonalnych używasz tych funkcji haka, jak się je nazywa.
Wszystkie te funkcje.
Począwszy od użycia na początku do zarządzania stanem.
Tak więc, aby zarządzać danymi, które po zmianie powinny prowadzić do interfejsu użytkownika tego komponentu, w którym udaje się podać
stan do ponownego renderowania.
Oto element aplikacji.
Nie chcę nazywać stanu użycia i stanu.
Podaję tę tablicę tutaj.
To jest mój tak zwany stan początkowy.
Wtedy na razie mogę pozbyć się tej koncepcji.
To mówi reakcję, że ten składnik ma jakiś stan i to jest mój stan początkowy.
Nawiasem mówiąc, możesz również mieć wiele różnych elementów stanu i wszystkie są oglądane niezależnie.
Ale tutaj mam tylko jeden główny stan i to jest mój szereg celów.
I mówię reagować, że mam ten stan i że to jest mój stan początkowy.
Teraz oczywiście chcę uzyskać dostęp do pamięci stanu początkowego i stałej, aby móc go używać
w pozostałej części komponentu, ponieważ Core Scholes brakuje teraz wszędzie.
Więc twierdzisz, że wszyscy coś zwrócili.
Zwraca tablicę dokładnie dwóch elementów.
Pierwszym elementem zawsze jest nasza najnowsza migawka stanu.
Więc albo nasz stan początkowy, albo raz go zmieniliśmy, stan zaktualizowany.
A drugim elementem tej tablicy zwróconym przez stan użycia jest funkcja, która pozwala nam zaktualizować ten
stan.
Zamień go na nową wartość i powiedz, że powinien się zrenderować.
Więc tutaj użyje strukturyzowania tablicy D za pomocą nawiasów kwadratowych po lewej stronie mojego równego czasu tutaj, aby
wyodrębnić te dwa elementy.
Mam tablicę inde zwróconą przez stan użycia.
I zawsze są dokładnie dwa elementy.
Więc to nie zależy od tego, jaki rodzaj danych tatta przekazujesz tutaj.
Użyj stanu daje tablicę z dokładnie dwoma elementami.
Pierwszy element, twój obecny stan.
Więc w moim przypadku moja tablica tutaj.
Drugi element funkcji do aktualizacji stanu.
Dlatego zazwyczaj nazywamy się jako zestaw.
A potem dowolne imię wybrane przez Chote.
Ustaw cele w moim przypadku.
Więc teraz mam dwie stałe utworzone przy pomocy U. S.
Pierwsza stała stanu przechowuje moją migawkę stanu.
Po drugie, stała faktycznie posiada funkcję, którą możemy wywołać, aby zaktualizować migawkę tego stanu.
Nazwiemy tę funkcję tutaj i dodamy nowy cel.
Handler może nazwać ustalone cele kursu tu i teraz.
Chcę zaktualizować moje cele kursu, dodając nowy cel.
Teraz prostą formą robienia tego jest po prostu użycie moich starych celów kursu i wywołanie concat tutaj, a
nie push, ponieważ push modyfikuje istniejący przedmiot, zamiast tego ustaw cele kursu, gdy nowa tablica zastąpi starą tablicę,
a concat również dodaj element do tablicy, ale zwróci nową tablicę, do której ten
element został dodany.
Daje nam to zupełnie nowy zestaw, nie dotyka starego.
I nie przeszliśmy zupełnie nowej tablicy, aby wyznaczyć cele kursu i zareagować.
Następnie użyje tej nowej tablicy pod maską, zastąpi starszego raya w wewnętrznie
zarządzanym stanie i ponownie to wyrenderuje, a tym samym zaktualizuje stałe cele dyskursu za pomocą nowej
tablicy.
W następnym cyklu renderowania, co oznacza, że reagowanie wykona tę funkcję tutaj, a zatem kiedy to
zrobi, będzie odzwierciedlać, że nowe dane w Arjay to kod X.
Więc tutaj chcę pogodzić mój nowy cel.
A jeśli teraz mamy bezpieczeństwo.
I klikam Dodaj cel, widzisz nowe cele dodawane do listy, ponieważ teraz reaguj ponownie renderuje ten ekran lub części,
które muszą zostać zrenderowane.
Za każdym razem, gdy aktualizujemy nasz stan teraz, to, jak dokładnie reaguje renderowanie renderów, nie jest przedmiotem tego kursu.
Możesz się tego nauczyć i dedykowanych zasobów, takich jak oficjalne dokumenty lub mój kompletny przewodnik.
Na razie wystarczy zauważyć, że reagują magicznie i skutecznie.
Czy ponownie wyrenderowano stronę lub jej części, które wymagają ponownego renderowania?
W oparciu o zastosowane zmiany stanu.