我在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
以上就是使用 useCallback 在 useSWR 中缓存您的 fetcher的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1489912.html
微信扫一扫 
支付宝扫一扫 
