Lzh on GitHub

虚拟化

了解如何使用由 @tanstack/virtual 提供支持的 Reka UI 有效地渲染大型数据集。
什么是虚拟化？

虚拟化是一种通过仅渲染视口中当前可见的项目来高效渲染大型列表或树结构的技术。这种方法显着提高了性能并减少了内存使用，尤其是在处理数千个数据项目时。

使用虚拟化的好处

  • 提高性能：无延迟地渲染数千个数据项目
  • 减少内存使用：仅为可见项目挂载 DOM 节点
  • 更好的用户体验：快速的初始加载时间和响应式交互

自定义选项

所有虚拟器（Combobox、Listbox 和 Tree）组件都提供以下 props 和自定义：

  • Custom item rendering：渲染复杂项目结构的灵活性
  • estimateSize：为静态或动态项目设置估算的项目高度
  • overscan：控制在可见区域之外渲染的项目数量
  • textContent：每个项目的文本内容，以实现类型提前功能

用法

以下是一些确保虚拟化正常工作的重要注意事项！

  1. 一个固定高度/最大高度的包装 <Virtualizer />。
  2. 项目(item)高度一致，并相应地设置 estimateSize props。
  3. 设置 textContent 属性以确保预输入（type-ahead）功能的可访问性。

示例

<script setup>
import { ComboboxContent, ComboboxItem, ComboboxRoot, ComboboxViewport, ComboboxVirtualizer } from 'reka-ui'

const items = [
  // … large array of items
]
</script>

<template>
  <ComboboxRoot>
    …
    <ComboboxContent>
      <!-- Make sure to set a height for Virtualizer's parent element -->
      <ComboboxViewport class="max-h-80 overflow-y-auto">
        <ComboboxVirtualizer
          v-slot="{ option }"
          :options="items"
          :estimate-size="25"
          :text-content="(opt) => opt.label"
        >
          <ComboboxItem :value="option">
            {{ option.label }}
          </ComboboxItem>
        </ComboboxVirtualizer>
      </ComboboxViewport>
    </ComboboxContent>
  </ComboboxRoot>
</template>

常见问题

虚拟化不起作用

请确保 <Virtualizer> 的父元素具有定义的高度！

<template>
  <ComboboxRoot>
    …
    <ComboboxContent>
      <!-- Height must be defined -->
      <ComboboxViewport class="max-h-80 overflow-y-auto">
        <ComboboxVirtualizer>
          …
        </ComboboxVirtualizer>
      </ComboboxViewport>
    </ComboboxContent>
  </ComboboxRoot>
</template>