ReactJS:双向无限滚动建模

这是无限表和无限滚动场景的混合.我发现的最好的抽象是:

概观

创建<List>一个包含所有子项数组的组件.由于我们不渲染它们,因此分配它们并丢弃它们真的很便宜.如果10k分配太大,您可以改为传递一个取一个范围并返回元素的函数.

<List>
  {thousandelements.map(function() { return <Element /> })}
</List>

您的List组件正在跟踪滚动位置,并且只呈现视图中的子项.它在开头添加一个大的空div来伪造之前未渲染的项目.

现在,有趣的是,一旦Element渲染了一个组件,你就可以测量它的高度并将其存储在你的中List.这使您可以计算间隔物的高度,并知道应该在视图中显示多少元素.

图片

你说的是,当图像加载时,它们会让所有东西"跳"下来.解决方案是在img标记中设置图像尺寸:<img src="..." />.这样,浏览器在知道要显示的大小之前不必等待下载它.这需要一些基础设施,但它确实值得.

如果您无法事先知道大小,则将onload侦听器添加到图像中,并在加载图像时测量其显示的尺寸并更新存储的行高并补偿滚动位置.

跳跃随机元素

如果你需要跳转列表中的随机元素,那么滚动位置需要一些技巧,因为你不知道它们之间的元素大小.我建议你做的是平均你已经计算过的元素高度,并跳转到最后已知高度的滚动位置+(元素数量*平均值).

由于这不准确,当你回到最后一个已知的好位置时,它会引起问题.发生冲突时,只需更改滚动位置即可修复它.这会稍微移动滚动条,但不应该影响他/她.

反应细节

您希望为所有渲染元素提供一个键,以便在渲染过程中维护它们.有两种策略:(1)只有n个键(0,1,2,... n),其中n是你可以显示的最大元素数,并使用它们的位置模n.(2)每个元素有一个不同的键.如果所有元素共享相似的结构,则使用(1)重用其DOM节点是很好的.如果他们不这样做则使用(2).

我只有两个React状态:第一个元素的索引和显示的元素数量.当前滚动位置和所有元素的高度将直接附加到this.在使用时,setState您实际上正在进行重新渲染,只有在范围发生变化时才会发生.

这是一个使用我在这个答案中描述的一些技术的无限列表的示例http://jsfiddle.net/vjeux/KbWJ2/9/.这将是一些工作,但React绝对是实现无限列表的好方法:)