FixedSizeList：渲染数千个项目

您可以使用包管理器将 react-window 添加到项目中，例如安装 react-window 包。它体积小，也没有重量级依赖。

安装完成后，您可以导入所需的列表组件；对于所有行高度相同的情况，最常用的是 FixedSizeList。

FixedSizeList 需要多个属性才能运行：高度和宽度定义滚动容器，itemCount 表示项目总数，itemSize 表示每行的像素高度。

子元素属性是一个用于绘制单行的渲染函数。有了这些信息，组件就知道正确进行窗口化所需的几何尺寸。

子元素渲染函数会接收一个包含索引和样式的对象。索引表示要渲染哪个项目，您可以据此查找相应数据；样式则用于定位虚拟列表中的这一行。

您需要返回该行的 JSX，而 react-window 只会为当前位于窗口内的行调用此函数。

样式属性至关重要，必须应用到行元素上。react-window 会使用绝对定位放置每一行，并通过顶部偏移量将其放在高大的滚动容器中的正确位置。

如果不应用样式，所有行都会堆叠在同一位置，窗口化在视觉上也会失效。

react-window 中最常见的错误，就是遗漏行上的样式属性。列表会看起来像是坏掉了：各行重叠在顶部，滚动行为也不正确。

请始终将提供的样式展开或赋给行的最外层元素，以确保定位正确。

您不必在渲染函数中闭包引用数组，也可以通过 itemData 属性传入数组。react-window 随后会将它作为数据字段转发给行，与索引和样式一起提供。

这样可以让行组件保持解耦，也有助于记忆化，因为行会明确接收所需数据。

FixedSizeList 可以通过将布局属性设置为 horizontal 来支持水平列表，也可以根据版本使用方向选项。此时 itemSize 表示宽度而不是高度。

对于同样包含大量项目的水平滚动轮播图或时间线，这一功能非常实用。

overscanCount 属性会在可见窗口之外额外渲染几行。这一缓冲区可以降低快速滚动时新行尚未挂载而出现空白区域的可能性。

少量预渲染可以让体验更流畅，而预渲染过多则会挂载太多屏幕外的行，抵消窗口化的收益。

FixedSizeList 需要明确的像素尺寸，这在响应式布局中不太方便。配套的 AutoSizer 组件会测量父容器，并通过渲染属性向列表提供宽度和高度。

将列表放入 AutoSizer 后，列表就能填满可伸缩容器，无需写死尺寸，并会随着布局变化自动调整。

一个可正常工作的 FixedSizeList 会设置高度、宽度、itemCount 和 itemSize，并通过一个应用样式属性的子元素函数来渲染各行。您还可以选择让 AutoSizer 提供尺寸，并使用 overscanCount 添加缓冲区。

完成这些设置后，无论列表有多长，滚动时都只会挂载可见行，同时保持流畅。

请回顾 FixedSizeList 必须接收哪些信息，才能正确渲染各行。

FixedSizeList 使用高度、宽度、itemCount、itemSize 以及接收索引和样式的子元素渲染函数来渲染等高行。应用样式属性是强制要求，否则各行会相互重叠。

请通过 itemData 传递数据，支持水平布局，添加少量 overscanCount 缓冲区，并使用 AutoSizer 填充响应式容器，而无需写死尺寸。