大家好，我是前端西瓜哥。这次我们来看看虚拟列表是什么玩意，并用 React 来实现两种虚拟列表组件。
虚拟列表，其实就是将一个原本需要全部列表项的渲染的长列表，改为只渲染可视区域内的列表项，但滚动效果还是要和渲染所有列表项的长列表一样。
虚拟列表解决的长列表渲染大量节点导致的性能问题：
一次性渲染大量节点，会占用大量 GP 资源，导致卡顿； 即使渲染好了，大量的节点也持续占用内存。列表项下的节点越多，就越耗费性能。虚拟列表的实现分两种，一种是列表项高度固定的情况，另一种是列表项高度动态的情况。
列表项高度固定
列表项高度固定的情况会简单很多，因为我们可以在渲染前就能知道任何一个列表项的位置。
因为涉及到的变量很多，实现起来还是有点繁琐。
我们需要的必要信息有：
容器高度（即可视区域高度） containerHeight 列表长度（即列表项总数） itemCount 列表项尺寸 itemHeight 滚动位置 scrollTop虚拟列表通常来说是垂直方向的，但偶尔也有水平方向的场景，所以如果你要实现一个广泛适用的组件，理论上应该用 size 而不是 height，前者语义更好。
但为了减少用户的思维转换导致的负担，本文会使用 height 来表示一个列表项的高度。
要让表单项渲染在正确位置，我们有几种方案：
在容器的第一个元素用一个空元素，设置一个高度，将需要显示在可视区域的 items 往下推到正确位置。我尝试着实现了，发现滚动快一点就会有闪屏现象。 将需要渲染的元素一个 div 包裹起来，对这个 div 应用 transform: translate3d(0px, 1000px, 0px); 对每个列表项使用绝对定位（或 transform）这里我们选择第一个方案来进行实现。
代码实现
这里我先给出代码实现。
我们实现了一个 FixedSizeList 的 React 组件。
它接收一个上面提到的几个数量和高度参数外，还接收一个列表项组件。
我们会将计算出来的高度做成 style 对象以及一个索引值 index传入到这个组件里进行实例化。所以记得在列表项组件内接收它们并使用上它们，尤其是 style。
/**
?*?一个将?items?往下推到正确位置的空元素
?*/
import?{?useState?}?from?'react';
import?{?flushSync?}?from?'react-dom';
function?FixedSizeList({?containerHeight,?itemHeight,?itemCount,?children?})?{
??//?children?语义不好，赋值给?Component
??const?Component?=?children;
??const?contentHeight?=?itemHeight?*?itemCount;?//?内容总高度
??const?[scrollTop,?setScrollTop]?=?useState(0);?//?滚动位置
??//?继续需要渲染的?item?索引有哪些
??let?startIdx?=?Math.floor(scrollTop?/?itemHeight);
??let?endIdx?=?Math.floor((scrollTop?+?containerHeight)?/?itemHeight);
??//?上下额外多渲染几个?item，解决滚动时来不及加载元素出现短暂的空白区域的问题
??const?paddingCount?=?2;
??startIdx?=?Math.max(startIdx?-?paddingCount,?0);?//?处理越界情况
??endIdx?=?Math.min(endIdx?+?paddingCount,?itemCount?-?1);
??const?top?=?itemHeight?*?startIdx;?//?第一个渲染的?item?到顶部距离
??//?需要渲染的?items
??const?items?=?[];
??for?(let?i?=?startIdx;?i?<=?endIdx;?i++)?{
????items.push(<Component?key={i}?index={i}?style={{?height:?itemHeight?}}?/>);
??}
??return?(
????<div
??????style={{?height:?containerHeight,?overflow:?'auto'?}}
??????onScroll={(e)?=>?{
????????//?处理渲染异步导致的空白现象
????????//?改为同步更新，但可能会有性能问题，可以做?节流?+?RAF?优化
????????flushSync(()?=>?{
??????????setScrollTop(e.target.scrollTop);
????????});
??????}}
????>
??????<div?style={{?height:?contentHeight?}}>
????????{/*?一个将?items?往下推到正确位置的空元素?*/}
????????<div?style={{?height:?top?}}></div>
????????{items}
??????</div>
????</div>
??);
}
线上 demo：
https://codesandbox.io/s/jhe2rt
效果：
首先我们需要知道 渲染的节点的索引值范围 。
//?计算需要渲染的?item?范围 let?startIdx?=?Math.floor(scrollTop?/?itemHeight); let?endIdx?=?Math.floor((scrollTop?+?containerHeight)?/?itemHeight);
首先算第一个 item 的位置 startIdx。
我们用 scrollTop 除以列表项高度 itemHeight，我们就知道 scrollTop 经过了多个 item，将得到的结果向下取整就是可视区域中的第一个 item。最后一个索引值 endidx 计算同理。
有时候我们希望上下方向再多渲染几个 item（缓解在做节流时没有立即渲染导致的空白现象），我们可以让范围往两边扩展一些，注意不要越界。
//?扩展范围 const?paddingCount?=?2; startIdx?=?Math.max(startIdx?-?paddingCount,?0);?//?处理越界情况 endIdx?=?Math.min(endIdx?+?paddingCount,?itemCount?-?1);
然后基于这个范围，对列表项组件进行实例化。
//?需要渲染的?items
const?items?=?[];
for?(let?i?=?startIdx;?i?<=?endIdx;?i++)?{
??items.push(<Component?key={i}?index={i}?style={{?height:?itemHeight?}}?/>);
}
然后是 DOM 结构的说明 。
<div
??style={{?height:?containerHeight,?overflow:?'auto'?}}
??onScroll={(e)?=>?{
????//?处理渲染异步导致的空白现象
????//?改为同步更新，但可能会有性能问题，可以做?节流?+?RAF?优化
????flushSync(()?=>?{
??????setScrollTop(e.target.scrollTop);
????});
??}}
>
??<div?style={{?height:?contentHeight?}}>
????{/*?一个将?items?往下推到正确位置的空元素?*/}
????<div?style={{?height:?top?}}></div>
????{items}
??</div>
</div>
最外层是[容器 div]，我们给它的高度设置传入的 containerHeight。
接着是[内容 div]。contentHeight 由 itemHeight 乘以 itemCount 计算而来，代表的是所有 item 组成的高度。我们把它放着这里，是为了让 [容器 div] 产生正确的滚动条 。
内容 div 下是我们的 items，以及开头的 一个将 items 往下推到正确位置的空元素 ，可以看作是一种 padding-top。它的高度值 top 由 itemHeight 乘以 startIdx 计算而来。
然后是监听滚动事件，当 scrollTop 改变时，更新组件。我这里使用的是 React18，默认是并发模式，更新状态 setState 是异步的，因此在快速滚动的情况下，会出现渲染不实时导致的短暂空白现象。
所以这里我用了 ReactDOM 的 flushSync 方法，让状态的更新变成同步的，来解决短暂空白问题。
但滚动是一个高频触发的时间，我的这种写法在列表项复杂的情况下，是可能会出现性能问题的。更好的做法是做 函数节流 + RAF （requestAnimationFrame），虽然也会有一些空白现象，但不会太严重。
列表项高度动态
列表项高度动态的情况，就复杂得多。
如果能够 在渲染前知道所有列表项的高度 ，那实现思路还是同前面列表项高度固定的情况一致。
只是我们不能用乘法来计算了，要改成累加的方式来计算 startIdx 和 endIdx。
然而实际上更常见的情况是列表项 高度根据内容自适应 ，只能在渲染完成后才能知道真正高度。
怎么办呢？通常的方式是 提供一个列表项预设高度，在列表项渲染完成后，再更新高度 。
代码实现
我们先给出实现：
import?{?forwardRef,?useState?}?from?'react';
import?{?flushSync?}?from?'react-dom';
//?动态列表组件
const?VariableSizeList?=?forwardRef(
??({?containerHeight,?getItemHeight,?itemCount,?itemData,?children?},?ref)?=>?{
????ref.current?=?{
??????resetHeight:?()?=>?{
????????setOffsets(genOffsets());
??????}
????};
????//?children?语义不好，赋值给?Component
????const?Component?=?children;
????const?[scrollTop,?setScrollTop]?=?useState(0);?//?滚动位置
????//?根据?getItemHeight?生成?offsets
????//?本质是前缀和
????const?genOffsets?=?()?=>?{
??????const?a?=?[];
??????a[0]?=?getItemHeight(0);
??????for?(let?i?=?1;?i?<?itemCount;?i++)?{
????????a[i]?=?getItemHeight(i)?+?a[i?-?1];
??????}
??????return?a;
????};
????//?所有?items?的位置
????const?[offsets,?setOffsets]?=?useState(()?=>?{
??????return?genOffsets();
????});
????//?找?startIdx?和?endIdx
????//?这里用了普通的查找，更好的方式是二分查找
????let?startIdx?=?offsets.findIndex((pos)?=>?pos?>?scrollTop);
????let?endIdx?=?offsets.findIndex((pos)?=>?pos?>?scrollTop?+?containerHeight);
????if?(endIdx?===?-1)?endIdx?=?itemCount;
????const?paddingCount?=?2;
????startIdx?=?Math.max(startIdx?-?paddingCount,?0);?//?处理越界情况
????endIdx?=?Math.min(endIdx?+?paddingCount,?itemCount?-?1);
????//?计算内容总高度
????const?contentHeight?=?offsets[offsets.length?-?1];
????//?需要渲染的?items
????const?items?=?[];
????for?(let?i?=?startIdx;?i?<=?endIdx;?i++)?{
??????const?top?=?i?===?0???0?:?offsets[i?-?1];
??????const?height?=?i?===?0???offsets[0]?:?offsets[i]?-?offsets[i?-?1];
??????items.push(
????????<Component
??????????key={i}
??????????index={i}
??????????style={{
????????????position:?'absolute',
????????????left:?0,
????????????top,
????????????width:?'100%',
????????????height
??????????}}
??????????data={itemData}
????????/>
??????);
????}
????return?(
??????<div
????????style={{
??????????height:?containerHeight,
??????????overflow:?'auto',
??????????position:?'relative'
????????}}
????????onScroll={(e)?=>?{
??????????flushSync(()?=>?{
????????????setScrollTop(e.target.scrollTop);
??????????});
????????}}
??????>
????????<div?style={{?height:?contentHeight?}}>{items}</div>
??????</div>
????);
??}
);
线上 demo：
https://codesandbox.io/s/4oy84f
效果：
思路说明
和列表项等高的实现不同，这里不能传一个固定值 itemHeight，改为传入一个根据 index 获取列表项宽度函数 getItemHeight(index) 。
组件会通过这个函数，来拿到不同列表项的高度，来计算出 offsets 数组。 offsets 是每个列表项的底边到顶部的距离 。offsets 的作用是在滚动到特定位置时，计算出需要渲染的列表项有哪些。
当然你也可以用高度数组，但查找起来并没有优势，你需要累加。offsets 是 heights 的累加缓存结果（其实也就是前缀和）。
假设几个列表项的高度数组 heights 为 [10, 20, 40, 100] ，那么 offsets 就是 [10, 30, 70, 170] 。一推导公式为： offsets[i] = offsets[i-1] + heights[i]
下面是计算 offsets 的代码：
const?genOffsets?=?()?=>?{
??const?a?=?[];
??a[0]?=?getItemHeight(0);
??for?(let?i?=?1;?i?<?itemCount;?i++)?{
????a[i]?=?getItemHeight(i)?+?a[i?-?1];
??}
??return?a;
};
//?所有?items?的位置
const?[offsets,?setOffsets]?=?useState(()?=>?{
??return?genOffsets();
});
getItemHeight 在列表项能渲染前，会提供一个预估高度 estimatedItemHeight。
//?高度数组，当列表项渲染完成时，更新它
const?heightsRef?=?useRef(new?Array(100));
//?预估高度
const?estimatedItemHeight?=?40;
const?getHeight?=?(index)?=>?{
??return?heightsRef.current[index]????estimatedItemHeight;
};
这里我用 genOffsets 函数生成了一个完整的 offsets 数组。
其实，我们也可以考虑做 惰性计算 ：一开始不计算出整个 offsets ，而是只计算前几个 item 的 offset，并通过这几个高度来推测一个总内容高度。然后在后面滚动时再一点点补充 offset，再一点点修正总内容高度。
为了让调用者可以手动触发高度的重新计算。虚拟列表组件通过 ref 提供了一个 resetHeight 方法来重置缓存的高度 。
ref.current?=?{
??resetHeight:?()?=>?{
????setOffsets(genOffsets());
??}
};
//?使用方式
<VariableSizeList?ref={listRef}?/>
listRef.current.resetHeight();
计算出 offsets 数组后，我们就可以计算需要渲染的列表项的起始（startIdx）和结束（endIdx）位置了。
因为 offsets 是有序数组，我们需要用 高效的二分查找 去查找，时间复杂度为 O(log n) 。
（这里我偷懒直接用了从左往右查找，没有去做二分查找的实现）
//?找?startIdx?和?endIdx //?这里偷懒用了普通的查找，最好的方式是二分查找 let?startIdx?=?offsets.findIndex((pos)?=>?pos?>?scrollTop); let?endIdx?=?offsets.findIndex((pos)?=>?pos?>?scrollTop?+?containerHeight); if?(endIdx?===?-1)?endIdx?=?itemCount; //?上下扩展补充几个?item const?paddingCount?=?2; startIdx?=?Math.max(startIdx?-?paddingCount,?0);?//?处理越界情况 endIdx?=?Math.min(endIdx?+?paddingCount,?itemCount?-?1);
然后内容高度就是：
//?计算高度 const?contentHeight?=?offsets[offsets.length?-?1];
需要渲染的 items：
const?items?=?[];
for?(let?i?=?startIdx;?i?<=?endIdx;?i++)?{
??//?计算到顶部距离
??const?top?=?i?===?0???0?:?offsets[i?-?1];
??//?item?的高度
??const?height?=?i?===?0???offsets[0]?:?(offsets[i]?-?offsets[i?-?1]);
??items.push(
????<Component
??????key={i}
??????index={i}
??????style={{
????????position:?'absolute',
????????left:?0,
????????top,
????????width:?'100%',
????????height
??????}}
??????data={itemData}
????/>
??);
}
后面的 div 结构和前面的列表项高度固定实现的基本一样，但我这里换成了绝对定位实现。就不过多赘述了。
return?(
??<div
????style={{
??????height:?containerHeight,
??????overflow:?'auto',
??????position:?'relative'
????}}
????onScroll={(e)?=>?{
??????flushSync(()?=>?{
????????setScrollTop(e.target.scrollTop);
??????});
????}}
??>
????<div?style={{?height:?contentHeight?}}>{items}</div>
??</div>
);
一些需要注意的问题
容器宽度变化时，会导致大量列表项的高度变化，需要手动触发重置虚拟列表缓存的高度集合，建议宽度固定； 图片加载需要时间，尤其是图片多的情况下，会让一个列表项的高度不断变大，需要你手动触发重置虚拟列表高度。可以考虑给图片预设一个宽高，在加载前占据好高度； 因为预估高度并不准确，会导致内容高度一直变化。这就是拖动滚动条进行滚动时，滑块和光标位置慢慢对不上的原因。 要考虑获取列表项的高度并更新虚拟列表高度的时机，可能需要配合 Obsever 监听变化； 因为不是渲染所有列表项，所以像是 .item:nth-of-type(2n) 的 CSS 样式会不符合预期。你需要改成用 JS 根据 index 来应用样式，如 backgroundColor: index % 2 === 0 ? 'burlywood' : 'cadetblue' 。
结尾
虚拟列表的实现，核心在于根据滚动位置计算落在可视区域的列表项范围。
对于高度固定的情况，实现会比较简单，因为我们有绝对正确的数据。
对于高度动态的情况，就复杂得多，要在列表项渲染后才能得到高度，为此需要设置一个预估高度，并在列表项渲染之后更新高度。
本文中虚拟列表组件的 API 参考了 react-window 库。如果你需要在生产环境使用虚拟列表，推荐使用 react-window，它的功能会更强大。
以上就是利用React实现虚拟列表的示例代码的详细内容，更多关于React虚拟列表的资料请关注其它相关文章！
查看更多关于利用React实现虚拟列表的示例代码的详细内容...