大型列表渲染问题

假设您遍历一个包含一万个项目的数组，并为每个项目渲染一个 li。即使屏幕上一次只能容纳几十个项目，React 仍会逐一创建一万个 DOM 节点。

其中大多数节点都在屏幕外且不可见，但浏览器仍必须创建、布局并维护每一个节点。

大型 DOM 树会给浏览器带来实际的开销。布局、样式重新计算和内存占用都会随节点数量增长，因此超长列表会拖慢初始渲染并增加内存使用。

当引擎需要跟踪并重新排布数万个节点时，即使是简单的交互也可能出现卡顿。

用户最能感受到问题的场景就是滚动超长列表。内容移动时，浏览器会重新绘制，并可能重新计算布局；节点过多时，帧率会降到不再流畅的程度。

结果就是滚动卡顿、延迟明显，无论应用其他部分运行多快，界面都会显得响应迟缓。

您可以在浏览器 DevTools 的内存面板中确认这个问题，该面板会报告页面上的 DOM 节点数量。创建数千个节点的列表会在这里清晰地显示出来。

观察渲染更多项目时节点数量不断增加，就能得到具体证据，证明 DOM 大小是性能瓶颈。

窗口化有时也称为虚拟化，它只渲染当前可见的项目以及少量缓冲项目，而不是整个列表。随着您滚动，进入视口的项目会被挂载，离开视口的项目会被卸载。

这样无论数据包含多少项目，实际 DOM 都能保持很小，从而将 DOM 大小与数据集大小解耦。

可见窗口由滚动位置、容器高度和项目高度推导而来。用视口高度除以项目高度，可以大致得到能容纳多少行；滚动偏移量则能确定具体是哪些行。

该库利用这些数值决定任意时刻究竟渲染哪一部分项目。

有多个库实现了窗口化。react-virtualized 功能丰富但体积较大，react-window 是同一作者编写的更小巧、更专注的重写版本，而 TanStack Virtual 则是现代的无头选项。

对于大多数列表而言，react-window 在简单性和性能之间取得了很好的平衡，因此本课程将重点介绍它。

当列表很长（大致达到几百行或更多），或者每行包含大量图片和嵌套组件时，窗口化才能带来明显收益。此时 DOM 大小确实会损害性能。

无限信息流、大型数据表和聊天记录，都是窗口化从可选方案变为必要方案的典型场景。

对于只有几十个简单项目的短列表，窗口化会增加复杂性，却没有明显收益。绝对定位和测量所带来的开销甚至可能得不偿失。

请仅在数据集确实很大时使用窗口化；对于小型数据集，普通的 map 更简单，而且速度完全足够。

使用窗口化后，即使列表包含十万个项目，DOM 中也只保留少量可见项目，因此初始渲染速度快、内存占用低，滚动也很流畅。

您只需在设置时增加少许复杂性，就能换来不再取决于数据量的性能，这正是虚拟化的核心承诺。

请判断何时值得使用虚拟化。

渲染数千个 DOM 节点会增加布局开销、内存占用和滚动卡顿，您可以通过 DevTools 中的节点数量确认这一点。虚拟化只渲染可见窗口及其缓冲区，从而保持 DOM 较小。

在 react-virtualized 和 TanStack Virtual 等方案中，react-window 是一种专注且轻量的选择。请将它用于大型或内容繁重的列表，而对于短小简单的列表则跳过它。