资源预加载，提升用户体验

更新: 2025/8/8 字数: 0 字时长: 0 分钟

三个思路第一个思路通过鼠标悬浮，事件监听移动到的字段列，实现预加载

import { useQueryClient } from "@tanstack/react-query";

const queryClient = useQueryClient();

...some tsx...
<li onMouseEnter={() => {
  queryClient.prefetchQuery({
      queryKey: ["book", id],
      queryFn: () => fetchBookDetail(id),
      staleTime: 60 * 1000, //避免过于频繁的网络请求
    });
  }}
>

从缓存中获取数据

const useBookDetail = (id: number) => {
  const queryClient = useQueryClient()
  return useQuery({
    queryKey: ['book', id],
    queryFn: () => fetchBookDetail(id),
    initialData: () => {
      const cache = queryClient.getQueryData<Book>(['bookDetail', id])
      return cache
    },
  })
}

第二个思路监听当前页面，预加载下一页数据

第三个渐进式渲染，先渲染已知元素，即之前页面存在的元素（首页）和跳转的页面（详情页）存在重复的部分，重复的内容可以直接渲染，不需要等待

资源预加载，提升用户体验 ​

资源预加载，提升用户体验