企业网站的设计,网站开发都学什么,软件开发培训学校收费标准公示,新郑郑州网站建设TanStack 是一个由社区主导的开源项目集合#xff0c;专注于为现代前端开发提供高性能和灵活的工具。它包括多个流行的 JavaScript 和 TypeScript 库#xff0c;主要用于处理表格、查询、虚拟化、状态管理等功能。 文章目录 1、TanStack Query#xff1a;1.1 useQuery#…TanStack 是一个由社区主导的开源项目集合专注于为现代前端开发提供高性能和灵活的工具。它包括多个流行的 JavaScript 和 TypeScript 库主要用于处理表格、查询、虚拟化、状态管理等功能。 文章目录 1、TanStack Query1.1 useQuery用于获取和缓存异步数据。自动处理数据的加载状态、错误状态和刷新。1.2 useMutation用于处理数据的创建、更新或删除操作。它不会缓存结果而是主要用于触发变化。1.3 useQueryClient提供对全局 QueryClient 实例的访问常用于手动操作缓存如刷新、预取或更新数据。1.4 QueryClientTanStack Query 的核心实例用于管理全局缓存和配置。应在应用入口处创建一次并通过 QueryClientProvider 提供给应用。1.5 QueryClientProvider提供 QueryClient 实例给 React 应用使得所有子组件可以使用 TanStack Query 的功能。 2、TanStack Virtual3、 TanStack Table4、TanStack Router是一个强大的路由库提供灵活、声明式的路由配置。5、TanStack Form 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 divLoading.../div;if (error) return divError: {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 QueryClientTanStack 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 (tablethead{table.getHeaderGroups().map((headerGroup) (tr key{headerGroup.id}{headerGroup.headers.map((header) (th key{header.id}{header.renderHeader()}/th))}/tr))}/theadtbody{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
