大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 TanStack Virtual

Headless UI for Virtualizing Large Element Lists in JS/TS, React, Solid, Vue and Svelte

TanStack Virtual 是用于虚拟化大型元素列表的无头 UI ，用于在 TS/JS、React、Vue、Solid 和 Svelte 中以 60FPS 的速度虚拟化大量可滚动元素中的可见 DOM 节点，同时保留对标记和样式的 100% 控制。

典型特征包括：

• 专为零设计而设计：无头虚拟化意味着开发者始终可以控制标记、样式和组件，从而设计并实现能想到的最漂亮的 UI
• 体积小能力强： TanStack Virtual 虽然体积很小，但是每个字节都提供了强大的性能，从而保证 60FPS 的基础体验门槛
• 最大的可组合性：通过单个函数 / Hooks，开发者可以获得垂直、水平和网格样式布局的无限虚拟化。 该 API 很小，实际上只有 1 个函数，但可组合性却非常强大

同时，TanStack Virtual 与框架无关且功能丰富，API 和引擎高度模块化且独立于框架，同时仍然优先考虑人体工程学。 包括以下开发特性：

• Lightweight (10 - 15kb)
• 支持 Tree-Shaking、保证 Headless
• 垂直和列虚拟化 (Vertical/Column Virtualization)
• 水平和行虚拟化 (Horizontal/Row Virtualization)
• 网格虚拟化 (Grid Virtualization)
• Window-Scrolling
• 固定尺寸 (Fixed Sizing)、变化尺寸 (Variable Sizing)、动态尺寸 (Dynamic/Measured Sizing)
• 滚动方法 (Scrolling Utilities)、固定元素 (Sticky Items)

目前 TanStack Virtual 在 Github 通过 MIT 协议开源，有超过 5k 的 star，是一个值得关注的前端开源项目。

如何使用 TanStack Virtual

TanStack Virtual 的核心是 Virtualizer，其可以定位在垂直（默认）或水平轴上，这使得通过将两个轴配置组合在一起可以实现垂直、水平甚至网格状虚拟化。

首先根据所使用的框架安装特定的包：

pm install @tanstack/react-virtual
// react
npm install @tanstack/solid-virtual
// solid 
npm install @tanstack/svelte-virtual
// svelte
npm install @tanstack/vue-virtual
// vue
npm install @tanstack/virtual-core
// 无框架

下面是一个简单的示例，展示了在 React 中使用 TanStack Virtual 虚拟化 div 中的长列表实例：

import {useVirtualizer} from '@tanstack/react-virtual';

function App() {
  // 列表的可滚动元素
  const parentRef = React.useRef()
  //  virtualizer 元素
  const rowVirtualizer = useVirtualizer({
    count: 10000,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 35,
  })
  return (
    <>
      <div
        ref={parentRef}
        style={{
          height: `400px`,
          overflow: 'auto',
            //   要设置为可滚动
        }}
      >
        {/* 大型元素可容纳所有其他元素 */}
        <div
          style={{
            height: `${rowVirtualizer.getTotalSize()}px`,
            width: '100%',
            position: 'relative',
          }}
        >
          {/* 仅 virtualizer 中的可见项目，手动定位在视图中 */}
          {rowVirtualizer.getVirtualItems().map((virtualItem) => (
            <div
              key={virtualItem.key}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: `${virtualItem.size}px`,
                transform: `translateY(${virtualItem.start}px)`,
              }}
            >
              Row {virtualItem.index}
            </div>
          ))}
        </div>
      </div>
    </>
  )
}

参考资料

https://tanstack.com/virtual/latest

https://tanstack.com/virtual/latest/docs/introduction

https://dev.to/sheldonwelinga/harnessing-the-power-of-tanstackreact-virtual-with-react-hooks-a-step-by-step-guide-mgg

https://github.com/tanstack/virtual

https://twitter.com/tan_stack