React实现虚拟列表的优秀库介绍

在 React 中,有一些优秀的库可以帮助你实现高效的虚拟列表渲染。以下是几个常用的库:

1. react-window

react-window 是一个轻量级的虚拟列表库,适用于大多数虚拟列表需求。它提供了简单易用的 API 和良好的性能。

安装

npm install react-window

示例代码

import React, { useCallback } from 'react';
import { FixedSizeList as List } from 'react-window';const generateUniqueKey = () => `${new Date().getTime()}-${Math.random().toString(36).substr(2, 9)}`;const DATA_LIST = Array.from({ length: 100000 }, (_, index) => ({key: generateUniqueKey(),slogan: `Item ${index + 1}`,bgColor: `hsl(${Math.random() * 360}, 100%, 75%)`
}));const ITEM_HEIGHT = 35;const Row = ({ index, style }) => (<div style={{ ...style, backgroundColor: DATA_LIST[index].bgColor }}>{DATA_LIST[index].slogan}</div>
);const VirtualListPage = () => (<Listheight={window.innerHeight}itemCount={DATA_LIST.length}itemSize={ITEM_HEIGHT}width={'100%'}>{Row}</List>
);export default VirtualListPage;

2. react-virtualized

react-virtualized 是一个功能强大的虚拟列表库,提供了更多的功能和配置选项,适用于复杂的虚拟列表需求。

安装

npm install react-virtualized

示例代码

import React from 'react';
import { List } from 'react-virtualized';const generateUniqueKey = () => `${new Date().getTime()}-${Math.random().toString(36).substr(2, 9)}`;const DATA_LIST = Array.from({ length: 100000 }, (_, index) => ({key: generateUniqueKey(),slogan: `Item ${index + 1}`,bgColor: `hsl(${Math.random() * 360}, 100%, 75%)`
}));const ITEM_HEIGHT = 35;const rowRenderer = ({ key, index, style }) => (<div key={key} style={{ ...style, backgroundColor: DATA_LIST[index].bgColor }}>{DATA_LIST[index].slogan}</div>
);const VirtualListPage = () => (<Listwidth={window.innerWidth}height={window.innerHeight}rowCount={DATA_LIST.length}rowHeight={ITEM_HEIGHT}rowRenderer={rowRenderer}/>
);export default VirtualListPage;

3. react-virtual

react-virtual 是一个现代的虚拟列表库,提供了简单的 API 和良好的性能。

安装

npm install @tanstack/react-virtual

示例代码

import React from 'react';
import { useVirtual } from '@tanstack/react-virtual';const generateUniqueKey = () => `${new Date().getTime()}-${Math.random().toString(36).substr(2, 9)}`;const DATA_LIST = Array.from({ length: 100000 }, (_, index) => ({key: generateUniqueKey(),slogan: `Item ${index + 1}`,bgColor: `hsl(${Math.random() * 360}, 100%, 75%)`
}));const ITEM_HEIGHT = 35;const VirtualListPage = () => {const parentRef = React.useRef();const rowVirtualizer = useVirtual({size: DATA_LIST.length,parentRef,estimateSize: React.useCallback(() => ITEM_HEIGHT, []),});return (<divref={parentRef}style={{height: '100vh',width: '100%',overflow: 'auto',}}><divstyle={{height: `${rowVirtualizer.totalSize}px`,width: '100%',position: 'relative',}}>{rowVirtualizer.virtualItems.map(virtualRow => (<divkey={virtualRow.index}ref={virtualRow.measureRef}style={{position: 'absolute',top: 0,left: 0,width: '100%',height: `${ITEM_HEIGHT}px`,transform: `translateY(${virtualRow.start}px)`,backgroundColor: DATA_LIST[virtualRow.index].bgColor,}}>{DATA_LIST[virtualRow.index].slogan}</div>))}</div></div>);
};export default VirtualListPage;

4. antd 库:优秀的 React 库,这里不多介绍,详情看官网。

总结

  • react-window:轻量级,适用于大多数虚拟列表需求。
  • react-virtualized:功能强大,适用于复杂的虚拟列表需求。
  • react-virtual:现代化,提供简单的 API 和良好的性能。
  • antd 库:优秀的 React 库,不多介绍。

根据你的具体需求选择合适的库,可以大大简化虚拟列表的实现,并提高性能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/879243.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Rabbitmq中得RPC调用代码详解

文章目录 1.RPC客户端2.RabbitMQ连接信息实体类3.XML工具类 本文档只是为了留档方便以后工作运维&#xff0c;或者给同事分享文档内容比较简陋命令也不是特别全&#xff0c;不适合小白观看&#xff0c;如有不懂可以私信&#xff0c;上班期间都是在得 直接上代码了 1.RPC客户端 …

僵尸网络开发了新的攻击技术和基础设施

臭名昭著的 Quad7 僵尸网络&#xff08;也称为 7777 僵尸网络&#xff09;不断发展其运营&#xff0c;最近的发现表明其目标和攻击方法都发生了重大变化。 根据 Sekoia.io 的最新报告&#xff0c;Quad7 的运营商正在开发新的后门和基础设施&#xff0c;以增强僵尸网络的弹性&a…

【算法】链表相关

【ps】本篇有 5 道 leetcode OJ。 一、算法简介 链表是一种常见的线性数据结构&#xff0c;是一种在物理结构上非连续、非顺序的存储结构&#xff0c;其中的数据元素的逻辑顺序由其中的指针链接次序实现&#xff0c;指针链接的每一个结构体都是一个节点。 链表的结构多种多样&…

linux kernel 6.x 用户态地址空间探究

最近做个项目需要研究用户态虚拟地址划分情况&#xff0c;找到多个app的共有未使用区间。偶然发现6.1.49和6.8的kernel用户态虚拟地址划分似乎有些不一样。下面使用数据进行分析。 大家都知道linux应用空间的地址划分是&#xff1a; stack高地址开始&#xff0c;向下生长。mm…

换脸动漫转真人:ComfyUI无实物Cosplay

在数字艺术领域&#xff0c;将动漫角色转换为真人形象一直是艺术家的追求。现在&#xff0c;ComfyUI推出了无实物Cosplay功能&#xff0c;让你轻松实现换脸动漫转真人&#xff0c;开启你的二次元冒险之旅&#xff01; ComfyUI无实物Cosplay&#xff1a;换脸动漫转真人&#xf…

代码静态分析工具

静态分析工具&#xff08;如 Coverity、Lint&#xff09;&#xff0c;如果代码工程大常用的工具是啥&#xff0c;原理是啥&#xff1f; 常用的静态分析工具&#xff1a; Coverity&#xff1a;一种商用静态分析工具&#xff0c;广泛用于C、C、Java等语言的代码分析。它能够发现…

Elasticsearch 向量数据库本地部署 及操作方法

elasticsearch是个分布式向量数据库&#xff0c;支持多种查找模式。此外还拥有 Metadata、Filtering、Hybrid Search、Delete、Store Documents、Async等能力。本文仅是记录本地测试途中遇到的问题。 一&#xff0c;环境部署 下载软件 首先去官网&#xff0c;选择适合平台下…

黑龙江等保测评:保障数据安全的最佳选择,助力企业无忧发展!

在数字化时代&#xff0c;数据安全已成为企业发展的重中之重。尤其是在黑龙江&#xff0c;随着信息技术的快速发展&#xff0c;数据泄露和网络攻击的风险日益增加。为了帮助企业提升数据安全防护能力&#xff0c;黑龙江等保测评应运而生&#xff0c;成为保障数据安全的有力工具…

Jackson注解屏蔽某些字段读取权限

问题 Java Bean中某些成员变量&#xff0c;不想被前端读取到。 解决 使用Jackson如下注释&#xff1a; JsonProperty(access JsonProperty.Access.WRITE_ONLY) private String password;就可以在Java Bean序列化的时候&#xff0c;不会序列化这个password字段。 总结 Sp…

libwebsockets之日志系统

libwebsockets日志系统也是分等级的&#xff0c;如下: #define LLL_ERR (1 << 0)#define LLL_WARN (1 << 1)#define LLL_NOTICE (1 << 2)#define LLL_INFO (1 << 3)#define LLL_DEBUG (1 << 4)#define LLL_PARSER (1 << 5)#…

git-repo使用

即使用 XML 格式文件&#xff08;manifest 清单文件&#xff09;定义一个项目的多仓库关联&#xff0c;然后用 repo 客户端工具操作多仓库 git repo命令行格式&#xff1a; git repo <子命令> <参数>创建一个空目录&#xff0c;作为工作区。 $ mkdir workspace$ …

在代码平台怎么拉取对应分支的项目,并且创建属于自己的分支

1.找到对应的代码平台比如gitee,gogs 我这里是gogs 这里有一个网址,把他复制下来 2.打开你想放到的idea路径 输入cmd 输入 这是网上找的项目 git clone http://192.168.150.101:10880/tjxt/tianji.git -b lesson-init 这里的git clone是克隆,这里的-b是分隔符,lesson-ini…

论文120:Giga-SSL: Self-supervised learning for gigapixel images (2023, CVPR, 开源)

文章目录 1 要点2 方法2.1 算法设计2.2 设计选择 1 要点 题目&#xff1a;用于千兆像素图像的自监督学习 (Giga-SSL: Self-Supervised Learning for Gigapixel Images) 代码&#xff1a;https://github.com/trislaz/gigassl 研究目的&#xff1a; 现有的WSI分类方法依赖于有…

探索Go语言中的随机数生成、矩阵运算与数独验证

1. Go中的随机数生成 在许多编程任务中&#xff0c;随机数的生成是不可或缺的。Go语言通过 math/rand 包提供了伪随机数生成方式。伪随机数由种子(seed)决定&#xff0c;如果种子相同&#xff0c;生成的数列也会相同。为了确保每次程序运行时产生不同的随机数&#xff0c;我们…

内容传递媒介如何影响广告测量

你有两个广告活动正在进行中。它们同时启动&#xff0c;并且目标受众相同。 以下是你目前看到的结果&#xff1a; 广告活动1&#xff1a; → 0.67%的点击率 (CTR) → 每次点击成本 $1.88 (CPC) 广告活动2&#xff1a; → 3.50%的点击率 (CTR) → 每次点击成本 $0.33 (CP…

【Proteus51单片机仿真】YL-69湿度检测和继电器电机自启动

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于AT89C51单片机&#xff0c;湿度检测模块通过ADC0832数模转换器&#xff0c;将模拟信号转换为数字信号给单片机&#xff0c;然后通过LCD1602显示屏显示出当前的湿度值&#xff0c;并判断当前湿度值是…

laravel 11 区分多模块的token

数据表&#xff1a;用户表&#xff08;users&#xff09;、管理员表&#xff08;admin_user&#xff09;&#xff0c; 配置bootstrap/app.php guards > [web > [driver > session,provider > admin_users,],home > [driver > sanctum,provider > users,]…

CSS 常用元素属性

CSS 属性有很多, 可以参考文档 CSS 参考手册 1. 字体属性 设置字体 多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )如果字体名有空格, 使用引号包裹.建议使用常见字体, 否则兼容性不好. <style>.one {font-family:"Microsoft Ya…

Machine Learning: A Probabilistic Perspective 机器学习:概率视角 PDF免费分享

下载链接在博客最底部&#xff01;&#xff01; 之前需要参考这本书&#xff0c;但是大多数博客都是收费才能下载本书。 在网上找了好久才找到免费的资源&#xff0c;浪费了不少时间&#xff0c;在此分享以节约大家的时间。 链接: https://pan.baidu.com/s/1erFsMcVR0A_xT4fx…

无人机遂行编队飞行中的纯方位无源定位(2022数模国赛B题)

文章目录 论文项目地址 数模国赛前的练手题&#xff0c;实力不够&#xff0c;参考了好多论文才写出来&#xff0c;个人感觉思路应该没什么大问题&#xff0c;供大家参考 论文 项目地址 github&#xff1a;UAVFormationFlight gitee&#xff1a;UAVFormationFlight 项目包含 完…