1
00:00:02,360 --> 00:00:08,270
Ahora te acabo de mostrar la vista de desplazamiento y ya es hora de soltar y deshacerme de la vista

2
00:00:08,330 --> 00:00:11,000
de desplazamiento, ¿por qué? La vista de

3
00:00:11,000 --> 00:00:13,600
desplazamiento es excelente si tiene un área desplazable en

4
00:00:13,790 --> 00:00:19,490
su pantalla, pero no es tan buena si tiene una lista en la que no sabe cuánto tiempo será

5
00:00:19,490 --> 00:00:21,310
o cuál podría ser muy larga.

6
00:00:21,320 --> 00:00:27,440
Ahora, si sabe que tiene algún contenido, tal vez una lista de datos, pero sabe que son solo 20

7
00:00:27,440 --> 00:00:33,740
elementos, por lo que probablemente superará los límites de mi pantalla, pero nunca será más de 20 o 15 elementos,

8
00:00:33,740 --> 00:00:35,500
entonces puede usar una

9
00:00:35,750 --> 00:00:42,500
vista de desplazamiento, pero Si tiene listas muy largas, una vista de desplazamiento puede ser muy ineficiente porque lo que hace

10
00:00:42,500 --> 00:00:47,510
es mostrar todos los elementos por adelantado, incluso los que no están en la pantalla.

11
00:00:47,510 --> 00:00:53,220
Eso significa que incluso los objetivos allí abajo que actualmente no son visibles se representan por completo y cuando se

12
00:00:53,300 --> 00:00:58,520
desplaza por una lista tan larga con muchos elementos o si hace algo más en la pantalla, eso

13
00:00:58,910 --> 00:01:00,620
realmente puede ralentizar su aplicación.

14
00:01:00,650 --> 00:01:05,870
Si tiene una lista con cientos o miles de elementos y siempre se muestran todos, incluso

15
00:01:05,870 --> 00:01:09,500
si no los ve, eso realmente puede ralentizar su aplicación.

16
00:01:09,500 --> 00:01:16,130
Entonces, para acelerar eso, hay un componente integrado en React Native que maneja listas infinitas o listas que

17
00:01:16,130 --> 00:01:20,460
son potencialmente muy largas de una manera más eficiente y ese

18
00:01:20,510 --> 00:01:28,580
es el componente FlatList que también importa desde React Native. FlatList reemplaza la vista de desplazamiento, por decirlo así,

19
00:01:28,580 --> 00:01:35,960
aquí simplemente podemos usar FlatList, que es un elemento de cierre automático y FlatList tiene dos propiedades importantes: la

20
00:01:36,050 --> 00:01:42,770
primera propiedad es la propiedad de datos donde apunta a sus datos de entrada y esto debería

21
00:01:42,770 --> 00:01:44,570
apuntar a una matriz.

22
00:01:44,600 --> 00:01:49,610
Así que aquí, apunto a los objetivos del curso porque esa es la información que quiero generar.

23
00:01:49,610 --> 00:01:57,170
La segunda propiedad importante es el elemento de representación, que toma una función que se llama para cada elemento de

24
00:01:57,170 --> 00:02:00,840
sus datos para representar un elemento de la lista.

25
00:02:00,850 --> 00:02:04,060
Esta es una función que obtendrá algunos datos sobre ese elemento,

26
00:02:04,060 --> 00:02:08,410
por lo tanto, nombraré los datos del elemento de argumento y luego tendrá que devolver

27
00:02:08,410 --> 00:02:11,470
un componente, por lo que aquí devolveré la misma

28
00:02:11,470 --> 00:02:16,270
vista que tenía antes, solo elimine el manual lógica de mapeo, así que aún devolveré esta vista.

29
00:02:16,270 --> 00:02:21,670
Ahora ya no necesita establecer una clave aquí, pero volveré a ver cómo se teclea en un segundo.

30
00:02:21,670 --> 00:02:27,060
Así que ahora aquí obtenemos los datos del artículo y, por lo tanto, ya no tenemos el objetivo aquí.

31
00:02:27,190 --> 00:02:35,820
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

32
00:02:35,820 --> 00:02:36,840
que el

33
00:02:36,840 --> 00:02:44,180
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

34
00:02:44,180 --> 00:02:50,270
entre los elementos de la lista, no es algo que haremos aquí, sino que el elemento serán sus

35
00:02:50,270 --> 00:02:52,340
datos, por lo que un elemento de

36
00:02:52,340 --> 00:02:57,080
sus datos de entrada y ese es, por lo tanto, uno de nuestros objetivos.

37
00:02:57,230 --> 00:03:02,920
y si hacemos eso y guardamos esto, ahora aprendamos React Native, tal vez aquí en

38
00:03:03,180 --> 00:03:08,430
el iPhone para mezclar cosas y podemos agregar cosas aquí y si agrego

39
00:03:08,670 --> 00:03:14,700
mucho y luego cierro el teclado, puedo desplazarme pero usted ' Veré que hay una advertencia.

40
00:03:15,630 --> 00:03:21,120
Expandimos esto, vemos virtualizar la lista de claves faltantes para los elementos, por lo

41
00:03:21,120 --> 00:03:24,450
que es otra advertencia relacionada con las claves.

42
00:03:24,450 --> 00:03:31,680
La razón de esto es que FlatList agrega automáticamente claves a sus elementos, pero solo si

43
00:03:31,680 --> 00:03:40,770
sus datos, sus datos de entrada tienen una cierta forma y nuestra forma actual donde simplemente tenemos una serie de

44
00:03:40,900 --> 00:03:45,130
cadenas no es compatible. La forma que

45
00:03:45,150 --> 00:03:53,910
esperaría es que no tiene objetivos que son solo cadenas, sino que su lista es una

46
00:03:54,390 --> 00:04:02,640
lista de objetos donde debe tener una propiedad clave en ese objeto y aquí crearemos

47
00:04:02,640 --> 00:04:09,560
una clave aleatoria ahora con Math . aleatorio y luego lo convierto en una cadena porque debería ser una cadena y,

48
00:04:09,560 --> 00:04:10,420
por supuesto,

49
00:04:10,430 --> 00:04:14,810
eso no es perfectamente único, es posible que tenga el mismo número aleatorio dos veces, pero es lo

50
00:04:14,810 --> 00:04:17,750
suficientemente bueno para esta demostración aquí y ahora no puede tener ningún

51
00:04:17,750 --> 00:04:19,610
otro dato Aquí, en ese objeto, la

52
00:04:19,610 --> 00:04:21,480
clave es la única propiedad imprescindible, por

53
00:04:21,500 --> 00:04:24,610
lo que aquí tendré una propiedad de valor, pero podría haber nombrado este

54
00:04:24,640 --> 00:04:25,720
val o texto o

55
00:04:26,360 --> 00:04:28,190
lo que quiera, iré con valor y

56
00:04:28,190 --> 00:04:29,580
esto es ahora Mi objetivo ingresado.

57
00:04:29,590 --> 00:04:36,070
Entonces, nuestra matriz de objetivos del curso aquí es una matriz de objetos donde cada objeto tiene una propiedad

58
00:04:36,070 --> 00:04:37,720
clave y una propiedad de

59
00:04:37,720 --> 00:04:44,320
valor y ahora si alimentamos esa matriz de objetivos del curso en FlatList, FlatList está contento porque espera una fuente

60
00:04:44,320 --> 00:04:50,800
de datos donde tiene una matriz de objetos, donde cada objeto tiene una propiedad clave y luego cualquier cosa

61
00:04:50,800 --> 00:04:52,920
que desee. Ahora para generar

62
00:04:52,930 --> 00:04:59,020
nuestros datos, ya no es suficiente acceder a itemData. artículo porque el artículo ahora es un objeto y no

63
00:04:59,020 --> 00:05:05,590
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í

64
00:05:05,590 --> 00:05:12,490
y simplemente puedo acceder a la propiedad de valor para generar el texto. Y ahora, si guardamos esto y esto se reconstruye

65
00:05:12,530 --> 00:05:21,350
y, por lo tanto, ahora si lo intentamos de nuevo con Learn React Native, cierre el teclado, verá que ya no recibimos

66
00:05:21,350 --> 00:05:27,380
la advertencia y, por supuesto, todavía podemos desplazar esto, tampoco recibimos ningún error aquí porque

67
00:05:27,380 --> 00:05:32,990
ahora, tenemos esa propiedad clave aquí. Ahora, en caso de que tenga datos en los

68
00:05:32,990 --> 00:05:41,000
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

69
00:05:43,570 --> 00:05:45,160
si pruebo esto, obtenemos

70
00:05:45,760 --> 00:05:52,290
la advertencia aquí , en ese caso también puede agregar otra propiedad a FlatList además de los datos y el elemento

71
00:05:52,290 --> 00:05:59,440
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

72
00:05:59,440 --> 00:06:06,190
y, de forma predeterminada, la lógica es que voy a echar un vistazo en el elemento y busque una propiedad clave, pero

73
00:06:06,190 --> 00:06:12,220
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

74
00:06:12,220 --> 00:06:17,800
de ese elemento y ahora necesita devolver una clave y, de forma predeterminada, buscaría el elemento. clave, entonces esa es

75
00:06:17,800 --> 00:06:21,740
la lógica predeterminada que no necesita agregar.

76
00:06:21,940 --> 00:06:29,950
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

77
00:06:29,950 --> 00:06:35,920
de claves para obtener la ID como clave y ahora con eso, también se deshace de la advertencia porque le

78
00:06:35,920 --> 00:06:41,770
informa a la lista plana de React Native cómo obtener una clave única para cada elemento de su

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

80
00:06:42,670 --> 00:06:53,850
Así que ahora aquí, si nuevamente aprende React Native aquí y agregamos esto, verá que esto funciona, podemos desplazar esto

81
00:06:54,030 --> 00:07:00,150
y tampoco recibimos ninguna advertencia. Así que es FlatList y debe usar FlatList para listas

82
00:07:00,360 --> 00:07:05,370
muy largas, para listas donde no sabe cuánto tiempo serán pero donde potencialmente son muy largas porque eso le

83
00:07:05,370 --> 00:07:10,110
brinda un mejor rendimiento que una vista de desplazamiento que, por otro lado, es genial si sabe que

84
00:07:10,110 --> 00:07:14,970
solo tiene una cantidad limitada de elementos que probablemente irán más allá de los límites de su pantalla

85
00:07:14,970 --> 00:07:18,210
pero donde no tendrá demasiados elementos redundantes renderizados fuera de la pantalla.