有没有一种方法可以提高在React中将1000多张数据卡渲染到单个页面上的性能？

Question

我的目标是从道具中获取一堆信息，并将其设置为卡片，以显示在单个页面上。我不能使用分页。我注意到，显示的信息越多，页面显示的效果越差。例如，当我渲染有关汽车的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);

Answer 1

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

您可以使用react-virtualized。

文档中有很多示例，请看react-virtualized组件。