在 React 中渲染大型数据集的 3 种方法

随着 Web 应用程序变得越来越复杂，我们需要找到有效的方法来优化性能和渲染大型数据集。在 React 应用程序中处理大型数据集时，一次呈现所有数据可能会导致性能不佳和加载时间变慢。

虚拟化是一种通过一次仅呈现数据集的一部分来解决此问题的技术，从而为用户提供更快、更流畅的体验。在本文中，我们将探讨和比较可用于 React 的各种虚拟化列表库的优缺点，包括：

React Virtuoso

React Window

react-infinite-scroller

React Virtuoso
React Virtuoso 是 React 的虚拟化列表库，可以快速高效地渲染大型数据集。它是高度可定制的，我们可以使用它来渲染简单和复杂的数据结构。

React Virtuoso 使用窗口技术，仅渲染屏幕上可见的元素，从而缩短加载时间和提高性能。

下面介绍如何通过两个步骤在您的应用程序中使用 React Virtuoso：

首先，安装 Virtuoso 库：

npm install react-virtuoso
接下来，在应用程序中使用该组件：

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Virtuoso } from 'react-virtuoso'
const App = () => (
  <Virtuoso
    style={ { height: '600px',
    background: '#f8f8f8'
   }}
    totalCount={10000}
    itemContent={index => (
      <div style={ { 
        background: index % 2 === 0 ? '#ffbb00' : '#ffcc33',
        color: '#333',
        padding: '10px',
        fontSize: '16px',
        fontFamily: 'Arial, sans-serif',
        border: '1px solid #ccc',
        borderRadius: '4px',
        margin: '5px 0'
      }}>
        Item {index}
      </div>
    )}
  />
)
export default App;
ReactDOM.render(<App />, document.getElementById('root'))
在上面的代码中，我们从 react-virtuoso 库中导入 Virtuoso 组件。

接下来，我们定义一个名为 返回 App 组件的功能 Virtuoso 组件。

该 Virtuoso 组件包含多个道具：

style ：设置组件的样式，包括其高度和背景颜色

totalCount ：设置列表中的项目总数;在这种情况下，10，000

itemContent ：接收一个 index 参数并返回用于在该索引处呈现项目的 JSX 代码

在这种情况下，该函数呈现一个 div 包含文本“Item”的元素，后跟索引号。该 prop 根据 style 索引是奇数还是偶数来设置 div 元素的背景颜色、字体大小、字体系列、边框、边框半径和边距。

下面是我们代码的结果：

我们也可以将图像添加到列表中：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Virtuoso } from 'react-virtuoso';
const App = () => {
  const [images, setImages] = React.useState([]);
  // Fetch random images from Unsplash on component mount
  React.useEffect(() => {
    const fetchImages = async () => {
      const response = await fetch(
        'https://api.unsplash.com/photos/random?count=100',
        {
          headers: {
            Authorization: 'Client-ID <UNSPLASH ACCESS KEY>',
          },