了解项目整体结构和核心逻辑的建议阅读顺序:
- 项目配置与依赖:
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 适配器的useVirtualizer
Hook 实现。
- 示例应用 (以 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: