如何用React打造自适应高度的长尾词疑问列表？

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

近期在某平台开发迭代过程中，遇到了在antd的Modal中加载过长、卡顿的情况。尤其是遇到超长List嵌套在Modal中，体验不佳。为了解决这个问题，决定从零开始自己实现一个虚拟滚动列表，优化整体体验。

近期在某平台开发迭代的过程中遇到了超长List嵌套在antd Modal里加载慢，卡顿的情况。于是心血来潮决定从零自己实现一个虚拟滚动列表来优化一下整体的体验。

改造前：

我们可以看出来在改造之前，打开编辑窗口Modal的时候会出现短暂的卡顿，并且在点击Cancel关闭后也并不是立即响应而是稍作迟疑之后才关闭的

改造后：

改造完成后我们可以观察到整个Modal的打开比之前变得流畅了不少，可以做到立即响应用户的点击事件唤起/关闭Modal

性能对比Demo: codesandbox.io/s/a-v-list-…

0x0 基础知识

所以什么是虚拟滚动/列表呢？

一个虚拟列表是指当我们有成千上万条数据需要进行展示但是用户的“视窗”（一次性可见内容）又不大时我们可以通过巧妙的方法只渲染用户最大可见条数+“BufferSize”个元素并在用户进行滚动时动态更新每个元素中的内容从而达到一个和长list滚动一样的效果但花费非常少的资源。