1
00:00:02,510 --> 00:00:04,590
Teraz możemy się z powrotem komunikować.

2
00:00:05,470 --> 00:00:10,240
I tak naprawdę aktualizujemy naszą tablicę celów kursu w komponencie aplikacji.

3
00:00:11,040 --> 00:00:17,170
Ale to, co widzisz, jest pomimo tego, że tablica jest aktualizowana i wyraźnie nowy cel jest częścią tablicy, nasze wyniki

4
00:00:17,740 --> 00:00:19,960
tutaj na ekranie nie uległy zmianie.

5
00:00:20,260 --> 00:00:23,920
I to prowadzi nas do podstawowej koncepcji stanu reagowania.

6
00:00:25,170 --> 00:00:34,530
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

7
00:00:34,560 --> 00:00:36,060
miejscu w aplikacji.

8
00:00:36,270 --> 00:00:41,400
To, że kliknę ten przycisk tutaj, nie oznacza, że reakcja spowoduje ponowne renderowanie całego ekranu, aby upewnić

9
00:00:41,400 --> 00:00:43,890
się, że nie przegapi żadnej zmiany danych.

10
00:00:44,130 --> 00:00:46,080
Nie tak działa reakcja.

11
00:00:46,560 --> 00:00:48,270
Zamiast tego musisz powiedzieć.

12
00:00:48,330 --> 00:00:49,610
Reaguj, kiedy powinien.

13
00:00:49,650 --> 00:00:50,340
Re render.

14
00:00:51,050 --> 00:00:55,150
A potem robisz to, stosując koncepcję zwaną dyskursem państwowym.

15
00:00:55,230 --> 00:00:55,640
Cele są.

16
00:00:55,760 --> 00:00:57,610
Oto zwykła tablica JavaScript.

17
00:00:58,230 --> 00:01:01,640
Innymi słowy, reakcja całkowicie ignoruje to.

18
00:01:02,280 --> 00:01:06,840
Musimy zareagować, że zamiast tego nie powinno go ignorować i umrzeć.

19
00:01:06,900 --> 00:01:11,660
Ilekroć zmieniamy, tablica powinna aktualizować interfejs użytkownika.

20
00:01:11,690 --> 00:01:15,360
J jest kodem X poza komponentem, w którym go zmieniliśmy.

21
00:01:15,450 --> 00:01:17,490
Więc w tym przypadku komponentu aplikacji.

22
00:01:18,420 --> 00:01:22,440
Aby to zrobić, importujemy jeszcze jedną rzecz z pakietu REAC.

23
00:01:22,470 --> 00:01:29,490
I to jest stan wykorzystania funkcji wbudowanej w bibliotekę reagowania, tak zwany hook hook.

24
00:01:29,610 --> 00:01:32,400
I dowiesz się więcej o hakach w mojej reakcji na kompletny przewodnik.

25
00:01:32,430 --> 00:01:32,730
Kierunek.

26
00:01:32,730 --> 00:01:33,180
Oczywiście.

27
00:01:33,870 --> 00:01:38,340
Funkcja, której nie możemy wykonać, kończy się na wszystkich komponentach funkcjonalnych.

28
00:01:38,580 --> 00:01:42,770
I tylko zamiast komponentów funkcjonalnych w komponentach opartych na klasach.

29
00:01:42,810 --> 00:01:47,880
Masz również mechanizm zarządzania stanem, nie skupiający się na tym kursie tutaj, ale możesz to zrobić również

30
00:01:47,880 --> 00:01:48,240
tam.

31
00:01:48,660 --> 00:01:53,700
Ale w komponentach funkcjonalnych używasz tych funkcji haka, jak się je nazywa.

32
00:01:53,970 --> 00:01:54,960
Wszystkie te funkcje.

33
00:01:55,020 --> 00:01:59,280
Począwszy od użycia na początku do zarządzania stanem.

34
00:01:59,790 --> 00:02:06,390
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ć

35
00:02:06,390 --> 00:02:07,830
stan do ponownego renderowania.

36
00:02:08,610 --> 00:02:09,810
Oto element aplikacji.

37
00:02:10,200 --> 00:02:14,280
Nie chcę nazywać stanu użycia i stanu.

38
00:02:14,790 --> 00:02:16,410
Podaję tę tablicę tutaj.

39
00:02:16,800 --> 00:02:18,960
To jest mój tak zwany stan początkowy.

40
00:02:18,990 --> 00:02:21,690
Wtedy na razie mogę pozbyć się tej koncepcji.

41
00:02:22,260 --> 00:02:26,970
To mówi reakcję, że ten składnik ma jakiś stan i to jest mój stan początkowy.

42
00:02:27,180 --> 00:02:32,100
Nawiasem mówiąc, możesz również mieć wiele różnych elementów stanu i wszystkie są oglądane niezależnie.

43
00:02:32,370 --> 00:02:35,790
Ale tutaj mam tylko jeden główny stan i to jest mój szereg celów.

44
00:02:36,330 --> 00:02:40,290
I mówię reagować, że mam ten stan i że to jest mój stan początkowy.

45
00:02:41,220 --> 00:02:46,620
Teraz oczywiście chcę uzyskać dostęp do pamięci stanu początkowego i stałej, aby móc go używać

46
00:02:46,620 --> 00:02:50,280
w pozostałej części komponentu, ponieważ Core Scholes brakuje teraz wszędzie.

47
00:02:50,940 --> 00:02:52,980
Więc twierdzisz, że wszyscy coś zwrócili.

48
00:02:53,430 --> 00:02:56,490
Zwraca tablicę dokładnie dwóch elementów.

49
00:02:56,910 --> 00:03:01,110
Pierwszym elementem zawsze jest nasza najnowsza migawka stanu.

50
00:03:01,500 --> 00:03:05,760
Więc albo nasz stan początkowy, albo raz go zmieniliśmy, stan zaktualizowany.

51
00:03:06,450 --> 00:03:12,630
A drugim elementem tej tablicy zwróconym przez stan użycia jest funkcja, która pozwala nam zaktualizować ten

52
00:03:12,630 --> 00:03:13,080
stan.

53
00:03:13,500 --> 00:03:18,030
Zamień go na nową wartość i powiedz, że powinien się zrenderować.

54
00:03:18,930 --> 00:03:26,010
Więc tutaj użyje strukturyzowania tablicy D za pomocą nawiasów kwadratowych po lewej stronie mojego równego czasu tutaj, aby

55
00:03:26,730 --> 00:03:28,620
wyodrębnić te dwa elementy.

56
00:03:28,680 --> 00:03:31,270
Mam tablicę inde zwróconą przez stan użycia.

57
00:03:31,380 --> 00:03:33,810
I zawsze są dokładnie dwa elementy.

58
00:03:34,080 --> 00:03:37,200
Więc to nie zależy od tego, jaki rodzaj danych tatta przekazujesz tutaj.

59
00:03:37,440 --> 00:03:40,140
Użyj stanu daje tablicę z dokładnie dwoma elementami.

60
00:03:40,470 --> 00:03:42,740
Pierwszy element, twój obecny stan.

61
00:03:42,840 --> 00:03:45,230
Więc w moim przypadku moja tablica tutaj.

62
00:03:45,870 --> 00:03:48,120
Drugi element funkcji do aktualizacji stanu.

63
00:03:48,240 --> 00:03:50,460
Dlatego zazwyczaj nazywamy się jako zestaw.

64
00:03:51,150 --> 00:03:52,770
A potem dowolne imię wybrane przez Chote.

65
00:03:52,860 --> 00:03:54,330
Ustaw cele w moim przypadku.

66
00:03:54,900 --> 00:03:57,600
Więc teraz mam dwie stałe utworzone przy pomocy U. S.

67
00:03:57,720 --> 00:04:00,600
Pierwsza stała stanu przechowuje moją migawkę stanu.

68
00:04:00,840 --> 00:04:05,880
Po drugie, stała faktycznie posiada funkcję, którą możemy wywołać, aby zaktualizować migawkę tego stanu.

69
00:04:06,510 --> 00:04:09,360
Nazwiemy tę funkcję tutaj i dodamy nowy cel.

70
00:04:09,360 --> 00:04:13,410
Handler może nazwać ustalone cele kursu tu i teraz.

71
00:04:13,410 --> 00:04:16,740
Chcę zaktualizować moje cele kursu, dodając nowy cel.

72
00:04:17,400 --> 00:04:24,210
Teraz prostą formą robienia tego jest po prostu użycie moich starych celów kursu i wywołanie concat tutaj, a

73
00:04:24,210 --> 00:04:31,350
nie push, ponieważ push modyfikuje istniejący przedmiot, zamiast tego ustaw cele kursu, gdy nowa tablica zastąpi starą tablicę,

74
00:04:31,350 --> 00:04:37,110
a concat również dodaj element do tablicy, ale zwróci nową tablicę, do której ten

75
00:04:37,140 --> 00:04:38,520
element został dodany.

76
00:04:38,850 --> 00:04:41,870
Daje nam to zupełnie nowy zestaw, nie dotyka starego.

77
00:04:42,190 --> 00:04:46,080
I nie przeszliśmy zupełnie nowej tablicy, aby wyznaczyć cele kursu i zareagować.

78
00:04:46,080 --> 00:04:52,200
Następnie użyje tej nowej tablicy pod maską, zastąpi starszego raya w wewnętrznie

79
00:04:52,200 --> 00:04:59,760
zarządzanym stanie i ponownie to wyrenderuje, a tym samym zaktualizuje stałe cele dyskursu za pomocą nowej

80
00:04:59,760 --> 00:05:00,660
tablicy.

81
00:05:00,900 --> 00:05:06,210
W następnym cyklu renderowania, co oznacza, że reagowanie wykona tę funkcję tutaj, a zatem kiedy to

82
00:05:06,240 --> 00:05:10,470
zrobi, będzie odzwierciedlać, że nowe dane w Arjay to kod X.

83
00:05:11,430 --> 00:05:13,560
Więc tutaj chcę pogodzić mój nowy cel.

84
00:05:13,990 --> 00:05:15,360
A jeśli teraz mamy bezpieczeństwo.

85
00:05:16,850 --> 00:05:25,300
I klikam Dodaj cel, widzisz nowe cele dodawane do listy, ponieważ teraz reaguj ponownie renderuje ten ekran lub części,

86
00:05:25,360 --> 00:05:27,610
które muszą zostać zrenderowane.

87
00:05:28,120 --> 00:05:35,500
Za każdym razem, gdy aktualizujemy nasz stan teraz, to, jak dokładnie reaguje renderowanie renderów, nie jest przedmiotem tego kursu.

88
00:05:35,530 --> 00:05:39,850
Możesz się tego nauczyć i dedykowanych zasobów, takich jak oficjalne dokumenty lub mój kompletny przewodnik.

89
00:05:40,450 --> 00:05:45,040
Na razie wystarczy zauważyć, że reagują magicznie i skutecznie.

90
00:05:45,300 --> 00:05:49,840
Czy ponownie wyrenderowano stronę lub jej części, które wymagają ponownego renderowania?

91
00:05:50,020 --> 00:05:52,150
W oparciu o zastosowane zmiany stanu.