Agora eu só mostrei a visão de rolagem e já é hora de deixar ir e se livrar da visão
de rolagem, por quê? A visualização de rolagem
é ótima se você tiver uma área de rolagem na
tela, mas não é tão grande se você tiver uma lista em que você não saiba quanto tempo será ou
o que pode ser muito longo.
Agora, se você sabe que tem algum conteúdo, talvez uma lista de dados, mas sabe que são apenas
20 itens, provavelmente excederá os limites da minha tela, mas nunca serão mais de 20 ou 15 itens, então
você pode usar uma
visualização de rolagem, mas Se você tiver listas muito longas, uma exibição de rolagem pode ser muito ineficiente, pois o que
ela faz é renderizar todos os elementos antecipadamente, mesmo os que não estão na tela.
Isso significa que até mesmo as metas que não estão visíveis no momento são totalmente renderizadas e quando você rola
uma lista tão longa com muitos elementos ou se você faz qualquer outra coisa na tela, isso pode realmente
deixar seu aplicativo mais lento.
Se você tem uma lista com centenas ou milhares de elementos e todos são sempre renderizados, mesmo
que você não os veja, isso pode realmente desacelerar seu aplicativo.
Então, para acelerar isso, há um componente embutido no React Native que lida com listas ou listas infinitas que
são potencialmente muito longas de uma maneira mais eficiente e esse é
o componente FlatList que você também importa do React Native. FlatList substitui a visualização de rolagem por assim dizer, então
aqui podemos simplesmente usar FlatList que é um elemento de fechamento automático e FlatList tem duas propriedades importantes -
a primeira propriedade é a propriedade de dados onde você aponta seus dados de entrada e isso deve
apontar para uma matriz.
Então, aqui, eu aponto para as metas do curso porque são os dados que eu quero mostrar.
A segunda propriedade importante é o item de renderização, que usa uma função que é chamada para cada item
em seus dados para renderizar um item de lista.
Esta é uma função que irá obter alguns dados sobre esse item,
daí eu vou nomear os dados do item de argumento e então ele tem que retornar
um componente, então aqui eu vou retornar a mesma visão que
eu tinha antes, apenas me livre do manual mapeamento de lógica, então eu ainda vou retornar essa visão.
Agora você não precisa mais definir uma chave aqui, mas voltarei a como isso é digitado em um segundo.
Então, agora nós recebemos os dados do item e, portanto, não temos mais a meta aqui.
Um dado de item é um objeto mais complexo, mas aí você terá uma propriedade de item, além do item você também tem
o índice,
então o número, a posição daquele item na matriz começando em 0 e os separadores que permitiriam basicamente renderizar
separadores dinamicamente entre itens de lista, não algo que faremos aqui, mas item serão seus dados,
então um elemento de seus
dados de entrada e esse aqui é, portanto, um de nossos objetivos.
e se fizermos isso e salvarmos isso, vamos agora aprender React Native, talvez aqui no iPhone
para misturar as coisas e podemos adicionar coisas aqui e se eu adicionar muito
e eu, então, fechar o teclado, eu posso rolar, mas você Vai ver que há um aviso.
Expandimos isso, vemos virtualizar a lista de chaves faltantes para itens, de modo
que é outro aviso relacionado a chaves.
A razão para isso é que o FlatList adiciona automaticamente chaves aos seus itens, mas somente
se seus dados, seus dados de entrada tiverem uma certa forma e nossa forma atual, onde simplesmente temos uma matriz de
strings, não é suportada. A forma esperada
é que você não tenha metas que são apenas strings, mas em vez disso, sua lista é uma
lista de objetos onde você deve ter uma propriedade de chave nesse objeto e aqui vamos criar
uma chave aleatória agora com Math . aleatoriamente e então eu converto isso em uma string porque deveria ser uma string
e claro,
isso não é perfeitamente único, você pode ter o mesmo número aleatório duas vezes mas é bom o
suficiente para esta demo aqui e agora você não pode ter nenhum
outro dado aqui, nesse objeto, a chave é
a única propriedade must-have, então aqui eu vou
ter uma propriedade de valor, mas você poderia ter chamado este val ou
texto ou o que
você quiser, eu vou com valor e
isso é agora meu objetivo entrou.
Portanto, agora a matriz de metas do curso aqui é uma matriz de objetos em que cada objeto tem uma propriedade
key e uma propriedade value
e agora se alimentamos a matriz de metas do curso em FlatList, FlatList fica feliz porque espera uma fonte de dados
onde você tem uma matriz de objetos, onde cada objeto tem uma propriedade de chave e, em seguida, qualquer coisa
que você deseja. Agora, para gerar
nossos dados, não é mais suficiente acessar o itemData. item porque o item agora é um objeto e
não apenas uma string, mas o item terá uma chave e uma propriedade de valor agora, porque é isso que estamos configurando
e eu posso simplesmente acessar a propriedade value para gerar o texto. E agora, se salvarmos isso e isso reconstruir
e, portanto, agora, se tentarmos novamente com Learn React Native, feche o teclado, verá que não recebemos mais o aviso
e ainda podemos rolar isso, é claro, não temos nenhum erro aqui porque agora,
temos essa propriedade chave aqui. Agora, no caso de você ter dados onde você
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
testar isso, nós recebemos
o aviso aqui , nesse caso você também pode adicionar outra propriedade ao FlatList além dos dados e do item
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
por padrão, a lógica é que eu darei uma olhada no item e procure por uma propriedade de chave, mas agora
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
desse item, e agora você precisa retornar uma chave e, por padrão, ela procuraria por um item. chave, então essa é
a lógica padrão que você não precisa adicionar.
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
chaves para obter o ID como uma chave e agora com isso, você também se livrar do aviso
porque você informa FlatList do React Native como obter uma chave única para cada item da sua
lista.
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
nós também não receberemos nenhum aviso. Então, isso é FlatList e você deve usar FlatList para listas
muito longas, para listas onde você não sabe quanto tempo eles serão, mas onde eles são potencialmente muito longos, porque
isso lhe dá um desempenho melhor do que uma visão de rolagem que, por outro lado é ótimo
se você souber que tem apenas uma quantidade limitada de itens que provavelmente ultrapassarão os limites da sua tela,
mas onde você não terá muitos itens redundantes renderizados fora da tela.