1
00:00:02,360 --> 00:00:08,270
Ora ti ho appena mostrato la vista di scorrimento ed è già tempo di lasciarsi andare e liberarsi della

2
00:00:08,330 --> 00:00:11,000
vista di scorrimento, perché? La vista di

3
00:00:11,000 --> 00:00:13,600
scorrimento è fantastica se hai un'area scorrevole sul

4
00:00:13,790 --> 00:00:19,490
tuo schermo ma non è così eccezionale se hai un elenco in cui non sai quanto tempo sarà

5
00:00:19,490 --> 00:00:21,310
o che potrebbe essere molto lungo.

6
00:00:21,320 --> 00:00:27,440
Ora se sai di avere del contenuto, forse un elenco di dati ma sai che sono solo 20

7
00:00:27,440 --> 00:00:33,740
elementi, quindi probabilmente supererà i miei limiti dello schermo ma non saranno mai più di 20 o 15 elementi,

8
00:00:33,740 --> 00:00:35,500
quindi puoi usare una

9
00:00:35,750 --> 00:00:42,500
vista di scorrimento ma se hai elenchi molto lunghi, una vista di scorrimento può essere molto inefficiente perché ciò che

10
00:00:42,500 --> 00:00:47,510
fa è rendere in anticipo tutti gli elementi, anche quelli che non sono sullo schermo.

11
00:00:47,510 --> 00:00:53,220
Ciò significa che anche gli obiettivi laggiù che al momento non sono visibili sono completamente visualizzati e quando si scorre

12
00:00:53,300 --> 00:00:58,520
un elenco così lungo con molti elementi o se si fa qualsiasi altra cosa sullo schermo, questo può

13
00:00:58,910 --> 00:01:00,620
davvero rallentare la tua app.

14
00:01:00,650 --> 00:01:05,870
Se hai un elenco con centinaia o migliaia di elementi e ce ne sono sempre tutti renderizzati anche

15
00:01:05,870 --> 00:01:09,500
se non li vedi, questo può davvero rallentare la tua app.

16
00:01:09,500 --> 00:01:16,130
Quindi, al fine di accelerarlo, esiste un componente incorporato in React Native che gestisce elenchi o elenchi infiniti che

17
00:01:16,130 --> 00:01:20,460
sono potenzialmente molto lunghi in un modo più efficiente e che è

18
00:01:20,510 --> 00:01:28,580
il componente FlatList che si importa anche da React Native. FlatList sostituisce la vista di scorrimento per così dire, quindi

19
00:01:28,580 --> 00:01:35,960
qui possiamo semplicemente usare FlatList che è un elemento a chiusura automatica e FlatList ha due proprietà importanti: la

20
00:01:36,050 --> 00:01:42,770
prima proprietà è la proprietà data in cui punti i tuoi dati di input e questo dovrebbe

21
00:01:42,770 --> 00:01:44,570
puntare a un array.

22
00:01:44,600 --> 00:01:49,610
Quindi, qui, indico gli obiettivi del corso perché sono i dati che voglio produrre.

23
00:01:49,610 --> 00:01:57,170
La seconda proprietà importante è l'elemento di rendering, che accetta una funzione chiamata per ogni elemento nei dati

24
00:01:57,170 --> 00:02:00,840
per eseguire il rendering di un elemento dell'elenco.

25
00:02:00,850 --> 00:02:04,060
Questa è una funzione che otterrà alcuni dati su

26
00:02:04,060 --> 00:02:08,410
quell'elemento, quindi nominerò i dati dell'argomento argomento e quindi dovrà restituire un

27
00:02:08,410 --> 00:02:11,470
componente, quindi qui restituirò la stessa vista che

28
00:02:11,470 --> 00:02:16,270
avevo prima, basta sbarazzarsi del manuale logica di mappatura, quindi restituirò ancora questa vista.

29
00:02:16,270 --> 00:02:21,670
Ora non è più necessario impostare una chiave qui, ma tornerò su come viene digitata in un secondo.

30
00:02:21,670 --> 00:02:27,060
Quindi ora qui otteniamo i dati dell'articolo e quindi non abbiamo più l'obiettivo qui.

31
00:02:27,190 --> 00:02:35,820
I dati di un oggetto sono un oggetto più complesso ma in quello che avrai è una proprietà dell'oggetto, oltre all'articolo hai anche l'indice,

32
00:02:35,820 --> 00:02:36,840
quindi il

33
00:02:36,840 --> 00:02:44,180
numero, la posizione di quell'elemento nella matrice a partire da 0 e i separatori che ti permetterebbero fondamentalmente renderizzare i

34
00:02:44,180 --> 00:02:50,270
separatori dinamicamente tra gli elementi dell'elenco, non qualcosa che faremo qui ma l'elemento sarà i tuoi

35
00:02:50,270 --> 00:02:52,340
dati, quindi un elemento dai

36
00:02:52,340 --> 00:02:57,080
tuoi dati di input e che qui è quindi uno dei nostri obiettivi.

37
00:02:57,230 --> 00:03:02,920
e se lo facciamo e lo salviamo, ora impariamo React Native, forse qui su iPhone

38
00:03:03,180 --> 00:03:08,430
per mescolare le cose e possiamo aggiungere cose qui e se aggiungo

39
00:03:08,670 --> 00:03:14,700
molto e poi chiudo la tastiera, posso scorrere ma tu ' Vedrò che c'è un avvertimento.

40
00:03:15,630 --> 00:03:21,120
Espandiamo questo, vediamo virtualizzare l'elenco di chiavi mancanti per gli articoli, quindi questo

41
00:03:21,120 --> 00:03:24,450
è un altro avvertimento relativo alle chiavi.

42
00:03:24,450 --> 00:03:31,680
Il motivo è che FlatList aggiunge automaticamente le chiavi ai tuoi articoli, ma solo se i tuoi

43
00:03:31,680 --> 00:03:40,770
dati, i tuoi dati di input hanno una certa forma e la nostra forma attuale in cui abbiamo semplicemente una matrice di

44
00:03:40,900 --> 00:03:45,130
stringhe non è supportata. La forma che

45
00:03:45,150 --> 00:03:53,910
si aspetterebbe è che non hai obiettivi che sono solo stringhe ma invece che il tuo elenco è

46
00:03:54,390 --> 00:04:02,640
un elenco di oggetti in cui devi avere una proprietà chiave in quell'oggetto e qui creeremo

47
00:04:02,640 --> 00:04:09,560
una chiave casuale ora con Math . casuale e quindi lo converto in una stringa perché dovrebbe essere una stringa

48
00:04:09,560 --> 00:04:10,420
e, naturalmente,

49
00:04:10,430 --> 00:04:14,810
non è perfettamente unica, potresti avere lo stesso numero casuale due volte ma è abbastanza buono

50
00:04:14,810 --> 00:04:17,750
per questa demo qui e ora non puoi avere altri dati

51
00:04:17,750 --> 00:04:19,610
qui dentro, in quell'oggetto, la chiave è

52
00:04:19,610 --> 00:04:21,480
l'unica proprietà indispensabile, quindi qui avrò una

53
00:04:21,500 --> 00:04:24,610
proprietà value ma avresti potuto nominare questa val o testo o qualunque

54
00:04:24,640 --> 00:04:25,720
cosa tu voglia,

55
00:04:26,360 --> 00:04:28,190
andrò con valore e questo è

56
00:04:28,190 --> 00:04:29,580
ora il mio obiettivo inserito.

57
00:04:29,590 --> 00:04:36,070
Quindi ora il nostro array di obiettivi del corso qui è un array di oggetti in cui ogni oggetto ha

58
00:04:36,070 --> 00:04:37,720
una proprietà chiave e una

59
00:04:37,720 --> 00:04:44,320
proprietà value e ora se inseriamo tale array di obiettivi del corso in FlatList, FlatList è felice perché si aspetta un'origine

60
00:04:44,320 --> 00:04:50,800
dati in cui hai una matrice di oggetti, in cui ogni oggetto ha una proprietà chiave e quindi qualsiasi cosa

61
00:04:50,800 --> 00:04:52,920
tu voglia. Ora per generare

62
00:04:52,930 --> 00:04:59,020
i nostri dati, non è più sufficiente accedere a itemData. item perché item ora è un oggetto e non

63
00:04:59,020 --> 00:05:05,590
più solo una stringa, ma l'oggetto avrà una chiave e una proprietà value ora perché è quello che stiamo impostando lì

64
00:05:05,590 --> 00:05:12,490
e posso semplicemente accedere alla proprietà value per produrre il testo. E ora se salviamo questo e questo ricostruisce

65
00:05:12,530 --> 00:05:21,350
e quindi ora se proviamo di nuovo con Learn React Native, chiudiamo la tastiera, vedete che non riceviamo più

66
00:05:21,350 --> 00:05:27,380
l'avviso e possiamo ancora scorrere questo ovviamente, non otteniamo errori qui perché ora,

67
00:05:27,380 --> 00:05:32,990
abbiamo quella proprietà chiave qui. Nel caso in cui tu abbia dati in

68
00:05:32,990 --> 00:05:41,000
cui non hai una proprietà chiave e non vuoi trasformarla, supponiamo che tu abbia invece un ID che causerebbe un avviso come puoi

69
00:05:43,570 --> 00:05:45,160
vedere se provo

70
00:05:45,760 --> 00:05:52,290
questo, riceviamo l'avviso qui , in tal caso puoi anche aggiungere un'altra proprietà a FlatList oltre ai dati

71
00:05:52,290 --> 00:05:59,440
e all'elemento di rendering, puoi aggiungere la proprietà dell'estrattore di chiavi che accetta una funzione che dice a FlatList come

72
00:05:59,440 --> 00:06:06,190
estrarre la tua chiave e, per impostazione predefinita, la logica è che darò un'occhiata nell'elemento e cerca una proprietà

73
00:06:06,190 --> 00:06:12,220
chiave ma ora con l'estrattore chiave, puoi cambiarla. L'estrattore di chiavi accetta una funzione che accetta due argomenti: l'elemento che sta esaminando e l'indice di

74
00:06:12,220 --> 00:06:17,800
quell'elemento e ora è necessario restituire una chiave e, per impostazione predefinita, cercherebbe l'elemento. chiave, quindi questa è

75
00:06:17,800 --> 00:06:21,740
la logica predefinita che non è necessario aggiungere.

76
00:06:21,940 --> 00:06:29,950
Ora qui, cambio la chiave o l'identificatore univoco in modo che si trovi su un puntello ID e quindi, lo cambierò laggiù

77
00:06:29,950 --> 00:06:35,920
nell'estrattore chiave per ottenere l'ID come chiave e ora, con quello, ti sbarazzerai anche dell'avvertimento perché

78
00:06:35,920 --> 00:06:41,770
informi FlatList di React Native come ottenere una chiave univoca per ogni elemento del tuo

79
00:06:41,770 --> 00:06:42,160
elenco.

80
00:06:42,670 --> 00:06:53,850
Quindi ora qui, se impari di nuovo React Native qui e aggiungiamo questo, vedrai che funziona, possiamo scorrere questo e anche

81
00:06:54,030 --> 00:07:00,150
noi non riceviamo alcun avviso. Quindi è FlatList e dovresti usare FlatList per elenchi molto

82
00:07:00,360 --> 00:07:05,370
lunghi, per elenchi in cui non sai quanto tempo saranno ma dove potenzialmente sono molto lunghi perché ciò

83
00:07:05,370 --> 00:07:10,110
ti dà prestazioni migliori rispetto a una vista di scorrimento che d'altra parte è ottimo se sai

84
00:07:10,110 --> 00:07:14,970
che hai solo un numero limitato di elementi che probabilmente andranno oltre i confini dello schermo ma dove

85
00:07:14,970 --> 00:07:18,210
non avrai troppi elementi ridondanti resi al di fuori dello schermo.