React如何实现虚拟列表来处理长尾词查询？

本文共计3896个文字，预计阅读时间需要16分钟。

目录- 列表项高度固定- 代码实现- 列表项高度动态- 代码实现- 思路说明- 一些需要注意的问题- 结束语- 大家常好，我是前端西瓜哥。- 这次我们来探讨一下虚拟列表是什么，并用React实现两种虚拟效果。

目录

• 列表项高度固定
• 代码实现
• 列表项高度动态
• 代码实现
• 思路说明
• 一些需要注意的问题
• 结尾

大家好，我是前端西瓜哥。这次我们来看看虚拟列表是什么玩意，并用 React 来实现两种虚拟列表组件。

虚拟列表，其实就是将一个原本需要全部列表项的渲染的长列表，改为只渲染可视区域内的列表项，但滚动效果还是要和渲染所有列表项的长列表一样。

虚拟列表解决的长列表渲染大量节点导致的性能问题：

• 一次性渲染大量节点，会占用大量 GP 资源，导致卡顿；
• 即使渲染好了，大量的节点也持续占用内存。列表项下的节点越多，就越耗费性能。

虚拟列表的实现分两种，一种是列表项高度固定的情况，另一种是列表项高度动态的情况。

列表项高度固定

列表项高度固定的情况会简单很多，因为我们可以在渲染前就能知道任何一个列表项的位置。

因为涉及到的变量很多，实现起来还是有点繁琐。