面试官: 你真的知道 React Query 吗？

站长

2023年03月10日 20:04 · 阅读数 20

一、React Query 概览

React Query 通常被描述为 React 缺少的数据获取(data-fetching)库，但是从更广泛的角度来看，它使 React 程序中的获取，缓存，同步和更新服务器状态变得轻而易举。你或许使用的框架不是 React，可能是 Vue。React Query 和 Vue Query 的核心逻辑是一样的，你只需要理解 React Query，换一个框架也会轻而易举。本文主要介绍的是 React Query ，在最后面我们会介绍 React Query 和 Vue Query 的异同。

在 React 中，如果我们要请求数据，最简单的例子是这样的：

export const mockFetch = (result, timeout = 1000) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(result), timeout);
  });
};

export default function Example1() {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState();

  useEffect(() => {
    setIsLoading(true);
    mockFetch(Math.random()).then((res) => {
      setIsLoading(false);
      setData(res);
    });
  }, []);

  return <div>{isLoading ? "loading..." : data}</div>;
}

再看一下我们是如何使用 React Query 的：

创建一个请求客户端 queryClient 的外部实例，它会管理默认配置和全局状态，并通过 QueryClientProvider 共享 queryClient。

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div>
        <Example1 />
      </div>
    </QueryClientProvider>
  );
}

在组件中使用 useQuery。

export default function Example1() {
  const query = useQuery("key1", () => mockFetch("Example1", 1000));
  return <div>{query.isLoading ? "loading..." : query.data}</div>;
}

这就是 React Query 中最简单例子，useQuery 主要接收 3 个参数：

queryKey：请求的唯一标识。
queryFn：请求的函数。
options：请求相关配置，我们在下面的文章会对 options 中的一些值进行介绍。

如果大家想提前了解。可以参考文档 react-query-v3.tanstack.com/reference/u…

二、准备

在使用 React Query 的时候，最容易让人困惑的就是 React Query 何时会发起请求，组件何时会重新渲染。我们将以 useQuery 这个 hook 入手，帮助大家理解 React Query 的一些基本原理，解答这些困惑。下面的文章会涉及大量的代码演示，我们在这里先定义一下基础的代码，之后会直接引用这些组件或函数，不再做重复声明了，除非需要修改这个组件。

mockFetch，用来模拟请求，可以自定义返回值和请求响应时间。

export const mockFetch = (result, timeout = 1000) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(result), timeout);
  });
};

App，初始化 React Query。创建一个请求客户端 queryClient 的外部实例，它会管理默认配置和全局状态，并通过 QueryClientProvider 注入 React。

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div>
        <Example1 />
        <Example2 />
      </div>
    </QueryClientProvider>
  );
}

Example1, 使用 useQuery 的一个组件。

export default function Example1() {
  const query = useQuery("key1", () => mockFetch("Example1"), 1000);
  return <div>{query.isLoading ? "loading..." : query.data}</div>;
}

Example2, 使用 useQuery 的一个组件。注意这里和 Example1 的 queryKey 是相同的，都是 key1。

export default function Example2() {
  const query = useQuery("key1", () => mockFetch("Example2"), 200);
  return <div>{query.isLoading ? "loading..." : query.data}</div>;
}

三、`staleTime` 和 `cacheTime`？最容易被混淆的两个时间

想要理解 React Query，最先要了解什么是 SWR，SWR 来自于 stale-while-revalidate，一种由 HTTP RFC 5861(opens in a new tab) 推广的 HTTP 缓存失效策略。这种策略首先从缓存中返回数据（过期的），同时发送 fetch 请求（重新验证），最后得到最新数据。从而就衍生出了两个时间，staleTime 过期时间和 cacheTime 缓存时间。

staleTime，查询过期的时间，如果查询没有过期，数据会始终从缓存中返回，并且不会发送网络请求。如果查询过期（默认是 0 即立即过期），仍然会从缓存中获取数据，但是会有一个 refetch 在后台发生。
cacheTime，从缓存中删除非活跃的查询的持续时间，默认是五分钟，一旦没有注册观察者，查询就会过渡到非活跃的状态，即当一个查询的组件都被卸载时。

我们下面用一个例子来理解这两个时间，因为缓存想要被删除，需要组件被卸载，所以我们需要修改 App ，让 Example1 可以随时被卸载和注册。

export default function App() {
  const [count, setCount] = useState(1);
  ...
  return (
    <QueryClientProvider client={queryClient}>
      <div onClick={() => setCount(count + 1)}>
        ...
        <div>count {count}</div>
        {count % 2 === 0 && <Example1 />}
      </div>
    </QueryClientProvider>
  );
}

然后我们给 useQuery 添加 staleTime 和 cacheTime 这两个参数。这里解释一下 isLoading 和 isFetching 的区别：