有没有一种方法可以提高在 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 。

文档中有很多示例，请查看List组件。