TanStack 是一套专为现代 Web 开发设计的开源库集合，它提供了一系列高性能、无头（Headless）且类型安全的工具。简单来说，它就像是一个"工具包"，里面装满了各种实用的开发工具，帮助开发者更轻松地构建复杂的 Web 应用。
为什么选择 TanStack？
- • 无头设计：只提供逻辑，不限制样式，给你完全的视觉控制权
- • 类型安全：基于 TypeScript，减少运行时错误
️ 安装和配置
基础安装
pnpm add @tanstack/react-table @tanstack/react-query @tanstack/react-form @tanstack/react-virtual
配置 Query Client
// main.jsx 或 App.jsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 5 * 60 * 1000, // 5分钟
cacheTime: 10 * 60 * 1000, // 10分钟
},
},
});
function App() {
return (
<QueryClientProvider client={queryClient}>
{/* 你的应用组件 */}
</QueryClientProvider>
);
}
核心组件详解
1. TanStack Table - 表格神器
适用场景：需要展示大量数据、支持排序、筛选、分页的表格
核心特性：
简单示例：
import { useReactTable, getCoreRowModel } from "@tanstack/react-table";
function MyTable({ data }) {
const table = useReactTable({
data,
columns: [
{ accessorKey: "name", header: "姓名" },
{ accessorKey: "age", header: "年龄" },
{ accessorKey: "email", header: "邮箱" },
],
getCoreRowModel: getCoreRowModel(),
});
return (
<table>
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id}>{header.column.columnDef.header}</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<td key={cell.id}>{cell.getValue()}</td>
))}
</tr>
))}
</tbody>
</table>
);
}
2. TanStack Query - 数据获取专家
适用场景：需要管理服务器状态、缓存数据、处理加载状态
核心特性：
简单示例：
import { useQuery } from "@tanstack/react-query";
function UserProfile({ userId }) {
const {
data: user,
isLoading,
error,
} = useQuery({
queryKey: ["user", userId],
queryFn: () => fetch(`/api/users/${userId}`).then((res) => res.json()),
staleTime: 5 * 60 * 1000, // 5分钟内数据被认为是新鲜的
});
if (isLoading) return <div>加载中...</div>;
if (error) return <div>出错了: {error.message}</div>;
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}
3. TanStack Form - 表单管理大师
适用场景：复杂的表单验证、动态表单、多步骤表单
核心特性：
简单示例：
import { useForm } from "@tanstack/react-form";
function ContactForm() {
const form = useForm({
defaultValues: {
name: "",
email: "",
message: "",
},
onSubmit: async ({ value }) => {
console.log("提交的数据:", value);
},
});
return (
<form
onSubmit={(e) => {
e.preventDefault();
form.handleSubmit();
}}
>
<div>
<form.Field
name="name"
validators={{
onChange: ({ value }) => (!value ? "姓名不能为空" : undefined),
}}
>
{(field) => (
<>
<input
value={field.state.value}
onChange={(e) => field.handleChange(e.target.value)}
placeholder="请输入姓名"
/>
{field.state.meta.errors && (
<span style={{ color: "red" }}>
{field.state.meta.errors[0]}
</span>
)}
</>
)}
</form.Field>
</div>
<button type="submit">提交</button>
</form>
);
}
4. TanStack Virtual - 虚拟滚动专家
适用场景：需要渲染大量列表项（如聊天记录、商品列表）
核心特性：
简单示例：
import { useVirtualizer } from "@tanstack/react-virtual";
function VirtualList({ items }) {
const parentRef = useRef();
const virtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 50, // 估算每个项目的高度
});
return (
<div
ref={parentRef}
style={{
height: "400px",
overflow: "auto",
}}
>
<div
style={{
height: `${virtualizer.getTotalSize()}px`,
width: "100%",
position: "relative",
}}
>
{virtualizer.getVirtualItems().map((virtualItem) => (
<div
key={virtualItem.key}
style={{
position: "absolute",
transform: translateY( 0,
left: 0,
width: "100%",
height: `${virtualItem).size}px`,
transform: `translateY(${virtualItem.start}px)`,
}}
>
{items[virtualItem.index]}
</div>
))}
</div>
</div>
);
}
常见问题解决
Q: 如何自定义表格样式？
A: TanStack Table 是无头的，你可以完全自定义样式：
.my-table {
border-collapse: collapse;
width: 100%;
}
.my-table th,
.my-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.my-table th {
background-color: #f2f2f2;
}
Q: 如何处理大量数据？
A: 结合使用 TanStack Query 和 TanStack Virtual：
// 分页获取数据
const { data } = useQuery({
queryKey: ["users", page],
queryFn: () => fetchUsers({ page, limit: 100 }),
});
// 虚拟滚动渲染
const virtualizer = useVirtualizer({
count: data?.length || 0,
getScrollElement: () => parentRef.current,
estimateSize: () => 50,
});
TanStack 提供了一套完整、现代且类型安全的工具集，特别适合构建复杂的数据密集型应用。它的无头设计让你拥有完全的样式控制权，而强大的功能则让开发变得更加高效。无论你是要构建一个数据表格、管理复杂的表单，还是处理大量的列表数据，TanStack 都能为你提供完美的解决方案。开始使用 TanStack，让你的 Web 应用更加出色！
仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！
链接: https://fly63.com/nav/4713
