SWR是用于数据请求的ReactHooks库。
“SWR”这个名字来自于 stale-while-revalidate:一种由 HTTPRFC5861 推广的HTTP缓存失效策略。这种策略首先从缓存中返回数据(过期的),同时发送fetch请求(重新验证),最后得到最新数据。
使用SWR,组件将会不断地、自动获得最新数据流。UI也会一直保持快速响应。
特性
仅需一行代码,你就可以简化项目中数据请求的逻辑,并立即拥有以下这些不可思议的特性:
极速、轻量、可重用的 数据请求内置 缓存 和重复请求去除实时 体验传输和协议不可知支持SSR/ISR/SSGTypeScriptreadyReactNativeSWR涵盖了性能,正确性和稳定性的各个方面,以帮你建立更好的体验:
快速页面导航间隔轮询数据依赖聚焦时重新验证网络恢复时重新验证本地缓存更新(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。
评论