0

我第一次将 SWR 钩子与 next.js 一起使用,我试图得到一些关于某些东西的答案,但我无法得到它们,甚至没有文档。

问题:所以,我知道 SWR 为您的数据提供缓存,并且它会实时更新,但我有点迷失在您必须使用挂钩的两个选项之间。所以,通常,你有 dedupeInterval 和 refreshInterval

refreshInterval = 0: polling interval (disabled by default)
dedupingInterval = 2000: dedupe requests with the same key in this time span

现在,这两者有什么区别?如果我有两个使用相同密钥的请求,它会在两秒钟后更新吗?它与 refreshInterval 相同吗?如果我使用 refreshInterval,我会遇到性能问题吗?因为它在很短的时间内发出请求

如果你能帮我解决这个问题,那就太好了!

谢谢你的时间 !!

4

1 回答 1

2

现在,这两者有什么区别?

不同之处在于:

  • refreshInterval正在定义一个时间,在该时间之后发送新请求以更新您的数据。例如。每一秒。
  • dedupeInterval正在定义一个时间,在该时间期间,如果已经针对特定数据(即具有特定键的数据)发送了请求,则在呈现请求新请求以刷新该数据的组件时,将不会完成刷新。

去重意味着消除重复,即。发出可能更少的请求,而不是更多。他们在文档中给出了一个示例,其中一个组件渲染了另一个<Avatar />使用 swr 钩子的组件的 5 倍。但实际请求只会发出一次,因为该渲染将在默认的 2 秒时间跨度内。

如果我有两个具有相同密钥的请求,它会在两秒后更新吗?它与 refreshInterval 相同吗?

不,dedupeInterval设置为 2 秒不会自动更新数据。只有在 2 秒后重新渲染使用带有 swr 钩子的相同键的组件时,它才会更新它。或者,如果您没有停用其他更新机制,例如 on focus 并且用户将焦点放在您的组件上。

只要refreshInterval组件仍然挂载,即使它不重新渲染并且用户不与它交互,每隔 X 时间就会有一个 API 调用。

如果我使用 refreshInterval,我会遇到性能问题吗?因为它在很短的时间内发出请求。

是的,如果用户在 20 秒内打开您的页面并且除了阅读内容之外什么都不做,并且您已将时间设置refreshInterval为 1 秒,那么在此期间将有 20 次 API 调用来更新该数据。如果您的数据每隔几秒钟更改一次并且您需要更新 UI,那么这种行为可能会很有用。但显然这可能是一个性能问题。

refreshInterval默认情况下禁用而设置为 2 秒的原因dedupeInterval是为了避免过多的 API 调用。

于 2021-05-28T21:13:30.260 回答