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

什么是 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 (
    <>
      
        {/* 大型元素可容纳所有其他元素 */}
        
          {/* 仅 virtualizer 中的可见项目，手动定位在视图中 */}
          {rowVirtualizer.getVirtualItems().map((virtualItem) => (
            
              Row {virtualItem.index}
            
          ))}
        
      
    
  )
}

参考资料

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

思凡资源网

为何 TanStack Virtual 成为 React/Vue/Svelte 框架虚拟滚动天花板?

什么是 TanStack Virtual

如何使用 TanStack Virtual

参考资料