react-virtualized实现行元素不等高的虚拟列表滚动

前言:

        当一个页面中需要接受接口返回的全部数据进行页面渲染时间,如果数据量比较庞大,前端在渲染dom的过程中需要花费时间,造成页面经常出现卡顿现象。

        需求:通过虚拟加载,优化页面渲染速度

        优点:不需要固定行元素高度一致

行元素等高的虚拟列表实现方法
实现方法

npm 安装 react-virtualized

npm install react-virtualized --save

页面引入

import { List as VirtualizedList, AutoSizer, CellMeasurer, CellMeasurerCache } from 'react-virtualized';

Cp.jsx

import React, { Component } from 'react';
import { List as VirtualizedList, AutoSizer, CellMeasurer, CellMeasurerCache } from 'react-virtualized';class Cp extends Component {constructor(props) {super(props);this.cache = new CellMeasurerCache({fixedWidth: true, defaultHeight: 100 // 未计算的单元格初始默认的高度});this.state = {viewWidth: 200,viewHeight: 500,dataList: [{id: 1, content1: '小灰灰学编程小灰灰学编程小灰灰学编程', content2: '小灰灰学编程小灰灰学编程小灰灰学编程小灰灰学编程'},{id: 2, content1: '小灰灰学编程', content2: '小灰灰学编程小灰灰学编程小灰灰学编程小灰灰学编程'},{id: 3, content1: '小灰灰学编程小灰灰学编程', content2: ''},{id: 4, content1: '小灰灰学编程小灰灰学编程小灰灰学编程小灰灰学编程', content2: '小灰灰学编程'},{id: 5, content1: '小灰灰学编程', content2: ''},{id: 6, content1: '小灰灰学编程小灰灰学编程', content2: '小灰灰学编程'},{id: 7, content1: '小灰灰学编程小灰灰学编程小灰灰学编程', content2: '小灰灰学编程'},{id: 8, content1: '小灰灰学编程小灰灰学编程小灰灰学编程小灰灰学编程小灰灰学编程小灰灰学编程小灰灰学编程', content2: '小灰灰学编程小灰灰学编程小灰灰学编程小灰灰学编程小灰灰学编程小灰灰学编程'},{id: 9, content1: '小灰灰学编程小灰灰学编程', content2: ''},{id: 10, content1: '小灰灰学编程', content2: '小灰灰学编程'},{id: 7, content1: '小灰灰学编程', content2: '小灰灰学编程小小灰灰学编程小灰灰学编程小灰灰学编程灰小灰灰学编程灰学编程'},{id: 8, content1: '小灰灰学编程', content2: '小灰灰学编程小小灰灰学编程灰灰学编程'},{id: 9, content1: '小灰灰学编程小灰灰学编程', content2: ''},{id: 10, content1: '小灰灰学编程', content2: '小灰灰学编程'},]}}componentDidUpdate() {// 重置所有单元格的计算缓存this.cache.clearAll();}/*** rowRenderer 渲染行元素的方法*    index: 索引*    key: 记录在数组中的位置*    parent: 定义该列表是另一个列表的父列表还是子列表*    style: 用于定位行的样式对象*    isVisible: 确定行是否可见或不可见*    isScrolling: 指示组件中是否发生滚动 List* * CellMeasurer 自动计算单元格内容的高阶组件*    cache: 在CellMeasure和他们父级的Grid之间共享的缓存*    children: 子元素 可以是一个react元素或者函数*    columnIndex: 经计算的列index | 0*    parent: 父级Grid的引用*    rowIndex: 经计算的行index*/rowRenderer = ({ index, key, parent, style }) =>{const {dataList} = this.stateconst itemData = dataList[index];return (<div key={key} style={style}><CellMeasurercache={this.cache}columnIndex={0}key={key}rowIndex={index}parent={parent}><div><div>{`第${itemData.id}个元素`}</div><div>content1: {itemData.content1}</div><div>{itemData.content2}</div></div></CellMeasurer></div>);}render() {const {dataList} = this.statereturn (<div className="virtualized-list"><AutoSizer>{({ viewWidth, viewHeight }) => (/*** VirtualizedList*    width: 可视区域宽度*    height: 可视区域高度*    rowHeight: 行高度*    rowCount: 列表长度*    dataList: 列表数据*    rowRenderer: 渲染行元素的方法*    overscanRowCount: 用于沿用户滚动的方向呈现附加行*    deferredMeasurementCache: 用于临时呈现数据,缓存计算数据*/<VirtualizedListwidth={this.state.viewWidth}height={this.state.viewHeight}rowHeight={this.cache.rowHeight}rowCount={dataList.length}rowRenderer={this.rowRenderer}deferredMeasurementCache={this.cache}dataList={dataList}overscanRowCount={1}/>)} </AutoSizer></div>);}
}export default Cp;

 效果

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

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

相关文章

Codeforces Round 651 (Div. 2)C. Number Game 博弈 奇偶数 偶数的表示

Submission #244500083 - Codeforces 题目&#xff1a; 思路&#xff1a; 此题要从奇偶性上入手。&#xff08;注意除的是奇因数&#xff0c;即一个奇数。我想成质数了&#xff09; 1.当A选手开局是1时&#xff0c;A败。 2.当A选手开局是2和奇数时&#xff0c;A必胜。&…

vue2 el-table新增行内删除行内(两种写法)里面第一个是树组件,第二个是数字组件,第一个数组件只能勾选最后一个节点

第一种 <template><div class"time_table"><div style"margin-bottom: 10px"><el-button click"addRowFn">新增</el-button></div><el-form ref"costForm" :model"formData">&l…

备战蓝桥杯---搜索(剪枝)

何为剪枝&#xff0c;就是减少搜索树的大小。 它有什么作用呢&#xff1f; 1.改变搜索顺序。 2.最优化剪枝。 3.可行性剪枝。 首先&#xff0c;单纯的广搜是无法实现的&#xff0c;因为它存在来回跳的情况来拖时间。 于是我们可以用DFS&#xff0c;那我们如何剪枝呢&#…

Http请求Cookie失效问题

Http请求Cookie失效问题记录 一、问题现象 在开发功能的过程中&#xff0c;业务依赖cookie进行取之&#xff0c;项目进行交互时会对前端http请求携带的cookies进行解析操作&#xff0c;但在自测调试对过程中出现账户的授权失效的报错问题。 二、问题排查 用arthas进行代码方…

3d网上虚拟现实展厅让汽车零部件厂商脱颖而出

在这个信息爆炸的时代&#xff0c;如何让自己的产品在众多竞争者中脱颖而出?让我们为您揭示一个秘密武器——汽车线上3D云展示软件。 想象一下&#xff0c;一辆外观炫酷、性能卓越的红色汽车&#xff0c;通过这款3D云展示软件&#xff0c;呈现在潜在客户的眼前。那流线型的车身…

Failed at the chromedriver@2.27.2 install script.

目录 【错误描述】Failed at the chromedriver2.27.2 install script. npm install报的错误 【解决方法】 删除node_modules文件夹npm install chromedriver --chromedriver_cdnurlhttp://cdn.npm.taobao.org/dist/chromedrivernpm install 【未解决】 下载该zip包运行这个&…

【npm】安装全局包,使用时提示:不是内部或外部命令,也不是可运行的程序或批处理文件

问题 如图&#xff0c;明明安装Vue是全局包&#xff0c;但是使用时却提示&#xff1a; 解决办法 使用以下命令任意一种命令查看全局包的配置路径 npm root -g 然后将此路径&#xff08;不包括node_modules&#xff09;添加到环境变量中去&#xff0c;这里注意&#xff0c;原…

前端框架学习 Vue(3)vue生命周期,钩子函数,工程化开发脚手架CLI,组件化开发,组件分类

Vue 生命周期 和生命周期的四个阶段 Vue生命周期:一个Vue实例从创建 到 销毁 的整个过程 生命周期四个阶段 :(1)创建 (2)挂载 (3)更新 (4)销毁 Vue生命周期函数(钩子函数) Vue生命周期过程中,会自动运行一些函数,被称为[生命周期钩子] ->让开发者可以在[特定阶段] 运行自…

【云原生kubernetes系列】---亲和与反亲和

1、亲和和反亲和 node的亲和性和反亲和性pod的亲和性和反亲和性 1.1node的亲和和反亲和 1.1.1ndoeSelector&#xff08;node标签亲和&#xff09; #查看node的标签 rootk8s-master1:~# kubectl get nodes --show-labels #给node节点添加标签 rootk8s-master1:~# kubectl la…

用GOGS搭建GIT服务器

GOGS官网 Gogs: A painless self-hosted Git service 进入文件所在目录 cd /usr/local/develop 解压文件 tar -xvf gogs_0.13.0_linux_amd64.tar.gz 解压之后 进入gogs 目录 cd gogs 创建几个目录 userdata 存放用户数据 log文件存放进程日志 repositories 仓库根目…

19113133262(微信同号)【主题广范|见刊快】2024年新材料与应用化学国际学术会议(ICNMAC 2024)

【主题广范|见刊快】2024年新材料与应用化学国际学术会议(ICNMAC 2024) 2024 International Conference New Materials and Applied Chemistry(ICNMAC 2024) 一、【会议简介】 会议背景&#xff1a;随着科技的飞速发展&#xff0c;新材料与应用化学领域的研究成果日益丰富。为…

MySQL进阶45讲【12】为什么你的MySQL偶尔会卡一下

1 前言 平时的工作中&#xff0c;不知道大家有没有遇到过这样的场景&#xff0c;一条SQL语句&#xff0c;正常执行的时候特别快&#xff0c;但是有时也不知道怎么回事&#xff0c;它就会变得特别慢&#xff0c;并且这样的场景很难复现&#xff0c;它不只随机&#xff0c;而且持…

事件驱动架构:使用Flask实现MinIO事件通知Webhooks

MinIO的事件通知可能一开始看起来并不激动人心&#xff0c;但一旦掌握了它们的力量&#xff0c;它们就能照亮您存储桶内的动态。事件通知是一个全面、高效的对象存储系统中的关键组件。Webhooks是我个人最喜欢的工具&#xff0c;用于与MinIO集成。它们在事件的世界中就像一把瑞…

基于NSGA-II的深度迁移学习

深度迁移学习 迁移学习是一种机器学习技术&#xff0c;它允许一个预训练的模型被用作起点&#xff0c;在此基础上进行微调以适应新的任务或数据。其核心思想是利用从一个任务中学到的知识来帮助解决另一个相关的任务&#xff0c;即使这两个任务的数据分布不完全相同。这种方法…

靶机实战bwapp亲测xxe漏洞攻击及自动化XXE注射工具分析利用

靶机实战bwapp亲测xxe漏洞攻击及自动化XXE注射工具分析利用。 1|0介绍 xxe漏洞主要针对webservice危险的引用的外部实体并且未对外部实体进行敏感字符的过滤,从而可以造成命令执行,目录遍历等.首先存在漏洞的web服务一定是存在xml传输数据的,可以在http头的content-type中查…

sql求解连续两个以上的空座位

Q&#xff1a;查找电影院所有连续可用的座位。 返回按 seat_id 升序排序 的结果表。 测试用例的生成使得两个以上的座位连续可用。 结果表格式如下所示。 A:我们首先找出所有的空座位&#xff1a;1&#xff0c;3&#xff0c;4&#xff0c;5 按照seat_id排序&#xff08;上面已…

前端小案例——动态导航栏文字(HTML + CSS, 附源码)

一、前言 实现功能: 这案例是一个具有动态效果的导航栏。导航栏的样式设置了一个灰色的背景&#xff0c;并使用flex布局在水平方向上平均分配了四个选项。每个选项都是一个li元素&#xff0c;包含一个文本和一个横向的下划线。 当鼠标悬停在选项上时&#xff0c;选项的文本颜色…

IntelliJ IDEA - 5 个相见恨晚的 IDEA 使用技巧,能让你的代码飞起来!

日常开发中&#xff0c;相信广大 Java 开发者都使用过 IntelliJ IDEA 作为开发工具&#xff0c;IntelliJ IDEA 是一款优秀的 Java 集成开发环境&#xff0c;它提供了许多强大的功能和快捷键&#xff0c;可以帮助开发者提高编码效率和质量。除了一些常见的技巧&#xff0c;如自动…

LLM - Qwen-72B LoRA 训练与推理实战

目录 一.引言 二.模型简介 1.Qwen-Model 总览 2.Qwen-Chat-72B - PreTrain - Tokenizer - Base Line - SFT / RLHF 3.Qwen-72 模型架构 - Config.json - c_attn/c_proj - Attention Forward - ROPE - Qwen MLP - Qwen Block 三.QLoRA 与 Infer 实战 1.SFT 指…

神经网络激活函数到底是什么?

激活函数 其实不是很难啦&#xff0c;归结一下就是大概这样几个分类&#xff0c;详情请参考【神经网络】大白话直观理解&#xff01;_哔哩哔哩_bilibili神经网络就是干这个事的~ 如果队伍不长&#xff0c;一个ykxb就可以了&#xff0c;如果 如果 队伍太长 就加一个激活函数也…