了解项目整体结构和核心逻辑的建议阅读顺序:
- 项目配置与依赖:
package.json- 查看项目整体脚本、依赖和工作区配置。pnpm-workspace.yaml- 了解 pnpm monorepo 的工作区定义。tsconfig.json- 根 TypeScript 配置。eslint.config.js- ESLint 配置。prettier.config.js- Prettier 配置。
- 核心虚拟化逻辑:
packages/virtual-core/package.json- 核心包的配置和依赖。packages/virtual-core/src/index.ts- 核心库的入口点,理解Virtualizer的创建和基本 API。packages/virtual-core/src/virtualizer.ts-Virtualizer类的主要实现,包含核心计算逻辑。packages/virtual-core/src/utils.ts- 核心库使用的工具函数。
- 框架适配器 (以 React 为例):
packages/react-virtual/package.json- React 适配器的包配置。packages/react-virtual/src/index.tsx- React 适配器的入口和主要的 Hook (useVirtualizer)。packages/react-virtual/src/useVirtualizer.tsx- React 适配器的useVirtualizerHook 实现。
- 示例应用 (以 React Fixed 为例):
examples/react/fixed/package.json- 固定高度 React 示例的配置。examples/react/fixed/src/main.tsx- 查看如何在 React 应用中使用useVirtualizer实现固定高度虚拟列表。
- 贡献与文档:
CONTRIBUTING.md- 贡献指南。docs/introduction.md- 项目介绍文档。docs/api/virtualizer.md- Virtualizer API 文档。
Headless UI for virtualizing scrollable elements in TS/JS and React
Enjoy this library? Try the entire TanStack! React Query, TanStack Table, React Charts
Visit tanstack.com/virtual for docs, guides, API and more
- Row, Column, and Grid virtualization
- One single headless function
- Fixed, variable and dynamic measurement modes
- Imperative scrollTo control for offset, indices and alignment
- Custom scrolling function support (eg. smooth scroll)
Explore the examples:
