useSWR 钩子：获取、加载与错误状态

useSWR(key, fetcher, options) 是主要钩子。key 是缓存键（通常是 URL 字符串），fetcher 是返回数据的异步函数，options 是可选的配置对象。

该钩子会返回一个包含 data、error、isLoading、isValidating 和 mutate 函数的对象。

key 可以是字符串 URL、由 [url, params] 组成的数组，也可以是 null。字符串键对应简单的 GET 请求。数组键允许您将 userId 或过滤条件等变量嵌入缓存标识中。

传入 null 会完全停用请求，这对于所需数据尚未可用时进行条件获取非常有用。

fetcher 会接收 key（或者将数组键展开为参数），并且必须返回一个 Promise。解析后的值会成为 data。如果 fetcher 抛出异常，就会设置 error 属性。

示例：(url) => fetch(url).then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }).

首次加载时，data 的值为 undefined；成功后，它会等于 fetcher 返回的解析值。除非 fetcher 抛出异常，否则 error 的值为 undefined；如果发生异常，它会保存抛出的错误对象。

请检查 if (error) 以渲染错误消息，并检查 if (!data) 以渲染加载骨架屏，从而提供清晰的备用界面。

只有在没有缓存数据且请求正在进行时，isLoading 才为 true，也就是该键首次加载时。只要有请求正在进行，isValidating 就为 true，包括已有缓存数据时的后台重新验证。

请使用 isLoading 显示骨架屏，使用 isValidating 显示一个不显眼的加载指示器，以表示后台刷新。

SWRConfig 允许您为其子树中的所有 useSWR 调用定义默认 fetcher、dedupingInterval、refreshInterval、onError 处理函数和其他选项。这样可以集中管理配置，而不必在每个钩子中重复选项。

您可以嵌套多个 SWRConfig 提供者，为应用的不同部分设置不同的默认值。

将 null 作为键传入即可跳过请求：useSWR(isLoggedIn ? '/api/user' : null, fetcher)。在键变为非 null 值之前，SWR 不会发起获取。

这比 React Query 中的 skip 选项更简洁。当键从 null 变为字符串时，会自动触发首次获取。

您可以为有依赖关系的请求串联 SWR 钩子：const { data: user } = useSWR('/api/me', fetcher)，然后 const { data: orders } = useSWR(user ? '/api/orders/' + user.id : null, fetcher)。第二个钩子会等待第一个钩子完成。

这种模式避免了 useEffect 链，同时让数据依赖关系保持声明式且易于阅读。

如果 Header 组件和 Sidebar 组件都调用 useSWR('/api/user', fetcher)，SWR 只会发出一个请求并共享结果。当数据或错误更新时，两个组件会一起重新渲染。

这种去重会在 dedupingInterval 时间窗口内自动发生（默认 2000 毫秒），无需任何额外配置。

refreshInterval: 5000 表示每 5 秒轮询一次。refreshWhenHidden: false 表示标签页不可见时停止轮询。shouldRetryOnError: false 表示停用自动重试。revalidateOnFocus: false 表示停用由获得焦点触发的重新验证。

请组合使用这些选项，以满足数据新鲜度要求：仪表板通常使用 refreshInterval，而静态内容可以设置 revalidateOnFocus: false。

对于分页数据，请将页码包含在键中：useSWR(['/api/items', page], fetcher)。切换页面会为该页面触发新的获取，同时缓存之前的页面。

SWR 还提供 useSWRInfinite，用于基于游标或无限滚动的模式，并通过 getKey 函数根据页面索引和上一页数据构建键。

将 null 作为 useSWR 的键传入时会发生什么？

useSWR(key, fetcher) 会返回 data、error、isLoading 和 isValidating。null 键会停用条件获取和依赖式获取。isLoading 表示首次加载，isValidating 表示任意正在进行的请求。SWRConfig 可以集中管理默认值，组件之间的请求去重会自动完成。

refreshInterval、revalidateOnFocus 和 shouldRetryOnError 等选项可以针对每个钩子或全局配置，细致调整数据新鲜度行为。