SWR React 数据请求库开源项目

我要开发同款
匿名用户2021年08月30日
58阅读
开发技术TypeScript
所属分类Web应用开发
授权协议MIT

作品详情

SWR是用于数据请求的ReactHooks库。

“SWR”这个名字来自于 stale-while-revalidate:一种由 HTTPRFC5861 推广的HTTP缓存失效策略。这种策略首先从缓存中返回数据(过期的),同时发送fetch请求(重新验证),最后得到最新数据。

使用SWR,组件将会不断地、自动获得最新数据流。UI也会一直保持快速响应。

特性

仅需一行代码,你就可以简化项目中数据请求的逻辑,并立即拥有以下这些不可思议的特性:

极速、轻量、可重用的 数据请求内置 缓存 和重复请求去除实时 体验传输和协议不可知支持SSR/ISR/SSGTypeScriptreadyReactNative

SWR涵盖了性能,正确性和稳定性的各个方面,以帮你建立更好的体验:

快速页面导航间隔轮询数据依赖聚焦时重新验证网络恢复时重新验证本地缓存更新(OptimisticUI)智能错误重试分页和滚动位置恢复ReactSuspense

概览

importuseSWRfrom'swr'functionProfile(){const{data,error}=useSWR('/api/user',fetcher)if(error)return<div>failedtoload</div>if(!data)return<div>loading...</div>return<div>hello{data.name}!</div>}

该示例中,useSWR hook接受一个字符串 key 和一个函数 fetcher。key 是数据的唯一标识符(通常是APIURL),并传递给 fetcher。fetcher 可以是任何返回数据的异步函数,你可以使用原生的fetch或Axios之类的工具。

基于请求的状态,这个hook返回2个值:data 和 error。

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论