1
00:00:02,360 --> 00:00:08,270
Agora eu só mostrei a visão de rolagem e já é hora de deixar ir e se livrar da visão

2
00:00:08,330 --> 00:00:11,000
de rolagem, por quê? A visualização de rolagem

3
00:00:11,000 --> 00:00:13,600
é ótima se você tiver uma área de rolagem na

4
00:00:13,790 --> 00:00:19,490
tela, mas não é tão grande se você tiver uma lista em que você não saiba quanto tempo será ou

5
00:00:19,490 --> 00:00:21,310
o que pode ser muito longo.

6
00:00:21,320 --> 00:00:27,440
Agora, se você sabe que tem algum conteúdo, talvez uma lista de dados, mas sabe que são apenas

7
00:00:27,440 --> 00:00:33,740
20 itens, provavelmente excederá os limites da minha tela, mas nunca serão mais de 20 ou 15 itens, então

8
00:00:33,740 --> 00:00:35,500
você pode usar uma

9
00:00:35,750 --> 00:00:42,500
visualização de rolagem, mas Se você tiver listas muito longas, uma exibição de rolagem pode ser muito ineficiente, pois o que

10
00:00:42,500 --> 00:00:47,510
ela faz é renderizar todos os elementos antecipadamente, mesmo os que não estão na tela.

11
00:00:47,510 --> 00:00:53,220
Isso significa que até mesmo as metas que não estão visíveis no momento são totalmente renderizadas e quando você rola

12
00:00:53,300 --> 00:00:58,520
uma lista tão longa com muitos elementos ou se você faz qualquer outra coisa na tela, isso pode realmente

13
00:00:58,910 --> 00:01:00,620
deixar seu aplicativo mais lento.

14
00:01:00,650 --> 00:01:05,870
Se você tem uma lista com centenas ou milhares de elementos e todos são sempre renderizados, mesmo

15
00:01:05,870 --> 00:01:09,500
que você não os veja, isso pode realmente desacelerar seu aplicativo.

16
00:01:09,500 --> 00:01:16,130
Então, para acelerar isso, há um componente embutido no React Native que lida com listas ou listas infinitas que

17
00:01:16,130 --> 00:01:20,460
são potencialmente muito longas de uma maneira mais eficiente e esse é

18
00:01:20,510 --> 00:01:28,580
o componente FlatList que você também importa do React Native. FlatList substitui a visualização de rolagem por assim dizer, então

19
00:01:28,580 --> 00:01:35,960
aqui podemos simplesmente usar FlatList que é um elemento de fechamento automático e FlatList tem duas propriedades importantes -

20
00:01:36,050 --> 00:01:42,770
a primeira propriedade é a propriedade de dados onde você aponta seus dados de entrada e isso deve

21
00:01:42,770 --> 00:01:44,570
apontar para uma matriz.

22
00:01:44,600 --> 00:01:49,610
Então, aqui, eu aponto para as metas do curso porque são os dados que eu quero mostrar.

23
00:01:49,610 --> 00:01:57,170
A segunda propriedade importante é o item de renderização, que usa uma função que é chamada para cada item

24
00:01:57,170 --> 00:02:00,840
em seus dados para renderizar um item de lista.

25
00:02:00,850 --> 00:02:04,060
Esta é uma função que irá obter alguns dados sobre esse item,

26
00:02:04,060 --> 00:02:08,410
daí eu vou nomear os dados do item de argumento e então ele tem que retornar

27
00:02:08,410 --> 00:02:11,470
um componente, então aqui eu vou retornar a mesma visão que

28
00:02:11,470 --> 00:02:16,270
eu tinha antes, apenas me livre do manual mapeamento de lógica, então eu ainda vou retornar essa visão.

29
00:02:16,270 --> 00:02:21,670
Agora você não precisa mais definir uma chave aqui, mas voltarei a como isso é digitado em um segundo.

30
00:02:21,670 --> 00:02:27,060
Então, agora nós recebemos os dados do item e, portanto, não temos mais a meta aqui.

31
00:02:27,190 --> 00:02:35,820
Um dado de item é um objeto mais complexo, mas aí você terá uma propriedade de item, além do item você também tem

32
00:02:35,820 --> 00:02:36,840
o índice,

33
00:02:36,840 --> 00:02:44,180
então o número, a posição daquele item na matriz começando em 0 e os separadores que permitiriam basicamente renderizar

34
00:02:44,180 --> 00:02:50,270
separadores dinamicamente entre itens de lista, não algo que faremos aqui, mas item serão seus dados,

35
00:02:50,270 --> 00:02:52,340
então um elemento de seus

36
00:02:52,340 --> 00:02:57,080
dados de entrada e esse aqui é, portanto, um de nossos objetivos.

37
00:02:57,230 --> 00:03:02,920
e se fizermos isso e salvarmos isso, vamos agora aprender React Native, talvez aqui no iPhone

38
00:03:03,180 --> 00:03:08,430
para misturar as coisas e podemos adicionar coisas aqui e se eu adicionar muito

39
00:03:08,670 --> 00:03:14,700
e eu, então, fechar o teclado, eu posso rolar, mas você Vai ver que há um aviso.

40
00:03:15,630 --> 00:03:21,120
Expandimos isso, vemos virtualizar a lista de chaves faltantes para itens, de modo

41
00:03:21,120 --> 00:03:24,450
que é outro aviso relacionado a chaves.

42
00:03:24,450 --> 00:03:31,680
A razão para isso é que o FlatList adiciona automaticamente chaves aos seus itens, mas somente

43
00:03:31,680 --> 00:03:40,770
se seus dados, seus dados de entrada tiverem uma certa forma e nossa forma atual, onde simplesmente temos uma matriz de

44
00:03:40,900 --> 00:03:45,130
strings, não é suportada. A forma esperada

45
00:03:45,150 --> 00:03:53,910
é que você não tenha metas que são apenas strings, mas em vez disso, sua lista é uma

46
00:03:54,390 --> 00:04:02,640
lista de objetos onde você deve ter uma propriedade de chave nesse objeto e aqui vamos criar

47
00:04:02,640 --> 00:04:09,560
uma chave aleatória agora com Math . aleatoriamente e então eu converto isso em uma string porque deveria ser uma string

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

49
00:04:10,430 --> 00:04:14,810
isso não é perfeitamente único, você pode ter o mesmo número aleatório duas vezes mas é bom o

50
00:04:14,810 --> 00:04:17,750
suficiente para esta demo aqui e agora você não pode ter nenhum

51
00:04:17,750 --> 00:04:19,610
outro dado aqui, nesse objeto, a chave é

52
00:04:19,610 --> 00:04:21,480
a única propriedade must-have, então aqui eu vou

53
00:04:21,500 --> 00:04:24,610
ter uma propriedade de valor, mas você poderia ter chamado este val ou

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

55
00:04:26,360 --> 00:04:28,190
você quiser, eu vou com valor e

56
00:04:28,190 --> 00:04:29,580
isso é agora meu objetivo entrou.

57
00:04:29,590 --> 00:04:36,070
Portanto, agora a matriz de metas do curso aqui é uma matriz de objetos em que cada objeto tem uma propriedade

58
00:04:36,070 --> 00:04:37,720
key e uma propriedade value

59
00:04:37,720 --> 00:04:44,320
e agora se alimentamos a matriz de metas do curso em FlatList, FlatList fica feliz porque espera uma fonte de dados

60
00:04:44,320 --> 00:04:50,800
onde você tem uma matriz de objetos, onde cada objeto tem uma propriedade de chave e, em seguida, qualquer coisa

61
00:04:50,800 --> 00:04:52,920
que você deseja. Agora, para gerar

62
00:04:52,930 --> 00:04:59,020
nossos dados, não é mais suficiente acessar o itemData. item porque o item agora é um objeto e

63
00:04:59,020 --> 00:05:05,590
não apenas uma string, mas o item terá uma chave e uma propriedade de valor agora, porque é isso que estamos configurando

64
00:05:05,590 --> 00:05:12,490
e eu posso simplesmente acessar a propriedade value para gerar o texto. E agora, se salvarmos isso e isso reconstruir

65
00:05:12,530 --> 00:05:21,350
e, portanto, agora, se tentarmos novamente com Learn React Native, feche o teclado, verá que não recebemos mais o aviso

66
00:05:21,350 --> 00:05:27,380
e ainda podemos rolar isso, é claro, não temos nenhum erro aqui porque agora,

67
00:05:27,380 --> 00:05:32,990
temos essa propriedade chave aqui. Agora, no caso de você ter dados onde você

68
00:05:32,990 --> 00:05:41,000
não tem uma propriedade chave e você não quer transformá-la, digamos que você tenha ID, o que causaria um aviso, como você pode ver se eu

69
00:05:43,570 --> 00:05:45,160
testar isso, nós recebemos

70
00:05:45,760 --> 00:05:52,290
o aviso aqui , nesse caso você também pode adicionar outra propriedade ao FlatList além dos dados e do item

71
00:05:52,290 --> 00:05:59,440
de renderização, você pode adicionar a propriedade extrator de chaves que pega uma função que diz ao FlatList como extrair a chave e

72
00:05:59,440 --> 00:06:06,190
por padrão, a lógica é que eu darei uma olhada no item e procure por uma propriedade de chave, mas agora

73
00:06:06,190 --> 00:06:12,220
com o extrator de chave, você pode mudar isso. O extrator de chaves usa uma função que leva dois argumentos - o item que está olhando e o índice

74
00:06:12,220 --> 00:06:17,800
desse item, e agora você precisa retornar uma chave e, por padrão, ela procuraria por um item. chave, então essa é

75
00:06:17,800 --> 00:06:21,740
a lógica padrão que você não precisa adicionar.

76
00:06:21,940 --> 00:06:29,950
Agora aqui, eu mudo a chave ou o identificador único para estar em um ID prop e, portanto, vou mudar isso lá no extractor de

77
00:06:29,950 --> 00:06:35,920
chaves para obter o ID como uma chave e agora com isso, você também se livrar do aviso

78
00:06:35,920 --> 00:06:41,770
porque você informa FlatList do React Native como obter uma chave única para cada item da sua

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

80
00:06:42,670 --> 00:06:53,850
Então agora aqui, se você aprender novamente Reagir Nativa aqui e nós adicionarmos isto, você verá que isto funciona, nós podemos rolar isto e

81
00:06:54,030 --> 00:07:00,150
nós também não receberemos nenhum aviso. Então, isso é FlatList e você deve usar FlatList para listas

82
00:07:00,360 --> 00:07:05,370
muito longas, para listas onde você não sabe quanto tempo eles serão, mas onde eles são potencialmente muito longos, porque

83
00:07:05,370 --> 00:07:10,110
isso lhe dá um desempenho melhor do que uma visão de rolagem que, por outro lado é ótimo

84
00:07:10,110 --> 00:07:14,970
se você souber que tem apenas uma quantidade limitada de itens que provavelmente ultrapassarão os limites da sua tela,

85
00:07:14,970 --> 00:07:18,210
mas onde você não terá muitos itens redundantes renderizados fora da tela.