SWR: 高效数据获取的React Hooks解决方案

穆声淼Germaine

于 2024-08-15 09:16:47 发布

阅读量684

点赞数 5

本文链接：https://blog.csdn.net/gitblog_01134/article/details/141207408

版权

SWR: 高效数据获取的React Hooks解决方案

swr项目地址:https://gitcode.com/gh_mirrors/swr/swr

一、项目介绍

SWR概述

SWR是React的一个Hooks库，其名字源自于HTTP缓存策略中的“Stale While Revalidate”。这一策略在HTTP RFC 5861中被广泛推崇。SWR的核心理念在于当请求初次发起时，先从缓存中读取旧数据(即stale数据)，随后异步发送请求并验证缓存的有效性（revalidate），最后更新数据。

核心优势

数据获取简化: 使用一个Hook即可大幅简化你的项目中的数据获取逻辑。
全面优化: SWR在速度、准确性以及稳定性方面进行了全面覆盖，有助于构建更优质的应用体验。
实时体验与网络恢复: 提供了聚焦重验、网络恢复重验等特性，确保实时性和响应能力。
额外功能: 包括轮询、分页、滚动位置恢复、服务器端渲染（SSR）和静态站点生成（SSG）、本地突变等功能。

技术栈兼容

运输协议与协议不可知论
内置缓存和请求去重机制
兼容React Suspense
TypeScript支持
支持React Native

二、项目快速启动

首先，你需要将SWR引入到你的项目中。可以通过以下命令进行安装：

npm install swr
# 或者
yarn add swr

接下来，我们通过示例展示如何在一个组件中使用SWR:

import useSWR from 'swr';

function Profile() {
    // 第一个参数通常是你请求数据的API地址
    const { data, error } = useSWR('/api/user', fetcher);

    if (error) return <div>加载失败</div>;
    if (!data) return <div>正在加载...</div>;

    return (
        <div>
            欢迎{data.name}
        </div>
    );
}

// 定义fetcher函数，用于数据获取
const fetcher = async url => {
    const response = await fetch(url);
    const json = await response.json();
    return json;
};

该示例中，useSWR接受两个参数: 数据请求的关键标识(key)及一个fetcher函数。key通常是请求API的URL，而fetcher则负责具体的数据获取逻辑。