FixedSizeList: renderización de miles de elementos

Puede añadir react-window a un proyecto mediante el gestor de paquetes; por ejemplo, instalando el paquete react-window. Es pequeño y no tiene dependencias pesadas.

Una vez instalado, importe los componentes de lista que necesite, normalmente FixedSizeList para las filas que tienen todas la misma altura.

FixedSizeList necesita varias props para funcionar: height y width definen el contenedor con desplazamiento, itemCount indica cuántos elementos existen e itemSize indica la altura de cada fila en píxeles.

La prop children es una función de renderizado que dibuja una sola fila. Con estos valores, el componente conoce la geometría que necesita para aplicar correctamente el windowing.

La función de renderizado children recibe un objeto con index y style. index indica qué elemento se debe renderizar, lo que le permite buscar los datos correctos, y style coloca la fila dentro de la lista virtual.

Devuelve el JSX de esa única fila, y react-window llama a esta función solo para las filas que se encuentran actualmente en la ventana.

La prop style es esencial y debe aplicarse al elemento de la fila. react-window coloca cada fila mediante posicionamiento absoluto y utiliza top para situarla en el desplazamiento correcto dentro de un contenedor alto con desplazamiento.

Si no aplica style, todas las filas se apilarán en la misma posición y la virtualización se colapsará visualmente.

El error más común al utilizar react-window es omitir la prop style en la fila. La lista parecerá estar rota: las filas se superpondrán en la parte superior y el desplazamiento no funcionará correctamente.

Extienda siempre el objeto style proporcionado o asígnelo al elemento más externo de la fila para mantener el posicionamiento correcto.

En lugar de cerrar sobre el array dentro de la función de renderizado, puede pasarlo mediante la prop itemData. react-window lo reenvía a la fila como un campo data junto con index y style.

Esto mantiene desacoplado el componente de la fila y puede ayudar con la memorización, ya que la fila recibe sus datos de forma explícita.

FixedSizeList admite listas horizontales mediante la prop layout establecida en horizontal, o mediante las opciones de direction, según la versión. En ese caso, itemSize representa la anchura en lugar de la altura.

Esto resulta práctico para carruseles o líneas de tiempo con desplazamiento horizontal que también contienen muchos elementos.

La prop overscanCount renderiza algunas filas adicionales justo fuera de la ventana visible. Este búfer reduce la posibilidad de que aparezca un espacio vacío durante un desplazamiento rápido, antes de que se monten las filas nuevas.

Un overscan pequeño hace que la experiencia sea más fluida, mientras que uno grande desperdicia la ventaja al montar demasiadas filas fuera de la pantalla.

FixedSizeList necesita dimensiones explícitas en píxeles, lo que resulta incómodo en diseños adaptables. El componente complementario AutoSizer mide su elemento padre y proporciona width y height a la lista mediante una render prop.

Al envolver la lista en AutoSizer, puede hacer que ocupe un contenedor flexible sin fijar manualmente sus dimensiones, adaptándose a medida que cambia el diseño.

Una FixedSizeList funcional establece height, width, itemCount e itemSize, y renderiza las filas mediante una función children que aplica la prop style. De forma opcional, AutoSizer le proporciona las dimensiones y overscanCount añade un búfer.

Con esto, una lista de cualquier longitud mantiene montadas únicamente las filas visibles mientras el desplazamiento sigue siendo fluido.

Recuerde qué información debe recibir FixedSizeList para renderizar las filas correctamente.

FixedSizeList renderiza filas de igual altura mediante height, width, itemCount, itemSize y una función de renderizado children que recibe index y style. Aplicar la prop style es obligatorio; de lo contrario, las filas se superponen.

Pase datos mediante itemData, admita el diseño horizontal, añada un pequeño búfer con overscanCount y utilice AutoSizer para llenar contenedores adaptables sin fijar manualmente las dimensiones.