Ant-design: Optimisation de la longue liste

Après avoir lu l'article et enfin parlé de Reactabular, l'effet de virtualisation qu'il implémente est vraiment bon, mais je ne pense pas que cette table soit nécessaire pour le moment, car maintenant il y a des problèmes de performances quand il n'y a pas beaucoup de données, et la pagination est recommandée quand il y a beaucoup de données Droite.

Il s'avère que react-lazyload rend également un div pour les composants qui ne sont pas dans la fenêtre pour remplir la hauteur afin que la barre de défilement puisse être affichée correctement. Il s'agit de l'implémentation de Reactabular et react-virtualized.

Reactabular rend un tr au-dessus et au-dessous, puis la hauteur est définie sur la hauteur de la ligne qui n'est pas affichée.

react-virtualized consiste à mettre un div en dehors de la liste, à augmenter la hauteur, puis à ajuster la position des éléments à afficher via position: absolute; top: 36700px; .

Il faut à la fois réagir-virtualisé et réagir-infini de donner la hauteur de chaque élément, ce qui ressemble à une limitation.

En partant du principe que la hauteur de ligne de chaque élément peut être déterminée, la vue de table basée sur le package react-infinite n'est pas mauvaise.

Ne collez pas l'adresse intranet. . .

Il faut à la fois réagir-virtualisé et réagir-infini de donner la hauteur de chaque élément, ce qui ressemble à une limitation.

Que diriez-vous de minItemHeight ou minRowHeight . Selon moi, si nous connaissons la hauteur minimale de toutes les lignes, il suffira de react-virtualized et react-infinite

oui ， height et minHeight fonctionneront

Ayant été torturé par ce problème pendant une longue période, hier j'ai finalement fait une solution de liste déroulante qui prend en charge n'importe quelle hauteur. react-list-toute-hauteur

@ wangtao0101 n'écrit pas un document?

Frères @benjycui , je n'ai pas encore eu le temps d'écrire.

@benjycui document ok

Je ne peux pas lire la plupart de ce fil, alors excusez-moi si ce n'est pas pertinent, mais j'ai pensé partager l'approche que nous avons adoptée avec le défilement virtualisé dans Jaeger UI. Ce n'est pas généralisé, à ce stade, mais cela vaut peut-être la peine d'y jeter un coup d'œil.

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

Les éléments n'ont pas besoin d'être des hauteurs fixes (éventuellement similaires à react-list-any-height ):

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

Quelques notes du PR :

Commencé avec la virtualisation de réaction , mais les problèmes liés aux flashs de régions non rendues lors du défilement et du contenu de taille dynamique / changeant périodiquement conduisent à la renaissance de l'ancien projet qui fait essentiellement la même chose: src/components/TracePage/TraceTimelineViewer/ListView/* .

ListView est plus optimisé pour nos besoins (et moins polyvalent). Ces optimisations comprennent:

• Adopter l'approche du rendu moins souvent et de plus grandes quantités d'éléments par rendu
• Optimisation du défilement dans les deux sens au lieu de la seule direction de défilement actuelle
• Avoir un concept de "surbalayage" minimum et régulier, ce qui signifie que si la liste des éléments actuellement rendus répond à un tampon minimum, ne rendez pas plus, mais si ce n'est pas le cas, alors le rendu est suffisant pour atteindre le tampon minimum et un peu bien

Aussi, le plus excellent travail sur Ant Design! C'est un plaisir de travailler avec: +1:

Une version devrait-elle être ajoutée?

J'ai rencontré le même problème. Y a-t-il des progrès?

ayant le même problème.

Y a-t-il des progrès à ce sujet?

@SeanCraftsman , @nunohora , @aindong - l'utilisation de -virtualized a résolu le problème, pour moi, qui est décrit ici dans la documentation.

@tiffon cela fonctionnera pour une liste mais je ne peux pas comprendre comment faire cela pour Table.

Salut, quelle est la meilleure façon d'utiliser TreeSelect avec react-virtualized?

Y a-t-il des progrès à ce sujet? Est-il possible de combiner react -virtualized avec la table Antd?

Il faut à la fois réagir-virtualisé et réagir-infini de donner la hauteur de chaque élément, ce qui ressemble à une limitation.
En partant du principe que la hauteur de ligne de chaque élément peut être déterminée, la vue de table basée sur le package react-infinite est efficace.

@paranoidjk @benjycui Just fyi, react-virtualized fonctionne également avec des lignes de hauteur inconnue qui dimensionnent les éléments à la volée: https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md

Aussi, mes réflexions à ce sujet: il n'est peut-être pas nécessaire de répliquer la virtualisation dans antd. Peut-être que, à la place, exposer une méthode de rendu chargée de fournir les lignes Menu / Table afin qu'un utilisateur puisse implémenter la virtualisation par lui-même serait un bon début.

Pour info, je pense que react-window est la prochaine génération de réact-virtualisée.

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

Le jeu.5 juil.2018, 04:01 Jonathan Dumaine [email protected]
a écrit:

Aussi, mes réflexions à ce sujet: il n'est peut-être pas nécessaire de reproduire
virtualisation dans antd. Peut-être au lieu d'exposer une méthode de rendu qui
est en charge de fournir les lignes Menu / Table afin qu'un utilisateur puisse implémenter
la virtualisation à elle seule serait un bon début.

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/ant-design/ant-design/issues/3789#issuecomment-402638593 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/ACMpUchXXaG0moutACfeWCLTQTZqoadnks5uDcfdgaJpZM4KueVV
.

Alors, y a-t-il un problème similaire? 😳

C'est aussi très lent avec le composant Transfer

Quelle est la solution de contournement actuelle pour utiliser la table antd avec -virtualized ?
Je n'ai aucune idée du rendu de la table antd avec une table react-virtualized alors que la liste react-virtualized peut être utilisée avec la liste d'antd à l'aide des accessoires rowRenderer.
ou Utilisez simplement une table virtualisée avec des styles personnalisés sans utiliser la table antd?

Une mise à jour pour ceci?

Le problème de performances est toujours évident, j'espère qu'il pourra être résolu au plus vite!

Je serais intéressé par la création d'un PR qui résout ce problème, en utilisant React Window. Que pensent les gardiens de l'introduction de cette dépendance?

Je serais intéressé par la création d'un PR qui résout ce problème, en utilisant React Window. Que pensent les gardiens de l'introduction de cette dépendance?

J'en ai vraiment besoin depuis un moment maintenant. Je pourrais être obligé d'implémenter ma table en dehors d'AntD en utilisant react-window pour le moment. Tant que cela n'est pas pris en charge, les performances sont inacceptables pour les longues listes et j'ai besoin d'une table utilisable avec de nombreuses lignes (nécessite une virtualisation).

@ swillis12 dans mon équipe, nous

Je souhaite toujours que ce problème soit marqué comme résolu. Les longues listes sont inutilisables pour le moment.

Continuez à prêter attention à ce problème. Il n'y a aucun moyen de résoudre les besoins de l'entreprise uniquement par pagination ~

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

Peut-être devrions-nous faire cela intégré.

Ce numéro est ouvert depuis 2 ans. . . . . .

Mieux vaut tard que jamais! 😉

alors, des progrès?

Hey! Nous adorerions ça! Comment ça arrive?

Le projet utilise treetable et peut avoir un grand nombre de nœuds, j'ai donc modifié le code en fonction de la table d'antd et ajouté le chargement virtuel.Il y a 1999 sous-nœuds sous chaque nœud de la démo, et il peut y avoir des bogues sans test détaillé.

Reportez-vous au projet react-window, merci pour les belles routes fournies par les premiers étages, car je viens de toucher le front-end, les changements de code sont un peu compliqués, j'ai le temps de le réorganiser et de le poster, et vous pouvez vous y référer si nécessaire.

Suivre +1

Il y a un autre problème étrange. Lorsque Form et Table existent en tant que composants frères, l'entrée sur Form sera très bloquée. Surtout quand Table Lorsqu'il y a fixed , la page entière est essentiellement dans un état d'opérations indisponibles. Table arrière-plan des données est paginé, 30 lignes par page. J'ajouterai une démo plus tard. Passez react tool constaté que lorsqu'un événement de clavier est déclenché, le composant entier sera rendu à nouveau. La solution temporaire consiste à supprimer tous les Form même niveau. Cependant, toute opération sur la page de liste entraînera toujours le blocage de la page.

package.json

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

La page n'effectue aucune autre logique à l'exception du chargement des données dans DidMount.

Quelqu'un peut-il nous donner une mise à jour si cela va être mis en œuvre? Si tel est le cas, pouvons-nous savoir quand il sera disponible. Cela devient un bloqueur dans notre application et devra envisager de supprimer Antd pour passer à autre chose, ce qui est triste car j'aime vraiment ce framework.

Je serais intéressé par la création d'un PR qui résout ce problème, en utilisant React Window. Que pensent les gardiens de l'introduction de cette dépendance?

J'en ai vraiment besoin depuis un moment maintenant. Je pourrais être obligé d'implémenter ma table en dehors d'AntD en utilisant react-window pour le moment. Tant que cela n'est pas pris en charge, les performances sont inacceptables pour les longues listes et j'ai besoin d'une table utilisable avec de nombreuses lignes (nécessite une virtualisation).

@ swillis12 Salut, comment avez-vous

S'il y a trop de colonnes, l'une de nos exigences est d'avoir plus de 70 colonnes, qui doivent être affichées. Même si la pagination est terminée, elle sera toujours très en retard.

Je pense que les documents ont des exemples avec react- virtualized, ce qui devrait faire
l'astuce.

Le jeu.28 mars 2019, 04:48, Dane [email protected] a écrit:

S'il y a trop de colonnes, l'une de nos exigences est d'avoir plus de 70 colonnes, qui doivent être affichées. Même si la pagination est terminée, elle sera toujours très en retard.

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/ant-design/ant-design/issues/3789#issuecomment-477502300 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/ACMpUYf-yuPS8ag-mr47H7b4Z2rWHVnLks5vbIHSgaJpZM4KueVV
.

Je suis ce numéro depuis plus d'un an ...
Pas encore résolu ...
Ensuite, react-virtualized et react-window sont trop complexes et trop de fonctionnalités, et je n'ai pas besoin de ces documents de fonctionnalités trop paresseux à lire, j'ai fait une petite roue par moi-même <br i="8"/> La fonctionnalité est qu'il n'y a pas d'autre dépendance que react, et la hauteur de chaque ligne Peut être dynamique, pas besoin de donner à l'avance

https://github.com/Autodesk/react-base-table regardez ceci

GitHub

Autodesk / react-base-table

Un composant de table de réaction pour afficher de grands ensembles de données avec des performances et une flexibilité élevées - Autodesk / react-base-table

Préoccupé ... L'entreprise doit afficher 1 000 lignes de données.

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

Peut-être devrions-nous faire cela intégré.

d'autres progrès?

J'essaie de créer un TimePicker avec une entrée et une liste déroulante, je dois donc rendre 1440 éléments (24 heures * 60 minutes) dans la superposition de la liste déroulante avec Menu, car Dropdown ne fonctionne pas avec les autres composants.

Mais les performances de la liste déroulante avec cette quantité de données sont terribles.

Donc, ma question est: que puis-je faire pour utiliser la fenêtre de réaction comme superposition déroulante?

Voudrais répandre mon inquiétude ici aussi. Nous avons essayé d'afficher une liste déroulante de sélection pour une liste avec la liste complète de la taxonomie des produits Google, mais c'est très lent avec quelques secondes de retard avant que je puisse voir la liste déroulante. Quel est le progrès jusqu'à présent?

Je veux savoir s'il y a une solution maintenant?
Je souhaite utiliser react-virtualized dans la saisie semi-automatique, mais je ne peux pas l'utiliser. Quand je rentre lecomposant dans la méthode rowRenderer de List, j'obtiens une erreur.

@jingxiawl Une solution de contournement consiste à faire de la liste déroulante une liste déroulante basée sur la recherche. D'un point de vue différent, il n'est pas trop convivial d'afficher une longue liste d'éléments que l'utilisateur peut également faire défiler manuellement.J'utilise donc des états pour gérer la liste de sélection déroulante en filtrant la phrase de recherche. Si vous utilisez des hooks React, vous pouvez utiliser useEffect pour minimiser le re-rendu des composants.

J'espère que cela réduit la douleur des rendus lents. Néanmoins, j'espère toujours que ce composant ne ralentira pas en raison d'une liste de sélections plus longue.

@yoonwaiyan
Je vous remercie. Mais maintenant, le problème est qu'il y a beaucoup de données filtrées et qu'il y aura toujours des problèmes avec les longues listes.

@yoonwaiyan avez-vous des exemples de faire cela?

antd.Table table virtuelle, l'API est complètement cohérente avec la table d'origine, pas besoin de passer rowHeight
https://github.com/ctq123/ant-virtual-table

@reconbot Ceci est un exemple simple que j'ai fait en utilisant les hooks React.

Basé sur react-window, un composant de formulaire entièrement fonctionnel
https://github.com/nexxLuo/tablex

@reconbot Ceci est un exemple simple que j'ai fait en utilisant les hooks React.

Encore très lent pour moi.

@douglasjunior oui, ce n'est pas censé résoudre complètement le problème, mais plutôt une solution temporaire pour mon code de production pour au moins ne pas donner une mauvaise expérience de chargement à l'utilisateur, mais je suis ouvert à des suggestions sur la façon de l'optimiser davantage.

Vous pouvez vous référer à ant-virtual-table comme étant lié sur quelques threads ci-dessus pour voir comment ils ont résolu ce problème pour table comme ils le prétendaient.

btw ce message SO a des solutions légitimes au problème de la longue liste, j'espère que l'équipe antd pourrait y jeter un coup d'œil: https://stackoverflow.com/questions/38033442/big-list-performance-with-react

Bonjour l'équipe fourmi
Y a-t-il des nouvelles sur ce problème? un plan pour le réparer de sitôt? il est en fait très pénible d'utiliser une table de liste avec beaucoup de données
@ afc163
Excellent travail au fait !!!

Bonjour l'équipe fourmi
J'utilise le composant Tree avec un chargement paresseux, et j'ai environ 20 000 TreeNodes tant qu'enfants de moins de TreeNode . Il est si lent et pénible de naviguer dans l'arborescence avec un si grand nombre de données. Quelque chose de nouveau à propos de ce problème?

Bonjour l'équipe Ant,
Premier amour des composants de fourmis d'amour.
J'utilise le composant Select et j'ai vraiment besoin d'ajouter react-window ou un autre moyen de l'optimiser, car il existe plus de 2000 options rendant le composant extrêmement lent. Veuillez me faire savoir si vous avez des mises à jour à ce sujet.

Pouvons-nous utiliser ceci pour une référence? Ce référentiel contient une tonne d'informations importantes pour le composant Table.

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

SuperSelect est basé sur antd Select, qui prend en charge une liste virtuelle de dizaines de milliers de données, la même API que antd Select, qui fonctionne bien dans mon projet.

maintenant, SuperSelect passe à antd-virtual-select

dépôt antd-virtual-select

c'est une démo

Des trucs sympas @iblq! J'ai fait une légère modification de votre démo pour inclure une comparaison avec la fourmi sélectionnez https://codesandbox.io/s/superselect-8xlwk

Bonjour l'équipe Ant,
Premier amour des composants de fourmis d'amour.
J'utilise le composant Select et j'ai vraiment besoin d'ajouter react-window ou un autre moyen de l'optimiser, car il existe plus de 2000 options rendant le composant extrêmement lent. Veuillez me faire savoir si vous avez des mises à jour à ce sujet.

https://github.com/react-component/select version alpha implémente déjà le défilement virtuel.
Il vous suffit d'attendre antd 4.0 pour l'avoir.

@megawac lmao quoi. Suivons-nous le même fil? Où quelqu'un vous proposait-il de vous embaucher?

Je suppose que je vais devoir attendre 4.0 ⌚️

La démo SuperSelect ci-dessus est assez incroyable, cependant, ngl. Très performant aussi. Malheureusement, je ne veux pas copier-coller plus de 300 lignes pour obtenir un Select performant, d'autant plus que j'utilise TypeScript et qu'il est en JS. Toujours assez cool!

Je souhaite que react-window ne se limite pas aux listes ...

Une autre option est react-virtualized-select , mais il y a deux problèmes: 1) Ce n'est pas Ant 😄, 2) Il n'est plus maintenu, donc si vous rencontrez des problèmes, 🤷‍♂

Pour ceux qui se demandent, une solution à cela pour les données non-déroulantes / sélectionnées est le composant List avec l'option pagination prop. Fonctionne comme un charme!

LazySelectInput doit gérer le chargement> 2000 sans aucun problème de rendu.

le nouveau composant Table implémente également la liste virtuelle, voir https://github.com/react-component/table/releases/tag/v7.0.0-alpha.16

@abenhamdine Est-il possible d'utiliser le nouveau composant de table pour la prise en charge de la virtualisation avec les projets de conception de fourmis existants?

@abenhamdine Est-il possible d'utiliser le nouveau composant de table pour la prise en charge de la virtualisation avec les projets de conception de fourmis existants?

Peut-être, mais à mon humble avis, il est préférable d'attendre antd 4.0, un nouveau composant de table est déjà intégré dans la branche 4.0 préparer.

Hier, j'ai essayé d'ajouter la version alpha mais sans succès.

Très bien, alors je vais utiliser celui-ci pour l'instant.

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

Il y avait une doc un peu compliquée, j'avais aussi besoin de corriger un peu le css.

Existe-t-il un moyen d'utiliser le nouveau composant select dans la v3 pendant que nous attendons la v4? Ou y a-t-il un composant de sélection tiers qui implémente une liste virtualisée et avec le même style antd?

ÉDITER.
J'utilise le composant SuperSelect posté ci-dessus et il fonctionne parfaitement

toute mise à jour ?

@ shivam-ahuja vous pouvez essayer Sélectionnez le composant dans antd 4, 4.0.0-rc1 est sorti.
Voir https://next.ant.design/components/select/#components -select-demo-big-data

Le filtrage des tables a-t-il été travaillé? Je rencontre toujours de longs temps de chargement lors du filtrage de grands ensembles de données, comme indiqué dans # 11331. Le filtrage est pratiquement inutilisable avec une table contenant plus de 1 000 éléments.

La performance de rendu de longue liste a été optimisée dans la v4: https://github.com/ant-design/ant-design/issues/21656