1 00:00:02,220 --> 00:00:07,770 Stan jest kluczową koncepcją i reaguje, dlatego ważne jest dla mnie, abyś zrozumiał, jak to 2 00:00:07,770 --> 00:00:08,160 działa. 3 00:00:08,670 --> 00:00:14,340 U. S. stan to sposób zarządzania stanem i komponentami funkcjonalnymi, a stan może być dowolny. 4 00:00:14,350 --> 00:00:15,510 To nie musi być tablica. 5 00:00:15,570 --> 00:00:20,580 Może to być jakiś tekst, liczba, obiekt, tablica, wartość logiczna, cokolwiek podobnego. 6 00:00:21,570 --> 00:00:24,780 Użycie stanu zawsze zwraca tablicę z dwoma elementami. 7 00:00:24,870 --> 00:00:30,450 Bez względu na swój status, jeśli stan jest stanem bezużytecznym, nadal zwraca tablicę z dokładnie dwoma 8 00:00:30,450 --> 00:00:30,930 elementami. 9 00:00:31,380 --> 00:00:35,760 Ponieważ wtedy pierwszym elementem jest zawsze twoja najnowsza migawka stanu. 10 00:00:36,210 --> 00:00:43,020 Drugi element to funkcja, która pozwala aktualizować migawkę stanu za każdym razem, gdy aktualizujesz 11 00:00:43,080 --> 00:00:44,350 migawkę stanu. 12 00:00:44,520 --> 00:00:46,020 React zrobi dwie rzeczy. 13 00:00:46,620 --> 00:00:49,950 Zaktualizuje te wewnętrznie przechowywane dane stanu. 14 00:00:50,250 --> 00:00:56,130 Na przykład tutaj, kiedy dodamy nasz pierwszy nowy cel, zastąpi on stan początkowy naszym 15 00:00:56,130 --> 00:00:57,090 nowym stanem. 16 00:00:57,210 --> 00:01:00,150 W tym przypadku z nową tablicą, którą stworzyliśmy za pomocą Concat. 17 00:01:00,870 --> 00:01:07,500 A kiedy zaktualizuje dane wewnętrznie, ponownie wywoła tę funkcję komponentu i wykona 18 00:01:07,500 --> 00:01:08,640 całą funkcję. 19 00:01:08,850 --> 00:01:11,250 I dlatego wszystkie ponownie renderowały ten J jako kod X. 20 00:01:12,020 --> 00:01:14,400 Teraz pod maską nie będzie renderować całej domeny. 21 00:01:14,400 --> 00:01:20,250 Po prostu sprawdzi, które części DOM wymagają aktualizacji, ale dokona ponownej oceny całego komponentu. 22 00:01:20,920 --> 00:01:27,030 Oznacza to również oczywiście, że ponownie wykonuje stan użycia, ale wewnętrzny stan użycia działa tak, że inicjuje 23 00:01:27,030 --> 00:01:32,400 stan ustalony tylko wtedy, gdy komponent jest renderowany po raz pierwszy, a następnie Rehren 24 00:01:32,400 --> 00:01:33,420 poddaje recyklingowi. 25 00:01:33,690 --> 00:01:39,630 Po prostu wyciąga migawkę najnowszego stanu i w zasadzie ignoruje ustawioną tutaj wartość początkową. 26 00:01:41,580 --> 00:01:43,770 Tak działa stan. 27 00:01:44,370 --> 00:01:49,140 Teraz ważne jest, aby zrozumieć, że ten sposób aktualizacji naszego osiedla w tym scenariuszu nie jest 28 00:01:49,140 --> 00:01:50,310 najlepszym możliwym sposobem. 29 00:01:50,670 --> 00:01:52,980 Tak powielone i skomentowane. 30 00:01:53,160 --> 00:01:54,900 Czy nadal mieliśmy to dla odniesienia? 31 00:01:54,930 --> 00:01:56,880 Ale widzimy też lepsze podejście. 32 00:01:57,390 --> 00:01:58,830 To podejście wyraźnie działa. 33 00:01:58,950 --> 00:02:00,600 I w większości przypadków będzie działać. 34 00:02:01,170 --> 00:02:06,750 Ale musisz być świadomy, że cały ten stan aktualizuje część renderowania reagowania. 35 00:02:07,230 --> 00:02:08,880 Czy koniec nie jest zarządzany przez zareagować. 36 00:02:09,330 --> 00:02:15,180 A kiedy zasób i oświadczysz, że nie wstrzyma wszystkiego i natychmiast ponownie uruchom aplikację. 37 00:02:15,510 --> 00:02:17,910 Zamiast tego zaplanowano aktualizację stanu. 38 00:02:18,150 --> 00:02:23,550 A jeśli masz aplikację z dużą ilością bieżących aktualizacji stanu i wykonywanych jest wiele pracy, 39 00:02:23,820 --> 00:02:29,280 co nie jest przypadkiem i dotyczy aplikacji, ale może być nią i innymi aplikacjami, aktualizacja 40 00:02:29,340 --> 00:02:32,010 stanu może zostać odroczona o kilka milisekund. 41 00:02:32,580 --> 00:02:39,780 Oznacza to, że faktycznie, jeśli użytkownik kliknie, doda złoto wiele razy, podstawowy Skold, który jest obecnie renderowany na 42 00:02:39,780 --> 00:02:45,900 ekranie, może nie być naszym najnowszym stanem, ponieważ nie wszystkie aktualizacje stanu mogły zostać 43 00:02:45,900 --> 00:02:46,950 jeszcze przetworzone. 44 00:02:47,640 --> 00:02:53,970 Dlatego istnieje lepsza forma aktualizacji tego niż przekazywanie naszych danych nowego stanu w celu ustalenia celów kursu. 45 00:02:54,360 --> 00:03:01,710 Możesz przekazać funkcję ustawiania celów kursu, funkcję, która odbiera najnowsze cele stanu przed kursem i musi 46 00:03:01,800 --> 00:03:05,670 zwrócić nową migawkę stanu i dobrze reagować. 47 00:03:05,670 --> 00:03:11,070 Następnie zaplanuj wszystkie te wywołania funkcji i zagwarantuj, że zostaną one wykonane we 48 00:03:11,070 --> 00:03:17,160 właściwej kolejności, aby nawet jeśli aktualizacja stanu została odroczona do czasu ich aktualizacji po wykonaniu, gwarantuje 49 00:03:17,160 --> 00:03:18,900 to również wykonanie pierwszej. 50 00:03:19,470 --> 00:03:25,080 A potem tutaj po prostu Darfor za złoto przed powrotem do kursu, który wciąż nie jest nowym 51 00:03:25,080 --> 00:03:25,440 celem. 52 00:03:25,890 --> 00:03:28,680 To da taki sam wynik jak poprzednio w tej aplikacji. 53 00:03:28,920 --> 00:03:31,850 W tej prostej aplikacji takie podejście byłoby w porządku. 54 00:03:31,890 --> 00:03:39,270 Zasadniczo nie ma szans na zareagowanie, odroczenie aktualizacji tak długo, że skończyłoby się to niepoprawnym stanem. 55 00:03:39,720 --> 00:03:43,050 Ale jest to podejście kuloodporne, które zawsze będzie działać. 56 00:03:43,410 --> 00:03:49,680 Potrzebujesz go tylko wtedy, gdy twoja aktualizacja stanu zależy od danych poprzedniego stanu, tak jak to się dzieje. 57 00:03:50,010 --> 00:03:55,860 Jeśli aktualizacja stanu jest nowym elementem danych, który nie zależy od poprzedniego stanu, zawsze możesz 58 00:03:55,920 --> 00:03:58,380 bezpiecznie użyć tej niefunkcjonalnej formy. 59 00:03:59,160 --> 00:04:03,150 A oto uwaga dodatkowa, ponieważ oczywiście wszystkie skróty wykorzystują składnię funkcji 60 00:04:03,150 --> 00:04:06,780 eralnych i pozbywają się instrukcji return w nawiasach klamrowych. 61 00:04:07,050 --> 00:04:10,110 Ponieważ mamy tylko jedno wyrażenie, które natychmiast zwracamy. 62 00:04:10,710 --> 00:04:15,690 Więc teraz z tą reklamą, pytał wcześniej Brooks, ale jest to nieco bezpieczniejsze podejście i zalecił 63 00:04:15,690 --> 00:04:16,080 podejście. 64 00:04:16,110 --> 00:04:18,690 Jeśli aktualizacja stanu zależy od poprzedniego stanu.