当一个资源数据量很大时，一次加载数据会导致浏览器页面卡顿甚至崩溃，VirtualList 支持根据鼠标滚动加载数据，同时销毁超出数据的 DOM 结构，保证页面的流畅性。

基本用法#

• rowRenderer 对列表中每行元素进行渲染，可做到动态布局（每列不等高时重新计算并重新渲染）;
• data 指要渲染资源数据，可结合 onQueryChange 做异步加载。

const rowRenderer = ({
  index,
  item, // item: <T>为数组中对应项
  prevItem, // 前一项
  nextItem, // 后一项
  style, // row对应的style，需要应用在row对应的dom上，可以与自定义style合并
}) => <p key={index} style={style}>{item}</p>;

<VirtualList
  rowHeight={34} // 每行的高度
  rowRenderer={rowRenderer}
  data={[]}
  onQueryChange={handleQueryChange}
  height={210} // List wrapper高度，default 450
/>

代码演示#

空数组#

加载新数据#

真实场景中鼠标滚动，页面下滑过程中会加载新的数据。

重新加载#

加载完成#

异步等高#

异步不等高#

row 不等高时需要计算调整，设置 isEstimate 为 true。

注意事项#

rowHeight函数动态改变返回高度并不会 rerender,需要主动触发 recomputeRowHeight 方法。

估计模式与 Debug#

对于高度无法完全确定的 row（如内容高度不固定等），依然需要给出一个较准确的 rowHeight。同时设置 isEstimate={true}，VirtualList会在render结束后对可视dom进行计算，并与对应的 rowHeight 比较。如果实际高度与 rowHeight 指定高度不同，则会用实际高度 rerender，直至完全一致。

由于 VirtualList 已将 dom 数量控制在可控范围之内，因此遍历计算再重新渲染的开销在可承受范围内，但对于可以确定高度的列表仍然要避免使用估计模式。

同时估计模式提供 debug 参数方便开发时确定 dom 的真实高度。同时设置 isEstimate={true} 和 debug={true}，VirtualList 会打印真实高度与 rowHeight 不同的 row 对应的信息。

warning: Index 1 estimate height is 16, real height is 18.

API#