返回

SWR：从设计与源码角度深潜数据获取的秘密武器

前端

什么是 SWR？

SWR（Stale While Revalidate）是一种现代前端的数据缓存策略，它广泛应用于 React 应用中。通过使用 SWR，开发者可以在保持高性能的同时，实现数据的实时更新和回退机制。

基础用法

在实际项目中应用 SWR 需要引入 swr 包，并使用其提供的 useSWR hook 来获取数据：

import useSWR from 'swr'

const fetcher = (...args) => fetch(...args).then(res => res.json())
const { data, error } = useSWR('/api/data', fetcher)

if (error) return <div>Failed to load</div>
if (!data) return <div>Loading...</div>

return <div>Data: {JSON.stringify(data)}</div>

核心功能拆解

  • 数据缓存：首次请求后，SWR 会将响应缓存起来。
  • 自动更新：一旦有新的数据返回，它会立即刷新显示的内容。
  • 错误处理：如果网络请求失败，则返回缓存的数据，并尝试再次获取。

深入源码理解 SWR

为了更深刻地理解 SWR 的工作原理，可以查看其源代码。SWR 采用了 React 的自定义 Hook 模式来提供数据管理功能。核心部分在于如何处理异步请求和响应的缓存机制。

异步请求与缓存逻辑

在 useSWR 内部，当组件挂载时会发起一个异步请求：

function useSWR(key, fetcher) {
  const { data, error } = useState({ data: undefined, error: null })
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetcher()
        setData(response)
      } catch (err) {
        setError(err)
      }
    }
    fetchData()
  }, [fetcher])
  return { data, error }
}

上述代码片段简化了 SWR 的核心逻辑。实际实现中还包括数据的缓存处理、更新策略以及错误回退机制。

更新与回退

当请求成功时，SWR 将新获取的数据直接展示；而如果失败，则会显示缓存中的旧数据并再次尝试请求。这种机制确保了在不可预见的问题发生时用户仍能看到最新的可用信息：

function useSWR(key, fetcher) {
  const [data, setData] = useState(undefined)
  const [error, setError] = useState(null)

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetcher()
        // 新数据更新，旧数据回退
        setData(prevData => ({ ...prevData, [key]: response }))
      } catch (err) {
        if (!data[key]) setError(err)
      }
    }

    fetchData().catch(setError)
  }, [fetcher])

  return { data, error }
}

扩展性

SWR 设计时考虑到了扩展需求，支持通过配置选项或插件来丰富其功能。例如，可以通过设置 revalidateIfStale 来决定缓存过期后的数据更新策略：

const { data } = useSWR('/api/data', fetcher, {
  revalidateOnFocus: true,
  revalidateOnReconnect: true,
})

这些配置选项允许开发者根据应用的具体需求调整 SWR 的行为。

安全建议

使用 SWR 进行数据获取时，应注意：

  • 确保 API 请求的安全性，避免注入攻击。
  • 对请求和响应进行适当的验证与处理，以提升系统稳定性。
  • 在生产环境中合理设置缓存策略，平衡性能与数据新鲜度。

SWR 是一个强大的工具，通过其灵活的配置选项和高效的更新机制，能够极大地简化前端开发中的数据管理。了解 SWR 的设计思路和源码实现不仅能帮助开发者更有效地利用此工具，还能激发对于React生态系统中其他类似库的兴趣。