我找到了一种在 Gitroom 源代码中使用 useCallback 在 useSWR 中缓存 fetcher 的方法。

上图来自platform-analytics/render.analytics.tsx。让我们尝试理解这段代码片段。

我们将探索如何结合使用 useCallback 钩子和 useSWR 来优化 React 应用程序中的数据获取。我们将分解提供的代码片段，解释为什么缓存 fetcher 函数很重要。

理解代码

让我们一步步深入代码：

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

在这里，我们在 useCallback 挂钩内定义异步函数加载。该函数从指定端点获取数据并处理加载状态。 useCallback 挂钩确保此函数被记忆，并且仅在依赖项（集成和日期）更改时重新创建。

接下来，我们使用useSWR来管理数据获取：

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

这里，useSWR 配置了一个键 (/analytics-${integration?.id}-${date}) 和我们的记忆加载函数。配置选项控制数据的重新验证行为。

useCallback 如何防止不必要的重新获取

要了解 useCallback 如何防止不必要的重新获取，我们需要深入研究 React 如何处理函数引用以及 useSWR 如何工作。

React 中的函数引用

在 React 中，每次组件重新渲染时，其中定义的所有函数都会重新创建。这意味着如果没有 useCallback，将在每次渲染时创建加载函数的新实例。

对 useSWR 的影响

useSWR 是 React 的数据获取库。它使用密钥来识别数据，并使用获取器函数来获取数据。 useSWR 依赖于 fetcher 函数引用的稳定性。如果引用发生变化，useSWR 可能会将其解释为需要重新获取数据的信号，即使获取器的实际逻辑没有改变。

详细解释如下：

1. 没有 useCallback：

const load = async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
};

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

在这种情况下，每个渲染都会创建一个新的加载函数。 useSWR 每次都会看到不同的函数引用，即使集成和日期没有更改，这也可能导致不必要的重新获取。

With useCallback:

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

通过将加载函数包装在 useCallback 中，我们确保仅在其依赖项（集成和日期）发生变化时才重新创建它。函数引用的这种稳定性告诉 useSWR，除非集成或日期发生更改，否则获取器函数不会更改，从而防止不必要的重新获取。

想学习如何从头开始构建 shadcn-ui/ui 吗？查看 从头开始构建

关于我：

网站：https://ramunarasinga.com/

Linkedin：https://www.linkedin.com/in/ramu-narasinga-189361128/

Github：https://github.com/Ramu-Narasinga

电子邮件：[email protected]

从头开始构建 shadcn-ui/ui

参考：

1. https://github.com/gitroomhq/gitroom/blob/c03b96215fa30b267a97d7eafc2281f482a3192f/apps/frontend/src/components/platform-analytics/render.analytics.tsx#L25
2. https://github.com/search?q=repo:gitroomhq/gitroom useSWR&type=code
3. https://swr.vercel.app/docs/getting-started
4. https://react.dev/reference/react/useCallback