Есть ли способ повысить производительность рендеринга 1000+ карт данных на одной странице в React?

Question

Моя цель - взять кучу информации из моего реквизита и поместить ее в карточки для отображения на одной странице. Я не могу использовать нумерацию страниц. Я заметил, что чем больше информации я показываю, тем хуже становится страница. Например, когда я раздаю 1200 карт об автомобилях, это сильно отстает. Затем, когда я добавляю картинки к этим карточкам, моя веб-страница в значительной степени падает.

Я понимаю, что на странице слишком много элементов dom и данных;Как я могу исправить это в React?

Я смотрел на другие библиотеки, такие как реагирующая визуализация, где данные отображаются при прокрутке, а не все сразу на DOM. Некоторые из них не поспевают, и я подумал спросить, прежде чем идти по этому пути.

    import React, { Component } from 'react';
    import { bindActionCreators } from 'redux';
    import { connect } from 'react-redux';
    import { actionCreators } from '../../store/landing';
    import { Card } from 'reactstrap';

    class Car extends Component {
        state = {
            cardData: [],
        };

        componentDidMount() {
            this.ensureDataFetched();
        }

        ensureDataFetched() {
            this.props.getCardData();
        }

        render() {
            return (
                    <div>                                
                       {this.props.landingData.length === 0 ? null :
                           this.props.carData.map((car, cardId) => {
                                    <Card key={carId}>{car.title}</Card>
                             })
                       }
                     </div>                       
            );
        }
    }

    export default connect(
        state => state.car,
        dispatch => bindActionCreators(actionCreators, dispatch)
    )(Car);

Answer 1

Я не уверен, как вы хотите отобразить карты, но я уверен, что вам нужен виртуализированный список или какая-то виртуализированная структура.

Вы можете использовать react-virtualized.

Есть много примеров в документах, взгляните на компонент List.