为何TanStackVirtual成为React/Vue/Sv...

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

什么是 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// reactnpm install @tanstack/solid-virtual// solid npm install @tanstack/svelte-virtual// sveltenpm install @tanstack/vue-virtual// vuenpm 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