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

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

https://tanstack.com/query/latest

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' }}><divstyle={{height: `${rowVirtualizer.getTotalSize()}px`,position: 'relative',}}>{rowVirtualizer.getVirtualItems().map((virtualRow) => (<divkey={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