TanStack——为现代前端开发提供高性能和灵活的工具

TanStack 是一个由社区主导的开源项目集合，专注于为现代前端开发提供高性能和灵活的工具。它包括多个流行的 JavaScript 和 TypeScript 库，主要用于处理表格、查询、虚拟化、状态管理等功能。

1、TanStack Query：

（以前叫 React Query）是一个用于数据获取、缓存、同步和更新的库，专注于处理异步数据流。

1.1 useQuery：用于获取和缓存异步数据。自动处理数据的加载状态、错误状态和刷新。

• 特性：缓存数据、自动刷新、分页和懒加载、错误处理

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

function fetchData() {
  return fetch('https://jsonplaceholder.typicode.com/posts').then((res) => res.json());
}

function Posts() {
  const { data, isLoading, error } = useQuery(['posts'], fetchData);

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

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

1.2 useMutation：用于处理数据的创建、更新或删除操作。它不会缓存结果，而是主要用于触发变化。

• 特性：触发式操作、内置状态管理、与缓存结合

import { useMutation, useQueryClient } from '@tanstack/react-query';

function App() {
  const queryClient = useQueryClient();

  const mutation = useMutation(
    (newPost) => fetch('/api/posts', {
      method: 'POST',
      body: JSON.stringify(newPost),
    }),
    {
      onSuccess: () => {
        // 在成功后刷新缓存
        queryClient.invalidateQueries(['posts']);
      },
    }
  );

  const handleAddPost = () => {
    mutation.mutate({ title: 'New Post' });
  };

  return (
    <button onClick={handleAddPost}>
      {mutation.isLoading ? 'Adding...' : 'Add Post'}
    </button>
  );
}

1.3 useQueryClient：提供对全局 QueryClient 实例的访问，常用于手动操作缓存（如刷新、预取或更新数据）。

• 手动缓存控制：

1.4 QueryClient：TanStack Query 的核心实例，用于管理全局缓存和配置。应在应用入口处创建一次，并通过 QueryClientProvider 提供给应用。

1.5 QueryClientProvider：提供 QueryClient 实例给 React 应用，使得所有子组件可以使用 TanStack Query 的功能。

2、TanStack Virtual

是一个虚拟化解决方案，适用于处理大型数据集的渲染优化，比如长列表或滚动视

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

function VirtualizedList({ items }) {
  const parentRef = React.useRef();

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

  return (
    <div ref={parentRef} style={{ height: 300, overflow: 'auto' }}>
      <div
        style={{
          height: `${rowVirtualizer.getTotalSize()}px`,
          position: 'relative',
        }}
      >
        {rowVirtualizer.getVirtualItems().map((virtualRow) => (
          <div
            key={virtualRow.index}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              transform: `translateY(${virtualRow.start}px)`,
            }}
          >
            {items[virtualRow.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

3、 TanStack Table：

一个表格管理库，用于构建动态、高性能、可扩展的表格 UI。

import { useTable } from '@tanstack/react-table';

const data = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
];

const columns = [
  {
    header: 'Name',
    accessorKey: 'name',
  },
  {
    header: 'Age',
    accessorKey: 'age',
  },
];

function App() {
  const table = useTable({ data, columns });

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

4、TanStack Router是一个强大的路由库，提供灵活、声明式的路由配置。

5、TanStack Form