1
00:00:02,360 --> 00:00:08,270
Właśnie pokazałem ci widok przewijania i już czas puścić i pozbyć się widoku

2
00:00:08,330 --> 00:00:11,000
przewijania, dlaczego? Widok przewijania jest

3
00:00:11,000 --> 00:00:13,600
świetny, jeśli masz przewijany obszar na ekranie,

4
00:00:13,790 --> 00:00:19,490
ale nie jest tak świetny, jeśli masz listę, w której nie wiesz, jak długo będzie lub

5
00:00:19,490 --> 00:00:21,310
która może być bardzo długa.

6
00:00:21,320 --> 00:00:27,440
Teraz, jeśli wiesz, że masz jakąś treść, być może listę danych, ale wiesz, że to tylko

7
00:00:27,440 --> 00:00:33,740
20 elementów, więc prawdopodobnie przekroczy moje granice ekranu, ale nigdy nie będzie więcej niż 20 lub

8
00:00:33,740 --> 00:00:35,500
15 elementów, możesz użyć

9
00:00:35,750 --> 00:00:42,500
widoku przewijania, ale jeśli masz bardzo długie listy, widok przewijania może być bardzo nieefektywny, ponieważ powoduje, że

10
00:00:42,500 --> 00:00:47,510
renderuje z góry wszystkie elementy, nawet te, których nie ma na ekranie.

11
00:00:47,510 --> 00:00:53,220
Oznacza to, że nawet niewidoczne obecnie cele są w pełni renderowane, a przewijanie tak bardzo

12
00:00:53,300 --> 00:00:58,520
długiej listy z dużą ilością elementów lub wykonywanie innych czynności na ekranie może

13
00:00:58,910 --> 00:01:00,620
naprawdę spowolnić działanie aplikacji.

14
00:01:00,650 --> 00:01:05,870
Jeśli masz listę zawierającą setki lub tysiące elementów i wszystkie są zawsze renderowane, nawet jeśli

15
00:01:05,870 --> 00:01:09,500
ich nie widzisz, może to naprawdę spowolnić Twoją aplikację.

16
00:01:09,500 --> 00:01:16,130
Aby to przyspieszyć, w React Native jest wbudowany komponent, który obsługuje takie nieskończone listy lub listy,

17
00:01:16,130 --> 00:01:20,460
które są potencjalnie bardzo długie w bardziej wydajny sposób, i to

18
00:01:20,510 --> 00:01:28,580
jest komponent FlatList, który importujesz również z React Native. FlatList zastępuje widok przewijania, że tak powiem, więc tutaj

19
00:01:28,580 --> 00:01:35,960
możemy po prostu użyć FlatList, który jest elementem samozamykającym się, a FlatList ma dwie ważne właściwości

20
00:01:36,050 --> 00:01:42,770
- pierwszą właściwością jest właściwość danych, w której wskazujesz dane wejściowe, a to powinno

21
00:01:42,770 --> 00:01:44,570
wskazywać na tablicę.

22
00:01:44,600 --> 00:01:49,610
Dlatego wskazuję cele kursu, ponieważ to dane, które chcę przedstawić.

23
00:01:49,610 --> 00:01:57,170
Drugą ważną właściwością jest element renderujący, który przyjmuje funkcję wywoływaną dla każdego elementu w

24
00:01:57,170 --> 00:02:00,840
danych w celu renderowania elementu listy.

25
00:02:00,850 --> 00:02:04,060
Jest to funkcja, która pobierze trochę danych o tym

26
00:02:04,060 --> 00:02:08,410
elemencie, stąd nadam nazwę argumentowi danych elementu, a następnie musi zwrócić komponent,

27
00:02:08,410 --> 00:02:11,470
więc tutaj zwrócę ten sam widok, który

28
00:02:11,470 --> 00:02:16,270
miałem wcześniej, po prostu pozbyłem się instrukcji logika mapowania, więc nadal zwracam ten widok.

29
00:02:16,270 --> 00:02:21,670
Teraz nie musisz już tutaj ustawiać klucza, ale wrócę do tego, w jaki sposób jest on wprowadzany za sekundę.

30
00:02:21,670 --> 00:02:27,060
Więc teraz otrzymujemy dane przedmiotu i dlatego nie mamy tutaj celu.

31
00:02:27,190 --> 00:02:35,820
Dane elementu są bardziej złożonym obiektem, ale tam masz to, co masz, oprócz elementu masz również indeks, więc liczba, pozycja

32
00:02:35,820 --> 00:02:36,840
tego

33
00:02:36,840 --> 00:02:44,180
elementu w tablicy zaczynająca się od 0 i separatory, które pozwoliłyby ci aby w zasadzie dynamicznie

34
00:02:44,180 --> 00:02:50,270
renderować separatory między elementami listy, nie zrobimy tego tutaj, ale elementem będą twoje dane,

35
00:02:50,270 --> 00:02:52,340
więc jeden element z twoich

36
00:02:52,340 --> 00:02:57,080
danych wejściowych i dlatego jest to jeden z naszych celów.

37
00:02:57,230 --> 00:03:02,920
a jeśli to zrobimy i zapiszemy to, nauczmy się teraz React Native, być może tutaj

38
00:03:03,180 --> 00:03:08,430
na iPhonie, aby pomieszać rzeczy i możemy dodać rzeczy tutaj, a jeśli

39
00:03:08,670 --> 00:03:14,700
dodam dużo, a następnie zamknę klawiaturę, mogę przewijać, ale ty ” Zobaczę, że jest ostrzeżenie.

40
00:03:15,630 --> 00:03:21,120
Rozwijamy to, widzimy wirtualizację listy brakujących kluczy dla elementów, więc jest

41
00:03:21,120 --> 00:03:24,450
to kolejne ostrzeżenie związane z kluczami.

42
00:03:24,450 --> 00:03:31,680
Powodem tego jest to, że FlatList automatycznie dodaje klucze do elementów, ale tylko wtedy,

43
00:03:31,680 --> 00:03:40,770
gdy dane, dane wejściowe mają określony kształt, a nasz obecny kształt, w którym po prostu mamy tablicę ciągów,

44
00:03:40,900 --> 00:03:45,130
nie jest obsługiwany. Można oczekiwać, że

45
00:03:45,150 --> 00:03:53,910
kształt nie będzie miał celów, które są po prostu łańcuchami, ale zamiast tego twoja lista jest

46
00:03:54,390 --> 00:04:02,640
listą obiektów, w których musisz mieć właściwość klucza w tym obiekcie, a tutaj faktycznie utworzymy

47
00:04:02,640 --> 00:04:09,560
losowy klucz za pomocą Math . losowo, a następnie przekonwertowałem to na ciąg, ponieważ powinien to być ciąg

48
00:04:09,560 --> 00:04:10,420
i oczywiście

49
00:04:10,430 --> 00:04:14,810
nie jest to całkowicie unikalny, możesz mieć tę samą liczbę losową dwa razy, ale jest

50
00:04:14,810 --> 00:04:17,750
wystarczająca do tego dema tutaj i teraz nie możesz mieć

51
00:04:17,750 --> 00:04:19,610
żadnych innych danych tutaj, w tym

52
00:04:19,610 --> 00:04:21,480
obiekcie klucz jest jedyną konieczną właściwością, więc

53
00:04:21,500 --> 00:04:24,610
tutaj będę miał właściwość value, ale mógłbyś nazwać tę wartość lub

54
00:04:24,640 --> 00:04:25,720
tekst lub cokolwiek

55
00:04:26,360 --> 00:04:28,190
chcesz, pójdę z wartością i to

56
00:04:28,190 --> 00:04:29,580
jest teraz mój wpisany cel.

57
00:04:29,590 --> 00:04:36,070
Tak więc teraz nasza tablica celów kursu jest tablicą obiektów, w których każdy obiekt ma właściwość

58
00:04:36,070 --> 00:04:37,720
klucza i właściwość wartości,

59
00:04:37,720 --> 00:04:44,320
a teraz, jeśli wprowadzimy tę tablicę celów kursu do FlatList, FlatList jest szczęśliwy, ponieważ oczekuje źródła

60
00:04:44,320 --> 00:04:50,800
danych, w którym macie tablicę obiekty, w których każdy obiekt ma kluczową właściwość, a następnie

61
00:04:50,800 --> 00:04:52,920
cokolwiek chcesz. Teraz, aby wyprowadzić

62
00:04:52,930 --> 00:04:59,020
nasze dane, nie wystarczy już uzyskać dostęp do itemData. item, ponieważ item jest teraz przedmiotem, a nie

63
00:04:59,020 --> 00:05:05,590
tylko ciągiem, ale item będzie miał teraz klucz i właściwość value, ponieważ to właśnie tam konfigurujemy, a ja mogę po

64
00:05:05,590 --> 00:05:12,490
prostu uzyskać dostęp do właściwości value w celu wygenerowania tekstu. A teraz, jeśli zapiszemy to, a to przebuduje,

65
00:05:12,530 --> 00:05:21,350
a zatem teraz, jeśli spróbujemy to jeszcze raz przy pomocy Learn React Native, zamknij klawiaturę, zobaczysz, że nie otrzymujemy już

66
00:05:21,350 --> 00:05:27,380
ostrzeżenia i nadal możemy przewijać to, oczywiście, tutaj nie pojawia się błąd, ponieważ teraz

67
00:05:27,380 --> 00:05:32,990
mamy tutaj tę kluczową właściwość. Teraz, jeśli masz dane, w których

68
00:05:32,990 --> 00:05:41,000
nie masz właściwości klucza i nie chcesz jej przekształcać, powiedzmy, że zamiast tego masz identyfikator, który spowodowałby ostrzeżenie, jak

69
00:05:43,570 --> 00:05:45,160
widać, jeśli

70
00:05:45,760 --> 00:05:52,290
to przetestuję, otrzymamy ostrzeżenie tutaj , w takim przypadku możesz również dodać inną właściwość do

71
00:05:52,290 --> 00:05:59,440
FlatList oprócz danych i elementu renderowania, możesz dodać właściwość wyodrębniającą klucz, która przyjmuje funkcję, która informuje

72
00:05:59,440 --> 00:06:06,190
FlatList, jak wyodrębnić klucz i domyślnie logika jest taka w przedmiocie i poszukaj właściwości klucza, ale

73
00:06:06,190 --> 00:06:12,220
teraz z ekstraktorem kluczy możesz to zmienić. Narzędzie do pobierania kluczy przyjmuje funkcję, która przyjmuje dwa argumenty - przedmiot, na który patrzy,

74
00:06:12,220 --> 00:06:17,800
oraz indeks tego elementu, a teraz musisz zwrócić klucz i domyślnie szukałby elementu. klucz, więc jest to

75
00:06:17,800 --> 00:06:21,740
domyślna logika, której nie trzeba dodawać.

76
00:06:21,940 --> 00:06:29,950
Teraz tutaj zmieniam klucz lub unikatowy identyfikator na rekwizyt ID i dlatego zmienię to w ekstraktorze kluczy,

77
00:06:29,950 --> 00:06:35,920
aby uzyskać identyfikator jako klucz, a teraz pozbywacie się ostrzeżenia, ponieważ

78
00:06:35,920 --> 00:06:42,160
informujesz React Native's FlatList, jak uzyskać unikalny klucz dla każdego elementu na liście.

79
00:06:42,670 --> 00:06:53,850
Więc teraz, jeśli ponownie nauczysz się tutaj React Native i dodamy to, zobaczysz, że działa, możemy to przewinąć

80
00:06:54,030 --> 00:07:00,150
i nie otrzymamy ostrzeżenia. To jest FlatList i powinieneś używać FlatList do

81
00:07:00,360 --> 00:07:05,370
bardzo długich list, do list, w których nie wiesz, jak długo będą, ale gdzie potencjalnie są

82
00:07:05,370 --> 00:07:10,110
bardzo długie, ponieważ daje to lepszą wydajność niż widok przewijania, który z drugiej strony świetnie,

83
00:07:10,110 --> 00:07:14,970
jeśli wiesz, że masz tylko ograniczoną liczbę elementów, które prawdopodobnie przekroczą granice ekranu, ale w

84
00:07:14,970 --> 00:07:18,210
których nie będzie zbyt wiele renderowanych zbędnych elementów poza ekranem.