本次我们将继续 useQuery() API 的学习，着重讲述 useQuery() 在分页上的优化能力[3]。
项目中通常会遇到分页查询的需要，通过之前的学习，我们会写出这样的代码。
function Example() { const [page, setPage] = useState(1) const { isLoading, isError, error, data: posts } = useQuery( ['posts', page], () => axios.get('https://jsonplaceholder.typicode.com/posts', { params: { _page: page, _limit: 6 } }) ) return ( <div> <h2>Posts(第{page}页)</h2> { isLoading && <p>Loading....</p> } { isError && <p>An error has occurred: {error.message}</p> } <ul> { posts?.data.map(post => ( <li key={post.id}>{post.title}</li> )) } </ul> <div style={{ display: 'flex', gap: '8px' }}> <button disabled={isLoading} onClick={() => setPage(prePage => Math.max(0, prePage - 1))}>Previous Page</button> <button disabled={isLoading} onClick={() => setPage(prePage => prePage + 1)}>Next Page</button> </div> </div> )}浏览器访问：
图片
点击“Next Page”查看下一页数据。
图片
确实也实现了功能，不过体验上不好的地方在于，每次切换到新一页数据时，中间会间隔一个“Loading...”效果，导致页面闪动。
为了不然页面闪动，我们可以考虑在加载新页面数据时，同时保留旧数据的展示不就行了吗？后面一旦新数据到了，直接替换就行。
useQuery() API 可考虑到了这方面的使用体验，于是便提供了一个 keepPreviousData 选项。
我们在之前案例的基础之上，调用 useQuery() 时，指定 keepPreviousData: true 选项。
const { isLoading, isError, error, data: posts } = useQuery( ['posts', page], () => axios.get('https://jsonplaceholder.typicode.com/posts', { params: { _page: page, _limit: 6 } }), { keepPreviousData: true })刷新页面，再来看看加载新页的效果。
图片
发现页面不再闪动了。
不过，这种状态下的中间状态我们还要细致的控制一下，比如请求过程中禁用按钮的点击能力。
- const { isLoading, isError, error, data: posts } = useQuery()+ const { isLoading, isError, isFetching, error, data: posts } = useQuery()<div style={{ display: 'flex', gap: '8px' }}>- <button disabled={isLoading} notallow={() => setPage(prePage => Math.max(0, prePage - 1))}>Previous Page</button>- <button disabled={isLoading} notallow={() => setPage(prePage => prePage + 1)}>Next Page</button>+ <button disabled={isLoading || isFetching} notallow={() => setPage(prePage => Math.max(0, prePage - 1))}>Previous Page</button>+ <button disabled={isLoading || isFetching} notallow={() => setPage(prePage => prePage + 1)}>Next Page</button></div>再次查看效果：
图片
不过，除了 isFetching，useQuery() 还返回了一个 isPreviousData 状态，让你判断当前展示的是不是旧数据。
- const { isLoading, isError, isFetching, error, data: posts } = useQuery()+ const { isLoading, isError, isPreviousData, isFetching, error, data: posts } = useQuery()- <ul>+ <ul style={{ opacity: isPreviousData ? 0.5 : 1 }}> { posts?.data.map(post => ( <li key={post.id}>{post.title}</li> )) }</ul>再次查看效果：
图片
这样旧数据在展示期间，加了一点点透明效果。
至此，我们就讲完了 useQuery() 的分页优化能力。
本文我讲解了另一个 useQuery() 能力——keepPreviousData。
在设置 keepPreviousData: true 后，我们在进行分页查询时，同时能保持旧数据的展示，避免页面闪动。
本质上，keepPreviousData 选项是 useQuery() 针对分页场景上的一个优化能力。
当然，UI 交互中还有一种特殊的分页场景，即无限查询（Infinite Query）。这在“上滑/上拉查看历史数据”，或者“下滑/下拉查看最新数据”被广泛采用，不过 useQuery 是解决不了的了，这要靠 useInfiniteQuery()。
[1]React Query 是做什么的？: https://juejin.cn/post/7378015213348257855
[2]一个数据获竟然被 React Query 玩出这么多花样来!: https://juejin.cn/post/7380342160581918731
[3]useQuery() 在分页上的优化能力: https://tanstack.com/query/v3/docs/framework/react/guides/paginated-queries
本文链接：http://www.28at.com/showinfo-26-96988-0.htmlReact Query 的 useQuery 竟也内置了分页查询支持！
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号