TanStack Virtual：无头虚拟化方案，统治长列表
文章目录TanStack Virtual无头虚拟化方案统治长列表1、跟别的虚拟化库有什么不同2、装起来有多简单3、能处理多复杂的情况4、适合哪些项目TanStack Virtual无头虚拟化方案统治长列表TanStack Virtual 在 GitHub 上已经有 6,997 Star 了。TanStack 生态出品一个无头Headless虚拟化库。专治那种页面上有个几千行列表、卡到鼠标滚轮都推不动的问题。解决的痛点是要在列表里渲染几千甚至上万个 DOM 节点。浏览器的 Layout 线程看到这么多节点直接罢工滚动掉帧、内存飙升。虚拟化只渲染可视区域内的那十几个节点其余用空白占位。TanStack Virtual 做的就是这个。1、跟别的虚拟化库有什么不同大部分虚拟化库react-window、react-virtualized 之类给你一套写好的组件样式、结构都框死了。想加个 header、改个行高动态计算、套个自定义 CSS得跟它的组件 API 斗智斗勇。TanStack Virtual 的取法不同——它只给你一个 hook或 function返回计算结果offset、大小、位置剩下的一切交给你。这叫 Headless 模式。它不管你的列表是 div 还是 table不管是 React、Vue、Svelte、Solid 还是纯 JS都能用。一个库覆盖所有框架。2、装起来有多简单npminstalltanstack/react-virtual核心包tanstack/virtual-core只有 10–15kb不含框架胶水。用 React 就装 react-virtual用 Vue 装 vue-virtual胶水代码单独发包不污染核心体积。最简用法import { useVirtualizer } from tanstack/react-virtual const virtualizer useVirtualizer({ count: items.length, getScrollElement: () parentRef.current, estimateSize: () 50, })然后拿到virtualizer.getVirtualItems()渲染这十几个可见项用transform: translateY(...)定位。几百行的列表和几万行的列表开销一样。3、能处理多复杂的情况垂直列表只是基本功。它还支持水平滚动横向超长表格列Grid 布局二维表格行和列都虚拟化动态尺寸每行高度不确定渲染完后自动修正粘性元素表头固定、表尾固定窗口滚动不单独建滚动容器直接挂 window 上分组和折叠树形列表的展开/收起动态尺寸这个值得多说一句。很多虚拟化库要求你提前告诉它每行多高实际渲染时如果内容撑开就会错位。TanStack Virtual 支持先给一个预估高度estimateSize渲染完后用实际高度纠正重排不需要你手动量。4、适合哪些项目后台管理系统日志列表、用户表格、权限树数据看板几百个指标卡的虚拟滚动社交动态流无限加载的好友动态代码编辑器/终端行数不确定的文本显示Chat 应用几千条消息列表TanStack 家族里还有 Query数据请求、Table表格、Router路由、Form表单等十几个库。Virtual 只解决一个具体问题但解决得干净——不需要框架迁移时换库不需要因列表变多重构代码。、Form表单等十几个库。Virtual 只解决一个具体问题但解决得干净——不需要框架迁移时换库不需要因列表变多重构代码。
