使用 useCallback 在 useSWR 中缓存您的 fetcher

我在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,
});

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

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

关于我：

网站：https://ramunarasinga.com/

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

github：https://github.com/ramu-narasinga

电子邮件：ramu.narasinga@gmail.com

从头开始构建 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%3agitroomhq%2fgitroom%20useswr&type=code
3. https://swr.vercel.app/docs/getting-started
4. https://react.dev/reference/react/usecallback