WHAT - TanStack 前端工具库合集

在 WHAT - react-query(TanStack Query) vs swr 请求 中我们介绍过 TanStack Query. 其实 TanStack 是一个由 Tanner Linsley 创建的前端工具库合集，专注于构建高质量、可组合、无状态的 UI 工具。

最常见和广泛使用的几个 TanStack 项目包括：

常见的 TanStack 库

特点

• 无 UI：只提供逻辑和状态，UI 自定义权完全交给开发者
• 类型安全：对 TypeScript 有极佳支持
• 高性能：内部设计注重最小化重渲染和资源消耗
• 框架无关（部分）：如 Table 和 Virtual 支持 React、Vue、Solid 等框架

官方网站与资源

• 官网：https://tanstack.com/
• GitHub：https://github.com/TanStack
• 文档（如 Query）：https://tanstack.com/query/latest

TanStack Query（React Query）

使用示例：

import { useQuery } from '@tanstack/react-query';

const fetchUser = async () => {
  const res = await fetch('/api/user');
  return res.json();
};

function Profile() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user'],
    queryFn: fetchUser,
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <div>Username: {data.name}</div>;
}

TanStack Table

无 UI 表格库，只负责表格的核心逻辑（列定义、行、排序、过滤等）。

示例：React + TanStack Table v8

import React from 'react';
import {
  useReactTable,
  getCoreRowModel,
  flexRender,
  ColumnDef,
} from '@tanstack/react-table';

type Person = {
  firstName: string;
  lastName: string;
  age: number;
};

const data: Person[] = [
  { firstName: 'Alice', lastName: 'Smith', age: 28 },
  { firstName: 'Bob', lastName: 'Jones', age: 35 },
];

const columns: ColumnDef<Person>[] = [
  {
    header: 'Name',
    columns: [
      { accessorKey: 'firstName', header: 'First Name' },
      { accessorKey: 'lastName', header: 'Last Name' },
    ],
  },
  { accessorKey: 'age', header: 'Age' },
];

export default function MyTable() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map(headerGroup => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map(header => (
              <th key={header.id}>
                {flexRender(header.column.columnDef.header, header.getContext())}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map(row => (
          <tr key={row.id}>
            {row.getVisibleCells().map(cell => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

重点：样式完全由你控制。

TanStack Virtual

高性能虚拟滚动，只渲染可见区域的元素。

示例：React 虚拟列表

import React, { useRef } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';

const rows = new Array(10_000).fill(true).map((_, i) => `Row ${i}`);

export default function VirtualList() {
  const parentRef = useRef<HTMLDivElement>(null);

  const rowVirtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 35,
  });

  return (
    <div
      ref={parentRef}
      style={{
        height: '400px',
        overflow: 'auto',
        border: '1px solid #ddd',
      }}
    >
      <div
        style={{
          height: `${rowVirtualizer.getTotalSize()}px`,
          position: 'relative',
        }}
      >
        {rowVirtualizer.getVirtualItems().map(virtualRow => (
          <div
            key={virtualRow.key}
            ref={virtualRow.measureElement}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              transform: `translateY(${virtualRow.start}px)`,
              borderBottom: '1px solid #eee',
            }}
          >
            {rows[virtualRow.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

只渲染可视区域，即使1万条也不卡。

TanStack Router

现代化路由库，支持数据加载、类型安全和文件路由。

示例：React 基础路由配置

import {
  createRouter,
  RouterProvider,
  Route,
} from '@tanstack/react-router';
import { lazy } from 'react';
import React from 'react';
import ReactDOM from 'react-dom/client';

// 路由配置
const rootRoute = new Route({
  getParentRoute: () => undefined,
  path: '/',
  component: () => <div>Home</div>,
});

const aboutRoute = new Route({
  getParentRoute: () => undefined,
  path: '/about',
  component: () => <div>About</div>,
});

const router = createRouter({
  routeTree: rootRoute.addChildren([aboutRoute]),
});

// App 入口
ReactDOM.createRoot(document.getElementById('root')!).render(
  <RouterProvider router={router} />
);

它支持更复杂的 loader、error boundary、路由嵌套。

TanStack Form（目前还在开发预览阶段）

这个库还没有正式稳定版，不少开发者仍在观望。