在 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 = () => (
   (
      
        Item {index}
      

    )}   /> ) export default App; ReactDOM.render(, 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 ',
          },
        }
      );
      const data = await response.json();
      const urls = data.map(item => item.urls.thumb);
      setImages(urls);
    };
    fetchImages();
  }, []);
  return (
     (
        
          
          Item {index}
        

      )}     />   ); }; export default App; ReactDOM.render(, document.getElementById('root'));

您可能会注意到，此代码与我们以前的代码没有太大区别。我们使用 useState 和useEffect钩子定义一个功能组件 App 。然后，我们声明一个调用 images 的状态变量，并使用 Hook  useState 将其初始值设置为空数组。

我们定义了一个调用 fetchImages 的函数，该函数使用 API 向 Unsplash fetch API 发出 GET 请求以检索 100 张随机图像。然后，我们映射响应数据并提取每个图像的 thumb URL，并使用函数 setImages 将 images 状态变量设置为生成的 URL 数组。

接下来，我们使用 Hook 在 useEffect 组件挂载时调用该 fetchImages 函数一次，因为我们只想获取一次图像。像以前一样，我们返回一个 Virtuoso 组件，该组件包含以下 props：

• style：设置为为我们的 Virtuoso 组件创建背景颜色和高度， height 其属性为 和 400px 背景属性 #f8f8f8

• totalCount

• itemContent

这一次，我们从 itemContent 函数返回的 JSX 代码是一个 div 包含元素 img 和一些文本的元素。元素 img  的src属性设置为与当前 index 值对应的图像的 URL，该 URL 使用取模运算符 （ % ） 从 images 状态变量中检索。

Virtuoso 的优点

• Virtuoso在渲染大型数据集方面非常有效

• 它是高度可定制的

• 它提供对动态项目大小的支持

• 好的性能表现

Virtuoso 的缺点

• 有限的文档

• 不支持嵌套列表

React Window

我们要看的下一个库是 React Window，这是一个用于 React 的虚拟化列表库，它使用与 React Virtuoso 相同的窗口技术。

React Window 是 React Virtualized 的更新版本。它还具有高性能，可用于高效渲染大型数据集。React Window 为我们提供了一组 API，我们可以使用它们来自定义列表的行为，使其成为一个灵活而强大的工具。

安装React Window ：

npm install --save react-window

为了演示它是如何工作的，我们将使用 Faker 库来生成大型数据集。Faker 是一个生成虚假数据的库，例如姓名、地址和电话号码。

使用 npm 安装伪造程序库：

npm install faker

然后在代码中实现它：

import React from 'react';
import { FixedSizeList } from 'react-window';
import { faker } from '@faker-js/faker';
const App = () => {
  const data = Array.from({ length: 10000 }).map(() => ({
    name: faker.name.firstName(),
    email: faker.internet.email(),
  }));
  const Row = ({ index, style }) => {
    const isEvenRow = index % 2 === 0;
    const backgroundColor = isEvenRow ? '#F9A03F' : '#FDDB3A';
    const textColor = isEvenRow ? '#FFFFFF' : '#4A4A4A';
    const rowStyle = {
      ...style,
      backgroundColor,
      color: textColor,
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: '0 16px',
    };
    return (
      
        
{data[index].name}
        
{data[index].email}
      

    );   };   return (            {Row}        ); }; export default App;

我们从 react-window 库中导入 FixedSizeList 组件，以及用于生成 faker 用于测试目的的假数据的库。

导入必要的库后，我们定义一个名为的功能组件，该组件 App 创建一个包含 10，000 个对象的数组。每个对象都包含一个 name 和一个email属性;它们的值是使用 faker 库生成的。

接下来，我们定义一个名为 Row 的新功能组件，它接受 index 和 style prop 并呈现每一行数据。它从我们之前定义的 data 数组中检索相应索引的 name 和email 数据，并使用传入 style 的prop将其呈现在 div 元素中。

最后，我们从 react-window 库中返回一个 FixedSizeList 组件，该组件包含以下内容：

• height 和 width 道具，决定列表的大小

• itemSize：用于设置每行的高度

• itemCount：用于设置列表中的项目总数

• 一个呈现每行数据的函数，该函数设置为我们之前定义的 Row 组件

我们可以使用以下 VariableSizedList 组件创建可变大小的列表：

import React from 'react';
import { VariableSizeList } from 'react-window';
import { faker } from '@faker-js/faker';
const App = () => {
  const data = Array.from({ length: 10000 }).map(() => ({
    name: faker.name.firstName(),
    email: faker.internet.email(),
  }));
  const Row = ({ index, style }) => {
    const isEvenRow = index % 2 === 0;
    const backgroundColor = isEvenRow ? '#F9A03F' : '#FDDB3A';
    const textColor = isEvenRow ? '#FFFFFF' : '#4A4A4A';
    const rowStyle = {
      ...style,
      backgroundColor,
      color: textColor,
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: '0 16px',
    };
    return (
      
        
{data[index].name}
        
{data[index].email}
      

    );   };   const getItemSize = index => {     const randomHeight = Math.floor(Math.random() * 100) + 50;     return randomHeight;   };   return (            {Row}        ); }; export default App;

在此示例中，该 getItemSize 函数计算每行 50–150 像素之间的随机高度。您可以调整计算以生成不同的大小范围，甚至可以根据每行中的数据生成不同的大小。

请注意，由于行高变化非常大，滚动性能可能会受到影响，因为列表组件必须在滚动时计算和定位每一行。

React Window的优点

• 高性能

• 定制

• 支持动态项目大小

• 良好的文档

React Window的缺点

• 对嵌套列表的支持有限

• 没有对滚动恢复的内置支持

react-infinite-scroller

react-infinite-scroller 是一个库，允许您以高性能方式呈现大型数据集。该库还使用窗口化或虚拟化技术，其中仅呈现数据的可见部分，其余部分在用户滚动时按需加载。

我们也将使用 Faker 库来生成大型数据集。安装它：

npm install faker

然后安装 react-infinite-scroller ：

npm i react-infinite-scroller

接下来，我们将创建一个名为的组件 UserList ，该组件呈现由Faker库生成的用户列表。

import React, { useState } from "react";
import InfiniteScroll from "react-infinite-scroller";
import { faker } from "@faker-js/faker";
function UserList() {
  const [users, setUsers] = useState([]);
  const loadMore = (page) => {
    const newUsers = [];
    for (let i = 0; i < 20; i++) {
      newUsers.push({
        name: faker.name.findName(),
        email: faker.internet.email(),
        phone: faker.phone.phoneNumber(),
      });
    }
    setUsers([...users, ...newUsers]);
  };
  const rowStyle = {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: "10px",
    backgroundColor: "#f1f1f1",
    borderBottom: "1px solid #ccc",
    fontSize: "16px",
    color: "#333",
  };
  const nameStyle = {
    fontWeight: "bold",
    color: "#38a3a5",
  };
  const emailStyle = {
    fontStyle: "italic",
    color: "#ff7f50",
  };
  const phoneStyle = {
    color: "#6a5acd",
  };
  return (
    Loading ...