如何在 JavaScript 中为数百万行创建数据网格？

在大型应用程序中，数据网格是一个至关重要的组件。但是，当数据量变得非常大时，渲染数百万行在浏览器中变得非常困难。在这篇文章中，我们将学习如何在 JavaScript 中为数百万行创建高性能的数据网格。

1. 懒加载

在数据量较大的情况下，将所有数据同时渲染出来会导致性能降低。因此，我们可以使用懒加载技术，只有在需要显示（即进入视口）时才渲染。

我们可以在浏览器中使用 Intersection Observer API，以检测元素是否在视口内。一旦元素在视口内，我们就可以将其添加到 DOM 中。

const options = {
    root: document.querySelector('#grid-container'),
    rootMargin: '0px',
    threshold: 1.0
};

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // 将entry.target添加到 DOM 中
            observer.unobserve(entry.target);
        }
    });
}, options);

const items = document.querySelectorAll('.grid-item');
items.forEach(item => {
    observer.observe(item);
});

2. 虚拟滚动

相较于懒加载，虚拟滚动可以实现更高效的性能。虚拟滚动是一个只渲染需要显示的元素的技术，可以避免浏览器在无限滚动（如基于数据的网格）中渲染大量的不可见元素。

在 JavaScript 中，我们可以使用 React Virtualized 图书馆，它提供了一组虚拟滚动组件。使用 List 组件实现虚拟滚动。

import React, { Component } from 'react';
import { List, AutoSizer } from 'react-virtualized';

class Grid extends Component {
    render() {
        const { items } = this.props;

        return (
            <AutoSizer>
                {({ width, height }) => (
                    <List
                        width={width}
                        height={height}
                        rowHeight={40}
                        rowCount={items.length}
                        rowRenderer={({ key, index, style }) => (
                            <div key={key} style={style}>
                                {items[index].text}
                            </div>
                        )}
                    />
                )}
            </AutoSizer>
        );
    }
}

3. 分页显示

另一种处理大量数据的方式是将数据分页显示。在这种情况下，每个页面只渲染所需的数据，从而实现更快的加载和更好的性能。

在 JavaScript 中，我们可以使用像 Bootstrap 和 Material-UI 这样的 UI 框架，它们提供了一组分页组件。使用这些组件可以轻松地实现分页功能。

import React, { Component } from 'react';
import { Pagination } from 'react-bootstrap';

class Grid extends Component {
    state = {
        currentPage: 1
    };

    onPageChange = page => {
        this.setState({ currentPage: page });
    };

    render() {
        const { items } = this.props;
        const { currentPage } = this.state;

        const startIndex = (currentPage - 1) * PAGE_SIZE;
        const endIndex = startIndex + PAGE_SIZE;
        const displayItems = items.slice(startIndex, endIndex);

        return (
            <>
                {displayItems.map(item => (
                    <div key={item.id}>{item.text}</div>
                ))}

                <Pagination
                    size="sm"
                    activePage={currentPage}
                    itemsCountPerPage={PAGE_SIZE}
                    totalItemsCount={items.length}
                    onPageChange={this.onPageChange}
                />
            </>
        );
    }
}

结论

以上是我们可以在 JavaScript 中为数百万行创建数据网格的三种技术。懒加载、虚拟滚动和分页显示都是有效的技术，可以提高网格的性能和响应性。根据应用程序的需求和数据量，我们可以选择其中一个或多个技术来实现数据网格。