用React实现一个简单的虚拟列表
作者：KiraZz1
虚拟列表是现在比较常用的前端渲染大数据列表的方案，目前也有很多组件库和工具库也都有对应的实现，如vueuse和ahooks的useVirtualList、element-plus的tableV2等。对于初中级前端而言，虚拟列表也是面试的常客了，和面试官聊到性能优化的话题时有时也会涉及到。本文将笔者对虚拟列表的一些认知，以及基于认知给出的实现做下整理。虽说现在网上写虚拟列表的文章非常多质量也非常高了，但对于技术人而言，只有自己进行输出，才能够有更加深刻的理解。
虚拟列表的优势
比如我们现在要渲染一万条数据的列表，如果直接使用循环进行渲染，再加上列表项的dom结构比较复杂的话，渲染压力是很大的。而虚拟列表只渲染出现在可视区域的数据，这大大减少了浏览器的渲染压力。
虚拟列表的原理
这边给出的原理仅针对于最简单的情形，即列表高度和列表项高度都是确定的。记列表高度为listHeight，列表项高度为listItemHeight。
虚拟滚动的实现
在列表容器内使用一个div撑开滚动条，这个div的高度应为listItemHeight * listItemNum，其中listItemNum为数据的总量。这一步是为了模拟渲染出全部数据情形下的滚动条。监听滚动条的事件，我们可以从列表容器的dom对象中获取到对应的scrollTop属性，可以通过这个来计算渲染的起始元素索引以及渲染区域偏移量。
渲染区域的样式
将列表容器设置为position:relative，渲染数据区域容器设置为绝对定位。我们最终希望渲染数据区域出现到可视区域的正确位置，所以在我们操作滚动条时要对渲染区域的偏移量进行计算，在计算过后把渲染区域定位到正确的位置。定位的方式有两种，一种基于top，一种基于transform。后面给出的实现将是基于第二种的。
计算渲染在可视区域的数据以及渲染区域的偏移量
列表可视区域中最大允许展示的列表项数量为Math.ceil(listHeight / listItemHeight)，记为renderDataNum。
当我们操作滚动条时，实时获取当前列表容器的scrollTop，可以计算得出渲染区域中的数据是从第几个开始的，也就是渲染数据的起始位置索引，为Math.floor(scrollTop / itemHeight)，记为renderDataStartIndex。有了renderDataStartIndex和renderDataNum，我们就可以对原始数据进行切片，获取到渲染在可视区域的完整数据。
在这之后，我们需要调整这个区域相对于列表内顶部的偏移量，实际上这个偏移量就是renderDataStartIndex * itemHeight。（比如现在要渲染[0,1,2,3,4,5]，可视区域只能渲染3个元素，当我们滑动使元素2刚好处于列表顶部时，此时的renderDataStartIndex为2，而元素2的前面还有两个元素会占用一定的高度，这个高度就是我们刚才计算的偏移量）
缓冲区的预留
当我们实现完以上几点后，会发现列表在快速滚动时会出现闪动的状况，即滑动过程中底下区域会变空白。这时候我们只需要在可视区域的上下预留相应的缓冲区数据即可。
代码实现
下面是一个比较简单的用React实现的例子，当然可能有bug，不过我这边自测是没啥问题的：
VirtualList/index.tsx：
import React, {
CSSProperties,
useEffect,
useRef,
useState,
useCallback,
} from "react";
import "./index.css";
interface IProps<T extends { key: React.Key }> {
height?: CSSProperties["height"];
width?: CSSProperties["width"];
dataSource: T[];
itemHeight?: number;
cacheNumber?: number;
listItemRender?: (item: T) => React.ReactNode;
}
export const VirtualList: <T extends { key: React.Key }>(
props: IProps<T>
) => React.ReactNode = (props) => {
const {
height = "500px",
dataSource = [],
width = "400px",
itemHeight = 32,
cacheNumber = 10,
listItemRender,
} = props;
/** 虚拟列表外层容器 */
const containerRef = useRef<HTMLDivElement>(null);
/** 真正用于存放虚拟列表项的容器 */
const listItemsContainerRef = useRef<HTMLDivElement>(null);
/** 用于撑开滚动条的容器高度（数据项个数 * 每个数据项高度） */
const [scrollerContainerHeight, setScrollerContainerHeight] =
useState<number>(0);
/** 虚拟列表渲染的真实数据 */
const [renderData, setRenderData] = useState<(typeof dataSource)[number][]>(
[]
);
/** 渲染数据区域偏移量 */
const [renderAreaOffset, setRenderAreaOffset] = useState<number>(0);
/** 监听滚动条变化，触发计算渲染数据以及渲染区域偏移量 */
const handleScroll = useCallback(() => {
/** 渲染元素个数（可视区域可容纳最大元素数量 + 缓冲区元素数量） */
const renderDataNum =
Math.ceil((containerRef.current?.clientHeight || 0) / itemHeight) +
cacheNumber;
/** 渲染元素起始索引 */
let renderDataStartIndex =
Math.floor((containerRef.current?.scrollTop || 0) / itemHeight) -
cacheNumber;
if (renderDataStartIndex < 0) {
renderDataStartIndex = 0;
}
setRenderData(
dataSource.slice(
renderDataStartIndex,
renderDataStartIndex + renderDataNum
)
);
setRenderAreaOffset(renderDataStartIndex * itemHeight);
}, [cacheNumber, dataSource, itemHeight]);
useEffect(() => {
setScrollerContainerHeight(dataSource.length * itemHeight);
handleScroll();
}, [dataSource, handleScroll, itemHeight]);
return (
<div
className="virtual-list-container"
ref={containerRef}
style={{ height, width }}
onScroll={handleScroll}
>
<div style={{ height: `${scrollerContainerHeight}px` }}></div>
<div
className="virtual-list-items-container"
ref={listItemsContainerRef}
style={{
width: "100%",
transform: `translate(0,${renderAreaOffset}px)`,
}}
>
{renderData.map((item) => (
<div style={{ height: `${itemHeight}px` }} key={item.key}>
{listItemRender
? listItemRender(item)
: typeof item === "object"
? JSON.stringify(item)
: (item as string)}
</div>
))}
</div>
</div>
);
};
VirtualList/index.css
.virtual-list-container {
overflow: auto;
position: relative;
}
.virtual-list-items-container {
position: absolute;
top: 0;
overflow: hidden;
}
对应的使用例如下：
import './App.css'
import { VirtualList } from './components/VirtualList'
interface ListItemData {
key: React.Key,
id: string | number
title: string
imgSrc: string
desc: string
}
const ListItem = (item: ListItemData) => {
return (
<div style={{ padding: '5px', width: '100%', boxSizing: 'border-box' }}>
<div
style={{ border: '1px solid #f0f0f0', boxShadow: '0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09)', display: 'flex', alignItems: 'center', columnGap: 10 }}>
<img src={item.imgSrc} style={{ height: 100 }} />
<div style={{ display: 'flex', flexDirection: 'column',rowGap: 10 }}>
<div style={{ fontWeight: 'bold' }}>{item.title}</div>
<div>{item.desc}</div>
</div>
</div>
</div>
)
}
function App() {
return (
<div>
<VirtualList<ListItemData> listItemRender={ListItem} itemHeight={120} dataSource={new Array(200).fill(0).map((_, index) => ({
key: index,
id: index,
title: `标题_${index}`,
imgSrc: 'https://img14.360buyimg.com/n1/jfs/t1/83129/30/18124/355324/626b8c95Ea76bb2d9/b7c73d677df0c57d.jpg',
desc: 'fumofumo'
}))} />
</div>
)
}
export default App
效果图：
写在最后
距离找到工作到现在已经过去了快半年时间，或许是工作很忙，或许是进入了舒适区，学习方面的输出相较于失业那段时间而言几乎没有。时间也过得很快，这一年也快过去了，未来会发生什么谁都不好说，所以还是要戒骄戒躁，继续努力成长。
以上就是用React实现一个简单的虚拟列表的详细内容，更多关于React实现虚拟列表的资料请关注脚本之家其它相关文章！