Javascript 有什么方法可以提高性能渲染1000+；在React中，将数据卡放在单个页面上？

我的目标是从我的道具中获取一组信息，并将其设置为卡片，显示在单个页面上。我不能使用分页。我注意到我显示的信息越多，页面越差。例如，当我渲染1200张关于汽车的卡片时，它严重滞后。然后，当我在这些卡片上添加图片时，我的网页几乎崩溃了

我理解可能页面中有太多的dom元素和数据；我如何在React中修复此问题

我研究过其他库，比如react visualized，其中数据在滚动时呈现，而不是在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);

import React，{Component}来自'React'；
从“redux”导入{bindActionCreators}；
从'react redux'导入{connect}；
从“../../store/landing”导入{actionCreators}；
从“reactstrap”导入{Card}；
类汽车扩展组件{
状态={
cardData:[]，
};
componentDidMount（）{
this.ensureDataFetched（）；
}
ensureDataFetched（）{
this.props.getCardData（）；
}
render（）{
返回(
{this.props.landingData.length==0？空：
this.props.carData.map（（car，cardd）=>{
{car.title}
})
}
);
}
}
导出默认连接(
state=>state.car，
dispatch=>bindActionCreators（actionCreators，dispatch）
)（汽车）；

我不确定您希望如何显示卡，但我非常确定您需要的是虚拟化列表或某种虚拟化结构

你可以用

---

文档中有很多示例，请看一下组件。

毫不奇怪，在每个数据实例上点击DOM会迫使它每次重新流/呈现DOM，并且随着它的扩展会变得更糟。不管有没有维护的即插即用库，您都希望为1ks的结果添加分页