Ahora te acabo de mostrar la vista de desplazamiento y ya es hora de soltar y deshacerme de la vista
de desplazamiento, ¿por qué? La vista de
desplazamiento es excelente si tiene un área desplazable en
su pantalla, pero no es tan buena si tiene una lista en la que no sabe cuánto tiempo será
o cuál podría ser muy larga.
Ahora, si sabe que tiene algún contenido, tal vez una lista de datos, pero sabe que son solo 20
elementos, por lo que probablemente superará los límites de mi pantalla, pero nunca será más de 20 o 15 elementos,
entonces puede usar una
vista de desplazamiento, pero Si tiene listas muy largas, una vista de desplazamiento puede ser muy ineficiente porque lo que hace
es mostrar todos los elementos por adelantado, incluso los que no están en la pantalla.
Eso significa que incluso los objetivos allí abajo que actualmente no son visibles se representan por completo y cuando se
desplaza por una lista tan larga con muchos elementos o si hace algo más en la pantalla, eso
realmente puede ralentizar su aplicación.
Si tiene una lista con cientos o miles de elementos y siempre se muestran todos, incluso
si no los ve, eso realmente puede ralentizar su aplicación.
Entonces, para acelerar eso, hay un componente integrado en React Native que maneja listas infinitas o listas que
son potencialmente muy largas de una manera más eficiente y ese
es el componente FlatList que también importa desde React Native. FlatList reemplaza la vista de desplazamiento, por decirlo así,
aquí simplemente podemos usar FlatList, que es un elemento de cierre automático y FlatList tiene dos propiedades importantes: la
primera propiedad es la propiedad de datos donde apunta a sus datos de entrada y esto debería
apuntar a una matriz.
Así que aquí, apunto a los objetivos del curso porque esa es la información que quiero generar.
La segunda propiedad importante es el elemento de representación, que toma una función que se llama para cada elemento de
sus datos para representar un elemento de la lista.
Esta es una función que obtendrá algunos datos sobre ese elemento,
por lo tanto, nombraré los datos del elemento de argumento y luego tendrá que devolver
un componente, por lo que aquí devolveré la misma
vista que tenía antes, solo elimine el manual lógica de mapeo, así que aún devolveré esta vista.
Ahora ya no necesita establecer una clave aquí, pero volveré a ver cómo se teclea en un segundo.
Así que ahora aquí obtenemos los datos del artículo y, por lo tanto, ya no tenemos el objetivo aquí.
Los datos de un elemento son un objeto más complejo, pero allí tendrá una propiedad de elemento, además del elemento también tiene el índice, por lo
que el
número, la posición de ese elemento en la matriz que comienza en 0 y los separadores que le permitirán básicamente renderizar separadores dinámicamente
entre los elementos de la lista, no es algo que haremos aquí, sino que el elemento serán sus
datos, por lo que un elemento de
sus datos de entrada y ese es, por lo tanto, uno de nuestros objetivos.
y si hacemos eso y guardamos esto, ahora aprendamos React Native, tal vez aquí en
el iPhone para mezclar cosas y podemos agregar cosas aquí y si agrego
mucho y luego cierro el teclado, puedo desplazarme pero usted ' Veré que hay una advertencia.
Expandimos esto, vemos virtualizar la lista de claves faltantes para los elementos, por lo
que es otra advertencia relacionada con las claves.
La razón de esto es que FlatList agrega automáticamente claves a sus elementos, pero solo si
sus datos, sus datos de entrada tienen una cierta forma y nuestra forma actual donde simplemente tenemos una serie de
cadenas no es compatible. La forma que
esperaría es que no tiene objetivos que son solo cadenas, sino que su lista es una
lista de objetos donde debe tener una propiedad clave en ese objeto y aquí crearemos
una clave aleatoria ahora con Math . aleatorio y luego lo convierto en una cadena porque debería ser una cadena y,
por supuesto,
eso no es perfectamente único, es posible que tenga el mismo número aleatorio dos veces, pero es lo
suficientemente bueno para esta demostración aquí y ahora no puede tener ningún
otro dato Aquí, en ese objeto, la
clave es la única propiedad imprescindible, por
lo que aquí tendré una propiedad de valor, pero podría haber nombrado este
val o texto o
lo que quiera, iré con valor y
esto es ahora Mi objetivo ingresado.
Entonces, nuestra matriz de objetivos del curso aquí es una matriz de objetos donde cada objeto tiene una propiedad
clave y una propiedad de
valor y ahora si alimentamos esa matriz de objetivos del curso en FlatList, FlatList está contento porque espera una fuente
de datos donde tiene una matriz de objetos, donde cada objeto tiene una propiedad clave y luego cualquier cosa
que desee. Ahora para generar
nuestros datos, ya no es suficiente acceder a itemData. artículo porque el artículo ahora es un objeto y no
solo una cadena, sino que el artículo tendrá una clave y una propiedad de valor ahora porque eso es lo que estamos configurando allí
y simplemente puedo acceder a la propiedad de valor para generar el texto. Y ahora, si guardamos esto y esto se reconstruye
y, por lo tanto, ahora si lo intentamos de nuevo con Learn React Native, cierre el teclado, verá que ya no recibimos
la advertencia y, por supuesto, todavía podemos desplazar esto, tampoco recibimos ningún error aquí porque
ahora, tenemos esa propiedad clave aquí. Ahora, en caso de que tenga datos en los
que no tenga una propiedad clave y no quiera transformarla, supongamos que tenía una ID en su lugar, lo que provocaría una advertencia, como puede ver
si pruebo esto, obtenemos
la advertencia aquí , en ese caso también puede agregar otra propiedad a FlatList además de los datos y el elemento
de representación, puede agregar la propiedad del extractor de claves que toma una función que le dice a FlatList cómo extraer su clave
y, de forma predeterminada, la lógica es que voy a echar un vistazo en el elemento y busque una propiedad clave, pero
ahora con el extractor de claves, puede cambiar esto. El extractor de claves toma una función que toma dos argumentos: el elemento que está mirando y el índice
de ese elemento y ahora necesita devolver una clave y, de forma predeterminada, buscaría el elemento. clave, entonces esa es
la lógica predeterminada que no necesita agregar.
Ahora aquí, cambio la clave o el identificador único para que esté en un accesorio de ID y, por lo tanto, lo cambiaré allí en el extractor
de claves para obtener la ID como clave y ahora con eso, también se deshace de la advertencia porque le
informa a la lista plana de React Native cómo obtener una clave única para cada elemento de su
lista.
Así que ahora aquí, si nuevamente aprende React Native aquí y agregamos esto, verá que esto funciona, podemos desplazar esto
y tampoco recibimos ninguna advertencia. Así que es FlatList y debe usar FlatList para listas
muy largas, para listas donde no sabe cuánto tiempo serán pero donde potencialmente son muy largas porque eso le
brinda un mejor rendimiento que una vista de desplazamiento que, por otro lado, es genial si sabe que
solo tiene una cantidad limitada de elementos que probablemente irán más allá de los límites de su pantalla
pero donde no tendrá demasiados elementos redundantes renderizados fuera de la pantalla.