<div className="listCheckbox"> {objects.map((e) => { return ( <div key={e.value}> <FormControlLabel control={<Checkbox />} label={e.label} /> </div> ); })} </div> //css---------------------------------------------------------------------------------- .listCheckbox { max-height: 350px; overflow-y: scroll; }aquí los objetos son un estado de tipo matriz y contienen más de 250 registros. ¿Cómo puedo representar esto de manera más eficiente con el mismo estilo?
Puede usar la paginación y limitar los registros en lugar de mostrarlo todo. Y cuando intente renderizar más, simplemente puede agregarlo al previous state . De esta manera, no perderá sus previous fetched records y estará más optimizado.
Aquí hay algunas formas de cargar una gran lista de datos:
Nota: He mencionado algunas bibliotecas npm entre paréntesis para simplificar, pero estas funcionalidades también se pueden implementar automáticamente.
Consulte también este blog para obtener más opciones y explicaciones.
En caso de que no esté interesado en paginar, debe usar una lista virtual.
Puede usar react-virtualized o intentar construir uno desde cero