资讯详情

默认情况下，组件重新装载时 useSWR 会发起请求。这是 SWR "stale-while-revalidate" 设计哲学的一部分。

重新装载时的行为

function MyComponent() {const { data } = useSWR('/api/data', fetcher)// 组件卸载又重新挂载时：// 1. 立即显示缓存数据（如果存在）// 2. 在后台发起新请求验证数据是否更新// 3. 如果有更新，静默替换数据
}

重新装载的常见场景

场景1：路由导航

// 从 /page-a 导航到 /page-b，再返回 /page-a
// PageA 组件会卸载又重新挂载，触发重新验证
function PageA() {const { data } = useSWR('/api/page-a', fetcher) // 重新挂载时会请求return <div>Page A: {data}</div>
}

场景2：条件渲染

function ToggleComponent() {const [show, setShow] = useState(true)return (<div><button onClick={() => setShow(!show)}>Toggle</button>{show && <DataComponent />} // 切换时会卸载/重新挂载</div>)
}function DataComponent() {const { data } = useSWR('/api/data', fetcher) // 重新显示时会请求return <div>{data}</div>
}

场景3：键值变化导致的重新挂载

function UserProfile({ userId }) {// 当 userId 变化时，组件实际上会重新挂载const { data } = useSWR(`/api/user/${userId}`, fetcher)return <div>User: {data?.name}</div>
}

如何控制重新装载时的行为

1. 完全禁止重新验证

const { data } = useSWR('/api/data', fetcher, {revalidateOnMount: false // 重新挂载时不请求
})

2. 智能控制（推荐）

const { data } = useSWR('/api/data', fetcher, {revalidateIfStale: false // 有缓存就不重新验证，如果 key 发生变化或者存在定时刷新，useSWR 也会正常发起新的请求。
})

3. 使用不可变数据

import useSWRImmutable from 'swr/immutable'const { data } = useSWRImmutable('/api/data', fetcher) // 永远不会自动重新验证

4. 延长去重间隔

const { data } = useSWR('/api/data', fetcher, {dedupingInterval: 60000 // 60秒内避免重复请求
})

为什么这是默认行为？

useSWR 选择在重新装载时请求是因为：

1. 数据新鲜度：确保用户看到最新数据
2. 后台更新：用户体验无中断（先显示缓存，后台更新）
3. 一致性：保持多设备间数据同步
4. 错误恢复：自动重试失败的请求

实际应用建议

// 根据数据类型选择合适的策略
function SmartComponent() {// 实时数据：使用默认行为const { data: notifications } = useSWR('/api/notifications', fetcher)// 静态数据：禁止重新验证const { data: countries } = useSWR('/api/countries', fetcher, {revalidateIfStale: false})// 用户数据：中等刷新频率const { data: user } = useSWR('/api/user', fetcher, {dedupingInterval: 30000 // 30秒内不重复请求})return <div>{/* ... */}</div>
}

总结：组件重新装载时默认会请求，这是为了保持数据新鲜度。你可以通过配置来精确控制这个行为。