Ant-design: Optimización de listas largas

Después de leer el artículo y finalmente hablar de Reactabular, el efecto de virtualización que implementa es realmente bueno, pero no siento que esta tabla sea necesaria por el momento, porque ahora hay problemas de rendimiento cuando no hay muchos datos, y se recomienda la paginación cuando hay muchos datos. Correcto.

Resulta que react-lazyload también renderiza un div para los componentes que no están en la ventana gráfica para llenar la altura de modo que la barra de desplazamiento se pueda mostrar correctamente Esta es la implementación de Reactabular y react-virtualized.

Reactabular representa un tr arriba y abajo, y luego la altura se establece en la altura de la fila que no se muestra.

react-virtualized es establecer un div fuera de la lista, apuntalar la altura y luego ajustar la posición de los elementos que se mostrarán a través de position: absolute; top: 36700px; .

Tanto react-virtualized como react-infinite necesitan dar la altura de cada elemento, lo que se siente como una limitación.

Bajo la premisa de que se puede determinar la altura de la fila de cada elemento, la vista de tabla basada en el paquete react-infinite no es mala.

No pegue la dirección de la intranet. . .

Tanto react-virtualized como react-infinite necesitan dar la altura de cada elemento, lo que se siente como una limitación.

¿Qué tal minItemHeight o minRowHeight ? Según yo, si conocemos la altura mínima de todas las filas, será suficiente para react-virtualized y react-infinite

sí, tanto height como minHeight funcionarán

Después de haber sido torturado por este problema durante mucho tiempo, ayer finalmente hice una solución de lista de desplazamiento que admite cualquier altura. reaccionar-lista-cualquier-altura

@ wangtao0101 no escribes un documento?

@benjycui hermanos, todavía no he tenido tiempo de escribir.

@benjycui documento ok

No puedo leer la mayor parte de este hilo, así que disculpas si esto no es relevante, pero pensé en compartir el enfoque que tomamos con el desplazamiento virtualizado en la IU de Jaeger. No es generalizado, en este punto, pero aún podría valer la pena echarle un vistazo.

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

Los elementos no necesitan tener alturas fijas (posiblemente similar a react-list-any-height ):

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

Algunas notas del PR :

Comenzó con react-virtualized , pero los problemas relacionados con los flashes de las regiones no renderizadas mientras se desplaza y el contenido de tamaño dinámico / cambio periódico conducen a la reactivación de un proyecto antiguo que esencialmente hace lo mismo: src/components/TracePage/TraceTimelineViewer/ListView/* .

ListView está más optimizado para nuestras necesidades (y menos versátil). Estas optimizaciones incluyen:

• Adoptando el enfoque de renderizar con menos frecuencia y mayores cantidades de elementos por renderizado
• Optimización para el desplazamiento en ambas direcciones en lugar de solo en la dirección de desplazamiento actual
• Tener un concepto de "sobreexploración" mínimo y regular, lo que significa que si la lista de elementos renderizada actualmente cumple con un búfer mínimo, no renderice más, pero si no lo hace, entonces renderice lo suficiente para cumplir con el búfer mínimo y algo extra, como bien

Además, ¡el trabajo más excelente en Ant Design! Es un placer trabajar con: +1:

¿Se planea agregar alguna versión?

Me encontré con el mismo problema. ¿Hay alguna progresista?

teniendo el mismo problema.

¿Hay algún progreso en esto?

@SeanCraftsman , @nunohora , @aindong : el uso de react-virtualized resolvió el problema, para mí, que se describe aquí en los documentos.

@tiffon, esto funcionará para una lista, pero no puedo averiguar cómo hacer esto para la tabla.

Hola, ¿cuál es la mejor manera de usar TreeSelect con react-virtualized?

¿Hay algún progreso en esto? ¿Es posible combinar react-virtualized con la tabla Antd?

Tanto react-virtualized como react-infinite necesitan dar la altura de cada elemento, lo que se siente como una limitación.
Bajo la premisa de que se puede determinar la altura de la fila de cada elemento, la vista de tabla basada en el paquete react-infinite es efectiva.

@paranoidjk @benjycui Solo para su información, react-virtualized también funciona con filas de altura desconocida que dimensionan los elementos sobre la marcha: https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md

Además, mis pensamientos sobre esto: puede que no sea necesario replicar la virtualización dentro de antd. Quizás, en cambio, exponer un método de renderizado que se encarga de proporcionar las filas de Menú / Tabla para que un usuario pueda implementar la virtualización por su cuenta sería un buen comienzo.

Para su información, creo que react-window es el react-virtualized de próxima generación.

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

El jueves, 5 de julio de 2018, 4:01 a.m. Jonathan Dumaine [email protected]
escribió:

Además, mis pensamientos sobre esto: puede que no sea necesario replicar
virtualización dentro de antd. Quizás en su lugar exponga un método de renderizado que
está a cargo de proporcionar las filas de Menú / Tabla para que un usuario pueda implementar
la virtualización por sí sola sería un buen comienzo.

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/ant-design/ant-design/issues/3789#issuecomment-402638593 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/ACMpUchXXaG0moutACfeWCLTQTZqoadnks5uDcfdgaJpZM4KueVV
.

Entonces, ¿hay un problema similar? 😳

También es muy lento con el componente de transferencia

¿ Cuál es la solución alternativa actual para usar la react-virtualized ?
No tengo idea de cómo renderizar la tabla antd con la tabla react-virtualizada, mientras que la lista react-virtualizada se puede usar con la lista de antd usando los accesorios de rowRenderer.
o simplemente usar la tabla reactiva virtualizada con estilos personalizados sin usar la tabla antd?

¿Algún avance en esto?

El problema de rendimiento sigue siendo obvio, ¡espero que se pueda resolver lo antes posible!

Me interesaría crear un PR que resuelva esto, usando React Window. ¿Cuáles son los pensamientos de los mantenedores sobre la introducción de esta dependencia?

Me interesaría crear un PR que resuelva esto, usando React Window. ¿Cuáles son los pensamientos de los mantenedores sobre la introducción de esta dependencia?

Necesito esto desesperadamente desde hace un tiempo. Es posible que me vea obligado a implementar mi tabla fuera de AntD usando react-window por ahora. Hasta que esto sea compatible, el rendimiento es inaceptable para listas largas y necesito una tabla utilizable con muchas filas (necesita virtualización).

@ swillis12 en mi equipo estamos usando react-tabular con grandes actuaciones, si eso pudiera ser de alguna ayuda :)

Aún me gustaría ver este problema marcado como resuelto. Las listas largas no se pueden utilizar en este momento ...

Sigue prestando atención a este problema. No hay forma de resolver las necesidades comerciales solo mediante la paginación ~

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

Quizás deberíamos hacer esto incorporado.

Este número ha estado abierto durante 2 años. . . . . .

¡Mejor tarde que nunca! 😉

entonces, ¿algún progreso?

¡Oye! ¡Nos encantaría esto! ¿Cómo te va?

El proyecto usa una tabla de árbol y puede tener una gran cantidad de nodos, así que modifiqué el código en base a la tabla de antd y agregué carga virtual. Hay 1999 subnodos debajo de cada nodo de la demostración, y puede haber errores sin pruebas detalladas.

Consulte el proyecto de ventana de reacción, gracias por las excelentes carreteras proporcionadas por los primeros pisos, porque me acabo de comunicar con el front-end, los cambios de código son un poco complicados, tengo tiempo para reorganizarlo y publicarlo, y puede consultar

Seguir +1

Hay otro problema extraño. Cuando Form y Table existen como componentes hermanos, la entrada en Form estará muy bloqueada. Especialmente cuando Table Cuando hay fixed , toda la página está básicamente en un estado de operaciones no disponibles. Table fondo de datos está paginado, 30 líneas por página. Agregaré una demostración más tarde. Pase react tool descubrió que cuando se activa un evento de teclado, todo el componente se volverá a renderizar. Ahora la solución temporal es eliminar todos los Form mismo nivel. Sin embargo, cualquier operación en la página de lista seguirá provocando que la página se atasque.

package.json

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

La página no tiene ninguna otra lógica excepto la carga de datos en DidMount.

¿Alguien puede darnos una actualización si esto se va a implementar? Si es así, ¿podemos saber cuándo estará disponible? Esto se está convirtiendo en un bloqueador en nuestra aplicación y deberá considerar eliminar Antd para poder seguir adelante, lo cual es triste porque realmente me gusta este marco.

Me interesaría crear un PR que resuelva esto, usando React Window. ¿Cuáles son los pensamientos de los mantenedores sobre la introducción de esta dependencia?

Necesito esto desesperadamente desde hace un tiempo. Es posible que me vea obligado a implementar mi tabla fuera de AntD usando react-window por ahora. Hasta que esto sea compatible, el rendimiento es inaceptable para listas largas y necesito una tabla utilizable con muchas filas (necesita virtualización).

@ swillis12 Hola, ¿cómo terminaste lidiando con el problema del rendimiento de la mesa?

Si hay demasiadas columnas, uno de nuestros requisitos es enumerar más de 70 columnas, que deben mostrarse. Incluso si se realiza la paginación, seguirá estando muy rezagada.

Creo que los documentos tienen ejemplos con react- virtualized, lo que debería hacer
el truco.

El jueves 28 de marzo de 2019 a las 4:48 a. M., Dane [email protected] escribió:

Si hay demasiadas columnas, uno de nuestros requisitos es enumerar más de 70 columnas, que deben mostrarse. Incluso si se realiza la paginación, seguirá estando muy rezagada.

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/ant-design/ant-design/issues/3789#issuecomment-477502300 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/ACMpUYf-yuPS8ag-mr47H7b4Z2rWHVnLks5vbIHSgaJpZM4KueVV
.

He estado siguiendo este problema durante más de un año ...
Aún no resuelto ...
Entonces, react-virtualized y react-window son demasiado complejos y tienen demasiadas funciones. No necesito que esos documentos de funciones sean demasiado perezosos para leer. Hice una pequeña rueda yo mismo. <br i="8"/> La función es que no hay otra dependencia excepto reaccionar y la altura de cada línea Puede ser dinámico, no es necesario dar por adelantado

https://github.com/Autodesk/react-base-table mira esto

GitHub

Autodesk / react-base-table

Un componente de tabla de reacción para mostrar grandes conjuntos de datos con alto rendimiento y flexibilidad: Autodesk / react-base-table

Preocupado ... La empresa necesita mostrar 1000 filas de datos.

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

Quizás deberíamos hacer esto incorporado.

algún progreso adicional?

Estoy tratando de crear un TimePicker con una entrada y un menú desplegable, por lo que necesito representar 1440 elementos (24 horas * 60 minutos) en el menú desplegable superpuesto, porque el menú desplegable no funciona con otros componentes.

Pero el rendimiento del menú desplegable con esta cantidad de datos es terrible.

Entonces, mi pregunta es: ¿Qué puedo hacer para usar la ventana de reacción como superposición desplegable?

Me gustaría difundir mi preocupación aquí también. Hemos intentado generar un menú desplegable de selección para una lista con la lista completa de la taxonomía de productos de

Quiero saber si hay una solución ahora.
Quiero usar react-virtualized en Autocompletar, pero no puedo usarlo. Cuando devuelva elcomponente en el método rowRenderer de List, aparece un error.

@jingxiawl Una solución es hacer que el menú desplegable sea un menú desplegable basado en búsquedas. Desde una perspectiva diferente, no es demasiado fácil de usar mostrar una lista larga de elementos para que el usuario también se desplace hacia abajo manualmente, por lo que utilizo estados para administrar la lista de selección desplegable filtrando la frase de búsqueda. Si está utilizando ganchos de React, puede hacer uso de useEffect para minimizar la repetición de componentes.

Espero que esto reduzca el dolor de los renders lentos. Sin embargo, todavía espero que este componente no se ralentice debido a una lista más larga de selecciones.

@yoonwaiyan
Gracias. Pero ahora el problema es que se filtran muchos datos y siempre habrá problemas con las listas largas.

@yoonwaiyan , ¿tienes algún ejemplo de cómo hacer esto?

antd.Table tabla virtual, API es completamente consistente con la tabla original, no es necesario pasar rowHeight
https://github.com/ctq123/ant-virtual-table

@reconbot Este es un ejemplo simple que hice usando React hooks.

Basado en react-window, un componente de formulario completamente funcional
https://github.com/nexxLuo/tablex

@reconbot Este es un ejemplo simple que hice usando React hooks.

Sigue siendo muy lento para mí.

@douglasjunior sí, no está destinado a resolver el problema por completo, sino a una solución temporal para mi código de producción para al menos no brindar una mala experiencia de carga al usuario, pero estoy abierto a sugerencias sobre cómo optimizarlo aún más.

Puede referirse a ant-virtual-table como vinculado en algunos subprocesos anteriores para ver cómo resolvieron este problema para la tabla como afirmaban ser.

por cierto, esta publicación SO tiene algunas soluciones legítimas para problemas de lista larga, espero que el equipo de antd pueda echarle un vistazo: https://stackoverflow.com/questions/38033442/big-list-performance-with-react

Hola equipo de Ant
¿Hay alguna novedad sobre este tema? ¿algún plan para arreglarlo pronto? en realidad, es muy doloroso usar la tabla de lista cuando se tiene una gran cantidad de datos
@ afc163
¡¡¡Gran trabajo por cierto !!!

Hola equipo de Ant
Estoy usando el componente Tree con carga diferida, y tengo alrededor de 20,000 TreeNodes como niños menores en TreeNode . Es muy lento y doloroso navegar por el árbol con una cantidad tan grande de datos. ¿Algo nuevo sobre este tema?

Hola Ant Team,
Primer amor amor y componentes.
Estoy usando el componente Seleccionar y realmente necesito agregar react-window o alguna otra forma de optimizarlo, ya que hay más de 2000 opciones que hacen que el componente sea dolorosamente lento. Por favor, avíseme si tiene alguna actualización al respecto.

¿Podemos usar esto como referencia? Este repositorio tiene un montón de información importante para el componente Table.

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

SuperSelect se basa en antd Select, que admite una lista virtual de decenas de miles de datos, la misma api que antd Select, que funciona bien en mi proyecto.

ahora, SuperSelect pasa a antd-virtual-select

repositorio antd-virtual-select

esto es demo

¡Cosas interesantes @iblq! Hice una pequeña modificación de su demostración para incluir una comparación con la selección de hormigas https://codesandbox.io/s/superselect-8xlwk

Hola Ant Team,
Primer amor amor y componentes.
Estoy usando el componente Seleccionar y realmente necesito agregar react-window o alguna otra forma de optimizarlo, ya que hay más de 2000 opciones que hacen que el componente sea dolorosamente lento. Por favor, avíseme si tiene alguna actualización al respecto.

https://github.com/react-component/select versión alfa ya implementa el desplazamiento virtual.
Solo tienes que esperar a que antd 4.0 lo tenga.

@megawac lmao qué. ¿Seguimos el mismo hilo? ¿Dónde se ofrecía alguien a contratarte?

Supongo que tendré que esperar a 4.0 ⌚️

Sin embargo, la demostración de SuperSelect anterior es bastante sorprendente, ngl. Muy eficiente también. Desafortunadamente, no quiero copiar y pegar más de 300 líneas para obtener un rendimiento Select , especialmente porque estoy usando TypeScript y está en JS. ¡Sigue siendo genial!

Desearía que react-window no estuvieran limitados a listas ...

Otra opción es react-virtualized-select , pero hay dos problemas: 1) No es Ant 😄, 2) Ya no se mantiene, así que si tiene problemas, 🤷‍♂

Para cualquiera que se pregunte, una solución a esto para los datos no desplegables / seleccionados es el componente List con el pagination prop opcional. ¡Funciona de maravilla!

LazySelectInput debería manejar la carga> 2000 sin problemas de renderizado.

El nuevo componente Table también implementa la lista virtual, consulte https://github.com/react-component/table/releases/tag/v7.0.0-alpha.16

@abenhamdine ¿Hay alguna forma en que podamos usar el nuevo componente de tabla para el soporte de virtualización con proyectos de diseño de hormigas existentes?

@abenhamdine ¿Hay alguna forma en que podamos usar el nuevo componente de tabla para el soporte de virtualización con proyectos de diseño de hormigas existentes?

Quizás, pero en mi humilde opinión, es mejor esperar a antd 4.0, el nuevo componente de tabla ya está integrado en la rama de preparación 4.0.

Ayer intenté agregar la versión alfa pero no tuve éxito.

Muy bien, entonces usaré este por ahora.

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

Ha tenido un documento un poco desordenado, también necesitaba arreglar un poco el CSS.

¿Hay alguna manera de que podamos usar el nuevo componente de selección en v3 mientras esperamos el v4? ¿O hay algún componente de selección de terceros que implemente una lista virtualizada y con el mismo estilo antd?

EDITAR.
Estoy usando el componente SuperSelect publicado arriba y funciona perfectamente

cualquier actualización ?

@ shivam-ahuja puede probar Seleccionar componente en antd 4, 4.0.0-rc1 está fuera.
Consulte https://next.ant.design/components/select/#components -select-demo-big-data

¿Se ha trabajado en el filtrado de tablas? Todavía estoy experimentando tiempos de carga prolongados al filtrar grandes conjuntos de datos, como se ve en # 11331. El filtrado es prácticamente inutilizable con una tabla que tiene más de 1k elementos.

El rendimiento de renderizado de listas largas se ha optimizado en v4: https://github.com/ant-design/ant-design/issues/21656