Skip to content
开发文档
自动重新验证

自动重新验证

¥Automatic Revalidation

💡

如果你想手动重新验证数据,查看 mutation

¥If you want to manually revalidate the data, check mutation.

聚焦时重新验证

¥Revalidate on Focus

当你重新聚焦页面或在选项卡之间切换时,SWR 会自动重新验证数据。

¥When you re-focus a page or switch between tabs, SWR automatically revalidates data.

这对于立即同步到最新状态非常有用。这对于在旧的移动选项卡或进入睡眠状态的注意本电脑等场景中刷新数据很有帮助。

¥This can be useful to immediately synchronize to the latest state. This is helpful for refreshing data in scenarios like stale mobile tabs, or laptops that went to sleep.

Video: using focus revalidation to automatically sync login state between pages.

该功能默认启用。你可以通过 revalidateOnFocus 选项禁用它。

¥This feature is enabled by default. You can disable it via the revalidateOnFocus option.

间隔时重新验证

¥Revalidate on Interval

在许多情况下,数据会因多个设备、多个用户、多个选项卡而发生变化。我们如何随着时间的推移更新屏幕上的数据?

¥In many cases, data changes because of multiple devices, multiple users, multiple tabs. How can we over time update the data on screen?

SWR 将为你提供自动重新获取数据的选项。它很聪明,这意味着只有与钩子关联的组件在屏幕上时才会重新获取。

¥SWR will give you the option to automatically refetch data. It’s smart which means refetching will only happen if the component associated with the hook is on screen.

Video: when a user makes a change, both sessions will eventually render the same data.

你可以通过设置 refreshInterval 值来启用它:

¥You can enable it by setting a refreshInterval value:

useSWR('/api/todos', fetcher, { refreshInterval: 1000 })

还有 refreshWhenHiddenrefreshWhenOffline 等选项。默认情况下,两者均处于禁用状态,因此当网页不在屏幕上或没有网络连接时,SWR 不会获取。

¥There're also options such as refreshWhenHidden and refreshWhenOffline. Both are disabled by default so SWR won't fetch when the webpage is not on screen, or there's no network connection.

重新连接时重新验证

¥Revalidate on Reconnect

当用户重新上线时重新验证也很有用。当用户解锁计算机但同时尚未连接互联网时,这种情况经常发生。

¥It's useful to also revalidate when the user is back online. This scenario happens a lot when the user unlocks their computer, but the internet is not yet connected at the same moment.

为了确保数据始终是最新的,SWR 在网络恢复时自动重新验证。

¥To make sure the data is always up-to-date, SWR automatically revalidates when network recovers.

该功能默认启用。你可以通过 revalidateOnReconnect 选项禁用它。

¥This feature is enabled by default. You can disable it via the revalidateOnReconnect option.

禁用自动重新验证

¥Disable Automatic Revalidations

如果资源是不可变的,如果我们再次重新验证,它永远不会改变,我们可以禁用它的各种自动重新验证。

¥If the resource is immutable, that will never change if we revalidate again, we can disable all kinds of automatic revalidations for it.

从 1.0 版本开始,SWR 提供了一个辅助钩子 useSWRImmutable 来将资源标记为不可变:

¥Since version 1.0, SWR provides a helper hook useSWRImmutable to mark the resource as immutable:

import useSWRImmutable from 'swr/immutable'
 
// ...
useSWRImmutable(key, fetcher, options)

它具有与普通 useSWR 钩子相同的 API 接口。你还可以通过禁用以下重新验证选项来执行相同的操作:

¥It has the same API interface as the normal useSWR hook. You can also do the same thing by disabling the following revalidation options:

useSWR(key, fetcher, {
  revalidateIfStale: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false
})
 
// equivalent to
useSWRImmutable(key, fetcher)

revalidateIfStale 控制 SWR 在安装且存在过时数据时是否应重新验证。

¥The revalidateIfStale controls if SWR should revalidate when it mounts and there is stale data.

上面的这两个钩子做了完全相同的事情。一旦数据被缓存,它们就不会再请求它。

¥These 2 hooks above do the exact same thing. Once the data is cached, they will never request it again.

挂载时重新验证

¥Revalidate on Mount

在安装时强制覆盖 SWR 重新验证非常有用。默认情况下,revalidateOnMount 的值设置为未定义。

¥It's useful to force override SWR revalidation on mounting. By default, the value of revalidateOnMount is set to undefined.

SWR 钩子安装方式如下:

¥A SWR hook mounts as:

  • 首先它检查 revalidateOnMount 是否已定义。如果为真则开始请求,如果为假则停止。

    ¥First it checks if revalidateOnMount is defined. It starts request if it's true, stop if it's false.

revalidateIfStale 对于控制安装行为很有用。默认情况下 revalidateIfStale 设置为 true。

¥revalidateIfStale useful to control the mount behaviour. By default revalidateIfStale is set to true.

如果 revalidateIfStale 设置为 true,则仅在存在任何缓存数据时才重新获取,否则不会重新获取。

¥If revalidateIfStale is set to true it only refetches if there's any cache data else it will not refetch.