type
status
date
slug
summary
tags
category
icon
password
虚拟列表的实现和原理
在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。
什么是虚拟列表？
虚拟列表其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染或者部分渲染的技术，从而达到极高的渲染性能。
假设有1万条记录需要同时渲染，我们屏幕的
可见区域的高度为500px,而列表项的高度为50px，则此时我们在屏幕中最多只能看到10个列表项，那么在首次渲染的时候，我们只需加载10条即可。虚拟列表的实现
一、元素固定高度的虚拟列表
在 React 中实现虚拟列表（Virtual List）可以提高大型列表的性能，避免渲染过多的DOM元素。这里是一种常见的实现方法：
- 确定列表的高度：首先确定列表容器的高度，可以通过CSS设置或动态计算得到。
- 计算可见项：根据列表容器的高度和每个列表项的高度，计算出可见的列表项数量。
- 渲染可见项：根据可见项的数量，渲染相应数量的列表项。可以使用
Array.prototype.slice()方法从原始数据中截取需要渲染的部分。
- 动态更新可见项：监听列表容器的滚动事件，在滚动时计算可见项的开始索引和结束索引，并更新渲染的列表项。
下面是一个简单的示例代码：
使用方式：
这样，通过虚拟列表的实现，即使在大型列表中也能保持良好的性能。注意替换
dataList为你自己的数据源，并根据实际情况设置列表项高度和容器高度。- 作者:Piaoyansong
- 链接:https://piaoyansong.top/article/example-19
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。