css3偶数选择器-在 React 中渲染小数据集的 3 种方法

bendan520 2023年8月29日 css3 0

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

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

反应大师

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

React Virtuoso 使用窗口仅渲染屏幕上可见的元素，从而减少加载时间并提高性能。

以下是如何在应用程序中通过两个步骤使用 React Virtuoso：

首先，安装 Virtuoso 库：

复制代码npm install react-virtuoso

接下来，在您的应用程序中使用该组件：

javascript复制代码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组件。

接下来，我们定义一个称为 Return App 组件的功能 Virtuoso 组件。

Virtuoso 组件包含几个 props：

在这些情况下，该函数呈现一个 div 元素，其中包含文本“Item”，后跟索引号。该属性根据样式索引是素数还是奇数来设置 div 元素的背景颜色、字体大小、字体系列、边框、边框直径和行距。

这是我们代码的结果：

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

php复制代码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 张随机图像。然后，我们映射响应数据并提取每个图像的缩略图 URL，并使用函数 setImages 将图像状态变量设置为结果 URL 数组。

接下来，我们使用 Hook 在 useEffect 组件挂载时调用一次 fetchImages 函数，因为我们只想获取一次图像。和以前一样，我们返回一个带有以下属性的 Virtuoso 组件：

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

Virtuoso 优点 Virtuoso 缺点 React 窗口

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

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

安装 React Windows：

css复制代码npm install --save react-window

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

使用 npm 安装 forge 库：

复制代码npm install faker

然后用代码实现：

javascript复制代码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组件，该库用于生成用于测试目的的假数据。

导入必要的库后，我们定义一个名为 App 的功能组件，它创建一个包含 10,000 个对象的字段。每个对象包含一个名称和一个电子邮件属性；它们的值是使用 faker 库生成的。

接下来，我们定义一个名为 Row 的新功能组件，它接受索引和样式属性并渲染每行数据。它从我们之前定义的数据数组中检索相应索引的姓名和电子邮件数据，并使用传入的 style 属性将其呈现在 div 元素中。

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

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

javascript复制代码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 是一个库，允许您以高性能形式渲染小型数据集。该库还使用窗口或虚拟化技术，其中仅呈现数据的可见部分css3偶数选择器，其余部分在用户滚动时按需加载。

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

复制代码npm install faker

然后安装react-infinite-scroller：

css复制代码npm i react-infinite-scroller

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

ini复制代码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 (
    <InfiniteScroll
      pageStart={0}
      loadMore={loadMore}
      hasMore={true}
      loader={Loading ...}
    >
      
        {users.map((user, index) => (
          
            {user.name}
            {user.email}
            {user.phone}
          
        ))}
      
    
  );
}
export default UserList;

让我们来分解一下。在 UserList 组件中，我们使用 useState Hook 来管理 users 数组的状态。 loadMore 函数生成 20 个新用户并将它们附加到现有用户数组中。

当组件安装时，将渲染 InfiniteScroll 组件。 pageStart prop 指示将从中加载数据的页面的页脚。

loadMore 属性是一个回调函数，当用户滚动到列表末尾时调用。它接收页脚作为参数，可用于从服务器加载数据。在我们的例子中，我们使用 Faker 库来生成假数据。

hasMore 属性指示是否有更多数据要加载。在我们的例子中，我们希望将其设置为 true，因为我们希望无义务加载更多数据。 loader 属性是一个 React 元素，在加载数据时呈现。我们添加了一个简单的加载器来显示加载消息。

最后，我们使用方法map来渲染用户列表。每个用户都呈现在 li 元素中，并显示每个用户的姓名、电子邮件和电话号码。

对于样式，我们使用 JavaScript 对象定义多种样式，并使用 style 属性将它们应用到相应的元素。 rowStyle 对象应用浅灰色背景色、深灰色边框和黑色文本颜色，而 nameStyle 、 emailStyle 和对象分别为姓名、电子邮件和电话号码数组定义不同的文本颜色和phoneStyle 样式。

使用react-infinite-scroller的优点使用react-infinite-scroller的缺点功能集对照表

功能/工具

反应大师

反应窗口

反应无限滚动

表现

非常好

好的

蜜蜂

富有的

有限的

虚拟化支持

是的

SSR渲染支持

是的

不

风俗

有限的

好的

有限的

便于使用

简单的

供开发人员使用的外部功能

提供分页和无限加载功能。开发人员社区已经实现了开发人员工具 GUI，其中包含 Chrome 和 Firefox 的扩展。支持将缓存持久化到外部存储位置（即本地存储）。

提供分页和无限加载功能。它配备了支持缓存操作的官方开发人员工具 GUI。支持将缓存持久化到外部存储位置（即本地存储）。

不适用

反应悬念

支持

不适用

官方支持其他后端库

不，可以使用类似的社区库：sswr

正在进行中，类似的社区库可用：vue-query

不适用

总结

高效渲染小型数据集是 Web 开发的一个关键方面。虚拟化是一项使开发人员能够高效渲染小型数据集并提高 Web 应用程序性能的技术。

在本文中，我们描述了可用于 React 的各种虚拟化列表库css3偶数选择器，包括 React Virtuoso、React Window 和 React-infinite-scroll。每个库都有其优点和缺点，库的选择取决于具体的用例。通过使用这些虚拟化列表库，您可以显着提高 React 应用程序的性能并提供更流畅的用户体验。

新的一年，看更多优秀工具

太空电梯、MOSS、ChatGPT等都表明2023年注定是不平凡的一年。任何新技术都值得审视，我们应该有这些敏感度。

这几年隐隐约约遇到了高码，现在也比较流行，很多大厂也纷纷加入。

低代码平台理念：通过手动代码生成和可视化编程，只需要少量代码即可快速构建各种应用程序。

什么是低代码，在我看来，就是拖拖拉拉，呼呼呼呼，一次操作，创建一个可以运行的系统，前端、后端、数据库，一气呵成。当然，这可能是最终目标。

链接：，如果您有兴趣，可以免费试用。

JNPF的优点是可以生成前端和后端代码，提供了很大的灵活性，可以创建更复杂和定制的应用程序。其架构设计也让开发者可以专注于应用逻辑和用户体验的开发，而不必担心底层的技术细节。

有了它，开发人员可以在开发过程中轻松上手，并充分利用传统开发模式中积累的经验。因此，低代码平台对于程序员来说有很大的帮助。

css3偶数选择器-在 React 中渲染小数据集的 3 种方法

发表评论

发表回复取消回复

相关文章

发表评论

发表回复 取消回复

发表回复取消回复