默认情况下，组件重新装载时 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 选择在重新装载时请求是因为：
- 数据新鲜度：确保用户看到最新数据
- 后台更新：用户体验无中断（先显示缓存，后台更新）
- 一致性：保持多设备间数据同步
- 错误恢复：自动重试失败的请求
实际应用建议
// 根据数据类型选择合适的策略
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>
}
总结：组件重新装载时默认会请求，这是为了保持数据新鲜度。你可以通过配置来精确控制这个行为。
)
