SWR的使用教程

最新推荐文章于 2024-08-22 08:29:25 发布

本宝宝很开心

最新推荐文章于 2024-08-22 08:29:25 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/weixin_44136421/article/details/121010325

版权

react 同时被 2 个专栏收录

28 篇文章

订阅专栏

hooks

2 篇文章

订阅专栏

本文介绍了如何利用SWR这个React Hooks库进行数据请求，以实现组件数据的实时更新和快速响应的UI。通过示例展示了如何封装`useFetch` Hook以及在实际应用中如何调用它来获取数据，例如`tableData`的获取。SWR通过缓存和重新验证机制确保了数据的即时性和UI的流畅性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 SWR用于数据请求的 React Hooks 库，使用 SWR，组件将会不断地、自动获得最新数据流。UI 也会一直保持快速响应。

安装

yarn add swr  或者  npm install swr

使用

const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)

1.封装useFetch指令

export function useFetch<Data = any, Error = any>(url: string, options: any) {
  const { data, error, mutate } = useSWR<Data, Error>(url, async (url) => {
    const response = await staticFetch(url, options);
    return response;
  });
  return { data, error, mutate };
}