SWR 用于数据请求的 React Hooks 库

叁歲伎倆 2023-01-22 09:46 98阅读 0赞

#### SWR ####

用于数据请求的 React Hooks 库

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

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

#### 概览： ####

import useSWR from 'swr'
    
    function Profile() {
      const { data, error } = useSWR('/api/user', fetcher)
    
      if (error) return <div>failed to load</div>
      if (!data) return <div>loading...</div>
      return <div>hello {data.name}!</div>
    }

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

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

#### 特性： ####

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

面向 Jamstack  
极速、轻量、可重用的 数据请求  
内置 缓存 和重复请求去除  
实时 体验  
传输和协议不可知  
TypeScript ready  
React Native  
SWR 涵盖了性能，正确性和稳定性的各个方面，以帮你建立更好的体验：

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

文档地址：[SWR文档][SWR]

[SWR]: https://swr.bootcss.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，98人围观）

还没有评论，来说两句吧...

相关阅读

相关 React Hook的了解

一、 React Hook 的简介: Hook 是React 16.8的新增特性，它可以让你在不编写class 的情况下使用statet 以及其他的React特性，H

￡神魔★判官ぃ/ 2023年06月22日 03:19/ 0 赞/ 42 阅读

相关 SWR 用于数据请求的 React Hooks 库

SWR 用于数据请求的 React Hooks 库 “SWR” 这个名字来自于 stale-while-revalidate：一种由 HTTP RFC 5861 推广的

叁歲伎倆/ 2023年01月22日 09:46/ 0 赞/ 99 阅读

相关奇舞周刊第 397 期：从 SWR 开始—一窥现代请求 hooks 设计模型

> 记得点击文章末尾的“ 阅读原文 ”查看哟~ > > 下面先一起看下本期周刊摘要吧~ 奇舞推荐 ■ ■ ■ [从 SWR 开始—一窥现代请求 hooks

╰半橙微兮°/ 2023年01月21日 07:20/ 0 赞/ 14 阅读

相关 react-hook

文章目录 react-hook 一、前言二、useState ：状态钩子 2.1 useState 函数式更新

╰+攻爆jí腚メ/ 2023年01月05日 01:17/ 0 赞/ 261 阅读

相关 react hooks

文章目录 react-hook 1. useState ：状态钩子函数式更新 2. useEffect ：副作用钩子

港控/mmm°/ 2022年12月29日 09:17/ 0 赞/ 207 阅读

相关拯救react的hooks：react的问题和hooks的作用

react组件和react组件逻辑复用 react是一个视图层组件方案，最核心的功能就是绑定视图与数据和逻辑，实现响应式的渲染。react的组件最核心的就是渲染出的Vdo

我不是女神ヾ/ 2022年10月01日 05:50/ 0 赞/ 219 阅读

相关 React Hooks 梳理

自 React 16.8 发布以后，在已有项目中，把 package.json 中的 react 和 react-dom 版本一升，就可以抄起 Hooks 开干了。笔者目前已经

左手的ㄟ右手/ 2022年03月07日 13:52/ 0 赞/ 325 阅读

相关 react-hooks: custom hooks

memberEntitiy: export interface MemberEntity { id: number; name: stri

待我称王封你为后i/ 2021年12月24日 13:55/ 0 赞/ 374 阅读

相关 react hooks 笔记

1. 建议安装以上版本： "dependencies": { "react": "^16.7.0-alpha.2", "react-d

心已赠人/ 2021年12月21日 00:13/ 0 赞/ 309 阅读

相关 React Hook

-------------------- Hook简介 1. Hook专门用于增强函数组件的功能（Hook在类组件中是不能使用的），使之理论上可以成为类组件的替代品

￡神魔★判官ぃ/ 2021年09月02日 05:49/ 0 赞/ 446 阅读