Virtualizer (虚拟器)

Virtualizer 类是 TanStack Virtual 的核心。Virtualizer 实例通常由你的框架适配器为你创建,但你确实会直接收到 virtualizer。

tsx
export class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
  constructor(options: VirtualizerOptions<TScrollElement, TItemElement>)
}
export class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
  constructor(options: VirtualizerOptions<TScrollElement, TItemElement>)
}

必要选项

count

tsx
count: number
count: number

要虚拟化的项目总数。

getScrollElement

tsx
getScrollElement: () => TScrollElement
getScrollElement: () => TScrollElement

一个返回虚拟器可滚动元素的函数。如果元素尚不可用,它可能返回 null。

estimateSize

tsx
estimateSize: (index: number) => number
estimateSize: (index: number) => number

🧠 如果你正在动态测量元素,建议估算项目可能的最大尺寸(宽度/高度,在舒适范围内)。这将确保平滑滚动等功能有更好的机会正常工作。

此函数传递每个项目的索引,并应返回每个项目的实际大小(或者如果你将使用 virtualItem.measureElement 动态测量项目,则返回估计大小)。此测量应根据虚拟器的方向返回宽度或高度。

可选选项

enabled

tsx
enabled?: boolean
enabled?: boolean

设置为 false 以禁用 scrollElement 观察器并重置虚拟器的状态。

debug

tsx
debug?: boolean
debug?: boolean

设置为 true 以启用调试日志。

initialRect

tsx
initialRect?: Rect
initialRect?: Rect

scrollElement 的初始 Rect。这主要在需要在 SSR 环境中运行虚拟器时有用,否则 initialRect 将在挂载时由 observeElementRect 实现计算。

onChange

tsx
onChange?: (instance: Virtualizer<TScrollElement, TItemElement>, sync: boolean) => void
onChange?: (instance: Virtualizer<TScrollElement, TItemElement>, sync: boolean) => void

当虚拟器的内部状态更改时触发的回调函数。它传递虚拟器实例和 sync 参数。

sync 参数指示当前是否正在进行滚动。滚动正在进行时为 true,滚动已停止或正在执行其他操作(例如调整大小)时为 false

overscan

tsx
overscan?: number
overscan?: number

在可见区域上方和下方渲染的项目数。增加此数字会增加渲染虚拟器所需的时间,但可能会减少滚动时在虚拟器顶部和底部看到缓慢渲染的空白项目的可能性。默认值为 1

horizontal

tsx
horizontal?: boolean
horizontal?: boolean

如果你的虚拟器是水平定向的,则将其设置为 true

paddingStart

tsx
paddingStart?: number
paddingStart?: number

以像素为单位应用于虚拟器开头的内边距。

paddingEnd

tsx
paddingEnd?: number
paddingEnd?: number

以像素为单位应用于虚拟器末尾的内边距。

scrollPaddingStart

tsx
scrollPaddingStart?: number
scrollPaddingStart?: number

滚动到元素时以像素为单位应用于虚拟器开头的内边距。

scrollPaddingEnd

tsx
scrollPaddingEnd?: number
scrollPaddingEnd?: number

滚动到元素时以像素为单位应用于虚拟器末尾的内边距。

initialOffset

tsx
initialOffset?: number | (() => number)
initialOffset?: number | (() => number)

应用于虚拟器的初始偏移量。这通常仅在 SSR 环境中渲染虚拟器时有用。

getItemKey

tsx
getItemKey?: (index: number) => Key
getItemKey?: (index: number) => Key

此函数传递每个项目的索引,并应为该项目返回一个唯一的键。此函数的默认功能是返回项目的索引,但你应该尽可能覆盖此函数以返回整个集合中每个项目的唯一标识符。此函数应进行记忆化以防止不必要的重新渲染。

rangeExtractor

tsx
rangeExtractor?: (range: Range) => number[]
rangeExtractor?: (range: Range) => number[]

此函数接收可见范围索引,并应返回要渲染的索引数组。如果你需要手动从虚拟器中添加或删除项目,而不管可见范围如何(例如渲染粘性项目、页眉、页脚等),这很有用。默认范围提取器实现将返回可见范围索引,并导出为 defaultRangeExtractor

scrollToFn

tsx
scrollToFn?: (
  offset: number,
  options: { adjustments?: number; behavior?: 'auto' | 'smooth' },
  instance: Virtualizer<TScrollElement, TItemElement>,
) => void
scrollToFn?: (
  offset: number,
  options: { adjustments?: number; behavior?: 'auto' | 'smooth' },
  instance: Virtualizer<TScrollElement, TItemElement>,
) => void

一个可选函数,(如果提供)应为你的 scrollElement 实现滚动行为。它将使用以下参数调用:

  • 要滚动的 offset(以像素为单位)。
  • 一个对象,指示估计大小和实际大小之间是否存在差异 (adjustments) 和/或是否使用平滑动画调用了滚动 (behaviour)。
  • 虚拟器实例本身。

请注意,内置滚动实现导出为 elementScrollwindowScroll,它们由框架适配器函数(如 useVirtualizeruseWindowVirtualizer)自动配置。

⚠️ 尝试将 smoothScroll 与动态测量的元素一起使用将不起作用。

observeElementRect

tsx
observeElementRect: (
  instance: Virtualizer<TScrollElement, TItemElement>,
  cb: (rect: Rect) => void,
) => void | (() => void)
observeElementRect: (
  instance: Virtualizer<TScrollElement, TItemElement>,
  cb: (rect: Rect) => void,
) => void | (() => void)

一个可选函数,如果提供,则在 scrollElement 更改时调用,并应实现 scrollElement 的 Rect(具有 widthheight 的对象)的初始测量和持续监控。它使用实例调用(这也使你可以通过 instance.scrollElement 访问 scrollElement)。内置实现导出为 observeElementRectobserveWindowRect,它们由框架适配器的导出函数(如 useVirtualizeruseWindowVirtualizer)自动为你配置。

observeElementOffset

tsx
observeElementOffset: (
    instance: Virtualizer<TScrollElement, TItemElement>,
    cb: (offset: number) => void,
  ) => void | (() => void)
observeElementOffset: (
    instance: Virtualizer<TScrollElement, TItemElement>,
    cb: (offset: number) => void,
  ) => void | (() => void)

一个可选函数,如果提供,则在 scrollElement 更改时调用,并应实现 scrollElement 的滚动偏移量(一个数字)的初始测量和持续监控。它使用实例调用(这也使你可以通过 instance.scrollElement 访问 scrollElement)。内置实现导出为 observeElementOffsetobserveWindowOffset,它们由框架适配器的导出函数(如 useVirtualizeruseWindowVirtualizer)自动为你配置。

measureElement

tsx
measureElement?: (
  element: TItemElement,
  entry: ResizeObserverEntry | undefined,
  instance: Virtualizer<TScrollElement, TItemElement>,
) => number
measureElement?: (
  element: TItemElement,
  entry: ResizeObserverEntry | undefined,
  instance: Virtualizer<TScrollElement, TItemElement>,
) => number

当虚拟器需要动态测量项目的大小(宽度或高度)时,将调用此可选函数。

🧠 你可以使用 instance.options.horizontal 来确定应测量项目的宽度还是高度。

scrollMargin

tsx
scrollMargin?: number
scrollMargin?: number

使用此选项,你可以指定滚动偏移量的起点。通常,此值表示滚动元素的开头与列表开头之间的空间。这在常见场景中特别有用,例如在窗口虚拟器之前有一个页眉,或者在单个滚动元素中使用多个虚拟器时。如果使用元素的绝对定位,则应在 CSS 变换中考虑 scrollMargin

tsx
transform: `translateY(${
   virtualRow.start - rowVirtualizer.options.scrollMargin
}px)`
transform: `translateY(${
   virtualRow.start - rowVirtualizer.options.scrollMargin
}px)`

要动态测量 scrollMargin 的值,可以使用 getBoundingClientRect() 或 ResizeObserver。这在虚拟列表上方的项目可能会更改其高度的场景中很有用。

gap

tsx
gap?: number
gap?: number

此选项允许你设置虚拟化列表中项目之间的间距。这对于在项目之间保持一致的视觉分离特别有用,而无需手动调整每个项目的边距或内边距。该值以像素为单位指定。

lanes

tsx
lanes: number
lanes: number

列表划分的通道数(也称为垂直列表的列和水平列表的行)。

isScrollingResetDelay

tsx
isScrollingResetDelay: number
isScrollingResetDelay: number

此选项允许你指定在最后一次滚动事件之后等待多长时间才重置 isScrolling 实例属性。默认值为 150 毫秒。

此选项的实现是为了在不同浏览器中处理滚动行为提供可靠的机制。直到所有浏览器统一支持 scrollEnd 事件。

useScrollendEvent

tsx
useScrollendEvent: boolean
useScrollendEvent: boolean

确定是否使用本机 scrollend 事件来检测滚动何时停止。如果设置为 false,则使用防抖回退在 isScrollingResetDelay 毫秒后重置 isScrolling 实例属性。默认值为 false

此选项的实现是为了在不同浏览器中处理滚动行为提供可靠的机制。直到所有浏览器统一支持 scrollEnd 事件。

isRtl

tsx
isRtl: boolean
isRtl: boolean

是否反转水平滚动以支持从右到左的语言区域设置。

useAnimationFrameWithResizeObserver

tsx
useAnimationFrameWithResizeObserver: boolean
useAnimationFrameWithResizeObserver: boolean

此选项启用将 ResizeObserver 测量包装在 requestAnimationFrame 中,以实现更平滑的更新并减少布局抖动。默认值为 false

它通过确保测量与渲染周期对齐来帮助防止“ResizeObserver 循环已完成但有未传递的通知”错误。这可以提高性能并减少 UI抖动,尤其是在动态调整元素大小时。但是,由于 ResizeObserver 已经异步运行,因此添加 requestAnimationFrame 可能会在测量中引入轻微的延迟,这在某些情况下可能会很明显。如果调整大小操作是轻量级的并且不会导致重排,则启用此选项可能不会提供显着的好处。

Virtualizer 实例

虚拟器实例上提供了以下属性和方法:

options

tsx
options: readonly Required<VirtualizerOptions<TScrollElement, TItemElement>>
options: readonly Required<VirtualizerOptions<TScrollElement, TItemElement>>

虚拟器的当前选项。此属性通过你的框架适配器更新并且是只读的。

scrollElement

tsx
scrollElement: readonly TScrollElement | null
scrollElement: readonly TScrollElement | null

虚拟器的当前 scrollElement。此属性通过你的框架适配器更新并且是只读的。

getVirtualItems

tsx
type getVirtualItems = () => VirtualItem[]
type getVirtualItems = () => VirtualItem[]

返回虚拟器当前状态的虚拟项目。

getVirtualIndexes

tsx
type getVirtualIndexes = () => number[]
type getVirtualIndexes = () => number[]

返回虚拟器当前状态的虚拟行索引。

scrollToOffset

tsx
scrollToOffset: (
  toOffset: number,
  options?: {
    align?: 'start' | 'center' | 'end' | 'auto',
    behavior?: 'auto' | 'smooth'
  }
) => void
scrollToOffset: (
  toOffset: number,
  options?: {
    align?: 'start' | 'center' | 'end' | 'auto',
    behavior?: 'auto' | 'smooth'
  }
) => void

将虚拟器滚动到提供的像素偏移量。你可以选择传递对齐模式以将滚动锚定到 scrollElement 的特定部分。

scrollToIndex

tsx
scrollToIndex: (
  index: number,
  options?: {
    align?: 'start' | 'center' | 'end' | 'auto',
    behavior?: 'auto' | 'smooth'
  }
) => void
scrollToIndex: (
  index: number,
  options?: {
    align?: 'start' | 'center' | 'end' | 'auto',
    behavior?: 'auto' | 'smooth'
  }
) => void

将虚拟器滚动到所提供索引的项目。你可以选择传递对齐模式以将滚动锚定到 scrollElement 的特定部分。

getTotalSize

tsx
getTotalSize: () => number
getTotalSize: () => number

返回虚拟化项目的总大小(以像素为单位)。如果你选择在渲染元素时动态测量它们,则此测量值将逐渐更改。

measure

tsx
measure: () => void
measure: () => void

重置任何先前的项目测量。

measureElement

tsx
measureElement: (el: TItemElement | null) => void
measureElement: (el: TItemElement | null) => void

使用配置的 measureElement 虚���器选项测量元素。你负责在渲染组件时在虚拟器标记中调用此函数(例如,使用 React 的 ref 回调 prop 之类的东西),同时还要添加 data-index

tsx
 <div
  key={virtualRow.key}
  data-index={virtualRow.index}
  ref={virtualizer.measureElement}
  style={...}
>...</div>
 <div
  key={virtualRow.key}
  data-index={virtualRow.index}
  ref={virtualizer.measureElement}
  style={...}
>...</div>

默认情况下,measureElement 虚拟器选项配置为使用 getBoundingClientRect() 测量元素。

resizeItem

tsx
resizeItem: (index: number, size: number) => void
resizeItem: (index: number, size: number) => void

手动更改虚拟化项目的大小。使用此函数手动设置为此索引计算的大小。在某些自定义变形过渡的情况下很有用,并且你事先知道变形项目的大小。

你还可以将此方法与节流的 ResizeObserver 一起使用,而不是 Virtualizer.measureElement 来减少重新渲染。

⚠️ 请注意,在使用 Virtualizer.measureElement 监视该项目时手动更改项目的大小将导致不可预测的行为,因为 Virtualizer.measureElement 也在更改大小。但是,你可以在同一虚拟器实例中但在不同的项目索引上使用 resizeItem 或 measureElement 中的一个。

scrollRect

tsx
scrollRect: Rect
scrollRect: Rect

滚动元素的当前 Rect

shouldAdjustScrollPositionOnItemSizeChange

tsx
shouldAdjustScrollPositionOnItemSizeChange: undefined | ((item: VirtualItem, delta: number, instance: Virtualizer<TScrollElement, TItemElement>) => boolean)
shouldAdjustScrollPositionOnItemSizeChange: undefined | ((item: VirtualItem, delta: number, instance: Virtualizer<TScrollElement, TItemElement>) => boolean)

当动态渲染的项目的大小与估计大小不同时,shouldAdjustScrollPositionOnItemSizeChange 方法可以对滚动位置的调整进行精细控制。当在列表的中间跳转并向后滚动时,新元素的大小可能与最初估计的大小不同。这种差异可能会导致后续项目发生偏移,从而可能中断用户的滚动体验,尤其是在向后浏览列表时。

isScrolling

tsx
isScrolling: boolean
isScrolling: boolean

布尔标志,指示列表当前是否正在滚动。

scrollDirection

tsx
scrollDirection: 'forward' | 'backward' | null
scrollDirection: 'forward' | 'backward' | null

此选项指示滚动方向,可能的值为“forward”(向下滚动)和“backward”(向上滚动)。当没有活动滚动时,该值设置为 null。

scrollOffset

tsx
scrollOffset: number
scrollOffset: number

此选项表示沿滚动轴的当前滚动位置。它以像素为单位,从可滚动区域的起点开始测量。