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