我在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 可能会将其解释为需要重新获取数据的信号，即使获取器的实际逻辑没有改变。
详细解释如下：
- 没有 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
参考：
- https://github.com/gitroomhq/gitroom/blob/c03b96215fa30b267a97d7eafc2281f482a3192f/apps/frontend/src/components/platform-analytics/render.analytics.tsx#l25
- https://github.com/search?q=repo%3agitroomhq%2fgitroom%20useswr&type=code
- https://swr.vercel.app/docs/getting-started
- https://react.dev/reference/react/usecallback
