Ant-design: Otimização de lista longa

Depois de ler o artigo e, finalmente, falar sobre Reactabular, o efeito de virtualização que ele atinge é realmente bom, mas não acho que esta tabela seja necessária por enquanto, porque agora há problemas de desempenho quando não há muitos dados, e a paginação é recomendada quando há muitos dados. Direito.

Acontece que o react-lazyload também renderiza uma div para componentes que não estão na janela de visualização para preencher a altura para que a barra de rolagem possa ser exibida corretamente.Esta é a implementação de Reactabular e react-virtualized.

Reactabular renderiza um tr acima e abaixo e, em seguida, a altura é definida como a altura da linha que não é exibida.

react-virtualized é definir uma div fora da lista, sustentar a altura e, em seguida, ajustar a posição dos elementos a serem exibidos por meio de position: absolute; top: 36700px; .

Tanto o react-virtualized quanto o react-infinite precisam fornecer a altura de cada item, o que parece uma limitação.

Sob a premissa de que a altura da linha de cada item pode ser determinada, a visualização da tabela baseada no pacote react-infinite não é ruim.

Não cole o endereço da intranet. . .

Tanto o react-virtualized quanto o react-infinite precisam fornecer a altura de cada item, o que parece uma limitação.

Que tal minItemHeight ou minRowHeight . Se soubermos a altura mínima de todas as linhas, será suficiente para react-virtualized e react-infinite

sim, tanto height quanto minHeight funcionarão

Tendo sido torturado por este problema por muito tempo, ontem eu finalmente fiz uma solução de lista de rolagem que suporta qualquer altura. react-list-any-height

@ wangtao0101 não escreve um documento?

Irmãos @benjycui , ainda não tive tempo de escrever.

@benjycui document ok

Não consigo ler a maior parte deste tópico, então desculpas se isso não for relevante, mas pensei em compartilhar a abordagem que adotamos com a rolagem virtualizada na IU do Jaeger. Não é generalizado, neste ponto, mas ainda pode valer a pena dar uma olhada.

jaegertracing / jaeger-ui - src / components / TracePage / TraceTimelineViewer / ListView / index.js

Os itens não precisam ter alturas fixas (possivelmente semelhantes a react-list-any-height ):

src / components / TracePage / TraceTimelineViewer / ListView / index.js # L321, L373

Algumas notas do PR :

Começou com a virtualização reativa , mas problemas em torno de flashes de regiões não renderizadas ao rolar e dimensionar dinamicamente / mudar periodicamente o conteúdo levam ao renascimento do projeto antigo que essencialmente faz a mesma coisa: src/components/TracePage/TraceTimelineViewer/ListView/*

ListView é mais otimizado para nossas necessidades (e menos versátil). Essas otimizações incluem:

• Adotando a abordagem de renderizar com menos frequência e maiores quantidades de itens por renderização
• Otimizando a rolagem em ambas as direções, em vez de apenas na direção de rolagem atual
• Ter um conceito de "overscan" mínimo e regular, o que significa que se a lista atualmente renderizada de itens atender a um buffer mínimo, não renderize mais, mas se não, renderize o suficiente para atender ao buffer mínimo e alguns extras, como bem

Além disso, excelente trabalho em Ant Design! É uma alegria trabalhar com: +1:

Existe alguma versão planejada para ser adicionada?

Eu encontrei o mesmo problema. Existe alguma progressão?

tendo o mesmo problema.

Há algum progresso nisso?

@SeanCraftsman , @nunohora , @aindong - usar o -virtualized resolveu o problema, para mim, que está descrito aqui na documentação.

@tiffon isso funcionará para uma lista, mas não consigo descobrir como fazer isso para a tabela.

Oi, qual é a melhor maneira de usar TreeSelect com react-virtualized?

Existe algum progresso nisso? É possível combinar a virtualização reativa com a tabela Antd?

Tanto o react-virtualized quanto o react-infinite precisam fornecer a altura de cada item, o que parece uma limitação.
Partindo da premissa de que a altura da linha de cada item pode ser determinada, a visualização da tabela baseada no pacote react-infinite não é ruim.

@paranoidjk @benjycui Just fyi, https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md

Além disso, minha opinião sobre isso: pode não ser necessário replicar a virtualização dentro do antd. Talvez, em vez disso, expor um método de renderização responsável por fornecer as linhas de Menu / Tabela para que um usuário possa implementar a virtualização por conta própria seja um bom começo.

Para sua informação, acho que o react-window é a próxima geração do react-virtualizado.

https://github.com/bvaughn/react-window

Na quinta, 5 de julho de 2018, 4:01 Jonathan Dumaine [email protected]
escrevi:

Além disso, minha opinião sobre isso: pode não ser necessário replicar
virtualização no antd. Em vez disso, talvez exponha um método de renderização que
é responsável por fornecer as linhas do Menu / Tabela para que um usuário possa implementar
a virtualização por si só seria um bom começo.

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/ant-design/ant-design/issues/3789#issuecomment-402638593 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/ACMpUchXXaG0moutACfeWCLTQTZqoadnks5uDcfdgaJpZM4KueVV
.

Então, existe um problema semelhante? 😳

Também é muito lento com o componente Transfer

qual é a solução alternativa atual para usar a tabela antd com o -virtualized ?
Não tenho ideia de como renderizar a tabela antd com a tabela react-virtualized enquanto a lista react-virtualized pode ser usada com a lista do antd usando os adereços do rowRenderer.
ou apenas usar a tabela react-virtualized com estilos personalizados sem usar a tabela antd?

alguma atualização disso?

O problema de desempenho ainda é óbvio, espero que seja resolvido o mais rápido possível!

Eu estaria interessado em criar um PR que resolva isso, usando React Window. Qual é a opinião dos mantenedores sobre a introdução desta dependência?

Eu estaria interessado em criar um PR que resolva isso, usando React Window. Qual é a opinião dos mantenedores sobre a introdução desta dependência?

Eu preciso muito disso há um tempo. Posso ser forçado a implementar minha tabela fora do AntD usando a janela de reação por enquanto. Até que isso seja suportado, o desempenho é inaceitável para listas longas e eu preciso de uma tabela utilizável com muitas linhas (precisa de virtualização).

@ swillis12 na minha equipe, estamos usando a tabela de reação com ótimas performances, se isso puder ajudar :)

Eu ainda quero ver este problema marcado como resolvido .. Listas longas são inutilizáveis no momento ..

Continue prestando atenção a este problema. Não há maneira de resolver as necessidades de negócios apenas por meio de paginação ~

https://github.com/bvaughn/react-window

Talvez devêssemos fazer isso embutido.

Esta edição está aberta há 2 anos. . . . . .

Antes tarde do que nunca! 😉

então, algum progresso?

Ei! Nós adoraríamos isso! Como está indo?

O projeto precisa usar treetable e pode haver um grande número de nós, então modifiquei o código com base na tabela do antd e adicionei o carregamento virtual. Existem subnós de 1999 em cada nó da demonstração e pode haver bugs sem testes detalhados.

Consulte o projeto da janela de reação, obrigado pelas boas estradas fornecidas pelos primeiros andares, porque acabei de tocar no front-end, as alterações de código são um pouco confusas, tenho tempo para reorganizar e postá-lo, e você pode consultá-lo se necessário.

Siga +1

Também há um problema estranho. Quando Form e Table existem como componentes irmãos, a entrada em Form ficará muito travada. Especialmente quando Table Quando há fixed , a página inteira está basicamente em um estado de operações indisponíveis. Table plano de fundo dos dados é paginado, 30 linhas por página. Adicionarei uma demonstração mais tarde. Passe react tool descobriu que, quando um evento de teclado é acionado, todo o componente será renderizado novamente. Agora, a solução temporária é remover todos os Form mesmo nível. No entanto, qualquer operação na página de lista ainda fará com que a página congestione.

package.json

"antd": "^3.12.3",
 "react": "^16.3.2",

A página não faz nenhuma outra lógica, exceto para o carregamento de dados em DidMount.

Alguém pode nos dar uma atualização se isso vai ser implementado? Em caso afirmativo, podemos saber quando estará disponível. Isso está se tornando um bloqueador em nosso aplicativo e será necessário considerar descartar o Antd para seguir em frente, o que é triste porque eu realmente gosto desse framework.

Eu estaria interessado em criar um PR que resolva isso, usando React Window. Qual é a opinião dos mantenedores sobre a introdução desta dependência?

Eu preciso muito disso há um tempo. Posso ser forçado a implementar minha tabela fora do AntD usando a janela de reação por enquanto. Até que isso seja suportado, o desempenho é inaceitável para listas longas e eu preciso de uma tabela utilizável com muitas linhas (precisa de virtualização).

@ swillis12 Olá, como você acabou lidando com o problema de desempenho da mesa?

Se houver muitas colunas, um dos nossos requisitos é ter mais de 70 colunas, que precisam ser exibidas. Mesmo que a paginação seja feita, ainda haverá muito atraso.

Eu acredito que os documentos têm exemplos com virtualizado, o que deve servir
o truque.

Na quinta-feira, 28 de março de 2019, 4:48, Dane [email protected] escreveu:

Se houver muitas colunas, um dos nossos requisitos é ter mais de 70 colunas, que precisam ser exibidas. Mesmo que a paginação seja feita, ainda haverá muito atraso.

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/ant-design/ant-design/issues/3789#issuecomment-477502300 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/ACMpUYf-yuPS8ag-mr47H7b4Z2rWHVnLks5vbIHSgaJpZM4KueVV
.

Acompanho este assunto há mais de um ano ...
Ainda não resolvido ...
Então react-virtualized e react-window são muito complexos e muitos recursos, e eu não preciso desses documentos de recursos com preguiça de ler, fiz uma pequena roda sozinho <br i="8"/> O recurso é que não há nenhuma outra dependência, exceto react, e a altura de cada linha Pode ser dinâmico, sem necessidade de dar antecipadamente

https://github.com/Autodesk/react-base-table olhe para isso

GitHub

Autodesk / react-base-table

Um componente da tabela react para exibir grandes conjuntos de dados com alto desempenho e flexibilidade - Autodesk / react-base-table

Preocupado ... O negócio precisa exibir 1000 linhas de dados.

https://github.com/bvaughn/react-window

Talvez devêssemos fazer isso embutido.

algum progresso adicional?

Estou tentando criar um TimePicker com um Input e Dropdown, então preciso renderizar 1440 itens (24 horas * 60 minutos) na sobreposição do Dropdown com Menu, porque o Dropdown não funciona com outros componentes.

Mas o desempenho do menu suspenso com essa quantidade de dados é terrível.

Portanto, minha pergunta é: O que posso fazer para usar a janela de reação como uma sobreposição suspensa?

Gostaria de espalhar minha preocupação aqui também. Estamos tentando renderizar uma lista suspensa de seleção para uma lista com a lista completa de taxonomia de produtos do

Eu quero saber se existe uma solução agora?
Quero usar o react-virtualized no Autocomplete, mas não consigo. Quando eu retornar ocomponente no método rowRenderer de List, recebo um erro.

@jingxiawl Uma solução alternativa é fazer o menu suspenso como um menu suspenso baseado em pesquisa. De uma perspectiva diferente, não é muito amigável exibir uma longa lista de itens para o usuário rolar para baixo manualmente também, então eu uso estados para gerenciar a lista de seleção suspensa filtrando a frase de pesquisa. Se estiver usando ganchos React, você pode usar useEffect para minimizar a re-renderização do componente.

Espero que isso reduza a dor de renderizações lentas. No entanto, ainda espero que este componente não diminua a velocidade por causa da longa lista de seleções.

@yoonwaiyan
Obrigado. Mas agora o problema é que há muitos dados filtrados e sempre haverá problemas com listas longas.

@yoonwaiyan , você tem algum exemplo de como fazer isso?

tabela virtual antd.Table, API é completamente consistente com a tabela original, não há necessidade de passar rowHeight
https://github.com/ctq123/ant-virtual-table

@reconbot Este é um exemplo simples que fiz usando os ganchos React.

Com base na janela de reação, um componente de formulário totalmente funcional
https://github.com/nexxLuo/tablex

@reconbot Este é um exemplo simples que fiz usando os ganchos React.

Ainda muito lento para mim.

@douglasjunior yup não foi feito para resolver o problema completamente, mas sim uma solução temporária para o meu código de produção para, pelo menos, não dar uma experiência de carregamento ruim ao usuário, mas estou aberto a sugestões sobre como otimizá-lo ainda mais.

Você pode se referir a ant-virtual-table conforme link em alguns tópicos acima para ver como eles resolveram esse problema para a tabela como afirmam ser.

btw este post SO tem algumas soluções legítimas para o problema de longa lista, espero que a equipe antd pudesse dar uma olhada: https://stackoverflow.com/questions/38033442/big-list-performance-with-react

Olá, equipe do Ant
Alguma notícia sobre esse assunto? algum plano para consertá-lo em breve? na verdade, é muito doloroso usar a tabela de lista quando há muitos dados
@ afc163
A propósito, ótimo trabalho !!!

Olá, equipe do Ant
Estou usando o componente Árvore com carregamento lento e tenho cerca de 20.000 TreeNodes como filhos menores de TreeNode . É muito lento e doloroso navegar pela árvore com um grande número de dados. Alguma novidade sobre esse problema?

Olá, equipe do Ant,
Primeiro amor, amor e componentes.
Estou usando o componente Select e realmente preciso adicionar react-window ou alguma outra forma de otimizá-lo, pois há mais de 2.000 opções tornando o componente dolorosamente lento. Por favor, deixe-me saber se você tem alguma atualização sobre isso.

Podemos usar isso para alguma referência? Este repositório contém muitas informações importantes para o componente Tabela.

https://github.com/wubostc/virtualized-table-for-antd

SuperSelect é baseado no antd Select, que suporta uma lista virtual de dezenas de milhares de dados, a mesma API do antd Select, que funciona bem no meu projeto.

agora, SuperSelect muda para antd-virtual-select

antd-virtual-select repo

esta é uma demonstração

Coisas legais @iblq! Fiz uma pequena modificação em sua demonstração para incluir uma comparação com o ant select https://codesandbox.io/s/superselect-8xlwk

Olá, equipe do Ant,
Primeiro amor, amor e componentes.
Estou usando o componente Select e realmente preciso adicionar react-window ou alguma outra forma de otimizá-lo, pois há mais de 2.000 opções tornando o componente dolorosamente lento. Por favor, deixe-me saber se você tem alguma atualização sobre isso.

https://github.com/react-component/select versão alfa já implementa rolagem virtual.
Você só precisa esperar pelo antd 4.0 para obtê-lo.

@megawac lmao what. Estamos seguindo o mesmo tópico? Onde alguém estava se oferecendo para contratar você?

Acho que vou ter que esperar 4,0 ⌚️

A SuperSelect demo acima é incrível, entretanto, ngl. Muito performante também. Infelizmente, não quero copiar e colar mais de 300 linhas para obter um desempenho Select , especialmente porque estou usando TypeScript e ele está em JS. Ainda bem legal!

Gostaria que react-window não estivessem limitados apenas a listas ...

Outra opção é reat-virtualizado-selecionar , mas há dois problemas: 1) Não é o Ant 😄, 2) Não é mais mantido, então, se você tiver problemas, 🤷‍♂

Para quem está se perguntando, uma solução para isso para dados não suspensos / selecionados é o componente List com o opcional pagination prop. Funciona como um encanto!

LazySelectInput deve lidar com o carregamento> 2000 sem problemas de renderização.

O novo componente Tabela também implementa lista virtual, consulte https://github.com/react-component/table/releases/tag/v7.0.0-alpha.16

@abenhamdine Existe alguma maneira de usarmos o novo componente de tabela para suporte de virtualização com projetos de design de formigas existentes?

@abenhamdine Existe alguma maneira de usarmos o novo componente de tabela para suporte de virtualização com projetos de design de formigas existentes?

Talvez, mas IMHO é melhor esperar pelo antd 4.0, novo componente da tabela já está integrado no 4.0 preparar branch.

Ontem tentei adicionar a versão alfa, mas não tive sucesso.

Tudo bem, então vou usar este por enquanto.

https://github.com/wubostc/virtualized-table-for-antd

Estava um pouco bagunçado, também precisei consertar um pouco o css.

Existe uma maneira de usar o novo componente de seleção na v3 enquanto esperamos pela v4? Ou existe um componente selecionado de terceiros que implementa uma lista virtualizada e com o mesmo estilo antd?

EDITAR.
Estou usando o componente SuperSelect postado acima e está funcionando perfeitamente

Qualquer atualização ?

@ shivam-ahuja você pode tentar Selecionar o componente em antd 4, 4.0.0-rc1 foi lançado.
Consulte https://next.ant.design/components/select/#components -select-demo-big-data

A filtragem da tabela foi trabalhada? Ainda estou enfrentando longos tempos de carregamento ao filtrar grandes conjuntos de dados, conforme visto em # 11331. A filtragem é praticamente inutilizável com uma mesa com mais de 1k itens.

O desempenho de renderização de longa lista foi otimizado na v4: https://github.com/ant-design/ant-design/issues/21656