Ora ti ho appena mostrato la vista di scorrimento ed è già tempo di lasciarsi andare e liberarsi della
vista di scorrimento, perché? La vista di
scorrimento è fantastica se hai un'area scorrevole sul
tuo schermo ma non è così eccezionale se hai un elenco in cui non sai quanto tempo sarà
o che potrebbe essere molto lungo.
Ora se sai di avere del contenuto, forse un elenco di dati ma sai che sono solo 20
elementi, quindi probabilmente supererà i miei limiti dello schermo ma non saranno mai più di 20 o 15 elementi,
quindi puoi usare una
vista di scorrimento ma se hai elenchi molto lunghi, una vista di scorrimento può essere molto inefficiente perché ciò che
fa è rendere in anticipo tutti gli elementi, anche quelli che non sono sullo schermo.
Ciò significa che anche gli obiettivi laggiù che al momento non sono visibili sono completamente visualizzati e quando si scorre
un elenco così lungo con molti elementi o se si fa qualsiasi altra cosa sullo schermo, questo può
davvero rallentare la tua app.
Se hai un elenco con centinaia o migliaia di elementi e ce ne sono sempre tutti renderizzati anche
se non li vedi, questo può davvero rallentare la tua app.
Quindi, al fine di accelerarlo, esiste un componente incorporato in React Native che gestisce elenchi o elenchi infiniti che
sono potenzialmente molto lunghi in un modo più efficiente e che è
il componente FlatList che si importa anche da React Native. FlatList sostituisce la vista di scorrimento per così dire, quindi
qui possiamo semplicemente usare FlatList che è un elemento a chiusura automatica e FlatList ha due proprietà importanti: la
prima proprietà è la proprietà data in cui punti i tuoi dati di input e questo dovrebbe
puntare a un array.
Quindi, qui, indico gli obiettivi del corso perché sono i dati che voglio produrre.
La seconda proprietà importante è l'elemento di rendering, che accetta una funzione chiamata per ogni elemento nei dati
per eseguire il rendering di un elemento dell'elenco.
Questa è una funzione che otterrà alcuni dati su
quell'elemento, quindi nominerò i dati dell'argomento argomento e quindi dovrà restituire un
componente, quindi qui restituirò la stessa vista che
avevo prima, basta sbarazzarsi del manuale logica di mappatura, quindi restituirò ancora questa vista.
Ora non è più necessario impostare una chiave qui, ma tornerò su come viene digitata in un secondo.
Quindi ora qui otteniamo i dati dell'articolo e quindi non abbiamo più l'obiettivo qui.
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,
quindi il
numero, la posizione di quell'elemento nella matrice a partire da 0 e i separatori che ti permetterebbero fondamentalmente renderizzare i
separatori dinamicamente tra gli elementi dell'elenco, non qualcosa che faremo qui ma l'elemento sarà i tuoi
dati, quindi un elemento dai
tuoi dati di input e che qui è quindi uno dei nostri obiettivi.
e se lo facciamo e lo salviamo, ora impariamo React Native, forse qui su iPhone
per mescolare le cose e possiamo aggiungere cose qui e se aggiungo
molto e poi chiudo la tastiera, posso scorrere ma tu ' Vedrò che c'è un avvertimento.
Espandiamo questo, vediamo virtualizzare l'elenco di chiavi mancanti per gli articoli, quindi questo
è un altro avvertimento relativo alle chiavi.
Il motivo è che FlatList aggiunge automaticamente le chiavi ai tuoi articoli, ma solo se i tuoi
dati, i tuoi dati di input hanno una certa forma e la nostra forma attuale in cui abbiamo semplicemente una matrice di
stringhe non è supportata. La forma che
si aspetterebbe è che non hai obiettivi che sono solo stringhe ma invece che il tuo elenco è
un elenco di oggetti in cui devi avere una proprietà chiave in quell'oggetto e qui creeremo
una chiave casuale ora con Math . casuale e quindi lo converto in una stringa perché dovrebbe essere una stringa
e, naturalmente,
non è perfettamente unica, potresti avere lo stesso numero casuale due volte ma è abbastanza buono
per questa demo qui e ora non puoi avere altri dati
qui dentro, in quell'oggetto, la chiave è
l'unica proprietà indispensabile, quindi qui avrò una
proprietà value ma avresti potuto nominare questa val o testo o qualunque
cosa tu voglia,
andrò con valore e questo è
ora il mio obiettivo inserito.
Quindi ora il nostro array di obiettivi del corso qui è un array di oggetti in cui ogni oggetto ha
una proprietà chiave e una
proprietà value e ora se inseriamo tale array di obiettivi del corso in FlatList, FlatList è felice perché si aspetta un'origine
dati in cui hai una matrice di oggetti, in cui ogni oggetto ha una proprietà chiave e quindi qualsiasi cosa
tu voglia. Ora per generare
i nostri dati, non è più sufficiente accedere a itemData. item perché item ora è un oggetto e non
più solo una stringa, ma l'oggetto avrà una chiave e una proprietà value ora perché è quello che stiamo impostando lì
e posso semplicemente accedere alla proprietà value per produrre il testo. E ora se salviamo questo e questo ricostruisce
e quindi ora se proviamo di nuovo con Learn React Native, chiudiamo la tastiera, vedete che non riceviamo più
l'avviso e possiamo ancora scorrere questo ovviamente, non otteniamo errori qui perché ora,
abbiamo quella proprietà chiave qui. Nel caso in cui tu abbia dati in
cui non hai una proprietà chiave e non vuoi trasformarla, supponiamo che tu abbia invece un ID che causerebbe un avviso come puoi
vedere se provo
questo, riceviamo l'avviso qui , in tal caso puoi anche aggiungere un'altra proprietà a FlatList oltre ai dati
e all'elemento di rendering, puoi aggiungere la proprietà dell'estrattore di chiavi che accetta una funzione che dice a FlatList come
estrarre la tua chiave e, per impostazione predefinita, la logica è che darò un'occhiata nell'elemento e cerca una proprietà
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
quell'elemento e ora è necessario restituire una chiave e, per impostazione predefinita, cercherebbe l'elemento. chiave, quindi questa è
la logica predefinita che non è necessario aggiungere.
Ora qui, cambio la chiave o l'identificatore univoco in modo che si trovi su un puntello ID e quindi, lo cambierò laggiù
nell'estrattore chiave per ottenere l'ID come chiave e ora, con quello, ti sbarazzerai anche dell'avvertimento perché
informi FlatList di React Native come ottenere una chiave univoca per ogni elemento del tuo
elenco.
Quindi ora qui, se impari di nuovo React Native qui e aggiungiamo questo, vedrai che funziona, possiamo scorrere questo e anche
noi non riceviamo alcun avviso. Quindi è FlatList e dovresti usare FlatList per elenchi molto
lunghi, per elenchi in cui non sai quanto tempo saranno ma dove potenzialmente sono molto lunghi perché ciò
ti dà prestazioni migliori rispetto a una vista di scorrimento che d'altra parte è ottimo se sai
che hai solo un numero limitato di elementi che probabilmente andranno oltre i confini dello schermo ma dove
non avrai troppi elementi ridondanti resi al di fuori dello schermo.