use SWR为什么能成为我的最爱React库？

全文共2355字，预计学习时长12分钟

图源：unsplash

在过去的几个月里，我一直在开发Next JS应用程序。应用程序使用axiosto进行API调用，然后用unstated next作为状态解决方案。

有很多API调用，我们不希望用户体验太多加载屏幕。因此，我们将axios调用的结果存储在未声明的存储中。但我们遇到了一个问题，商店本身变得越来越复杂。这是有些页面依赖于几个API调用，有些API调用依赖于其他API调用的结果。

一周一周地过去，一些不知名的存储变得越来越笨重。我们开始遇到奇怪错误，出现了我们自制的缓存逻辑难以处理罕见的边缘情况。一定有更好的办法。没错，确实有，恰巧它就是由Vercel——Next JS的创造者制作的。

Enter SWR

SWR的名字来自stale-while-revalidate，是一种在前端领域越来越流行的缓存策略。它能够立即加载缓存的内容，同时刷新该内容，以便提供更新的内容。

对我们来说，这是性能和用户体验之间的完美权衡。

useSWR —如何使用它?

图源：unsplash

useSWR是一个由Vercel制作的React Hook库。它从API或其他外部源获取数据，然后将数据保存在缓存中，并呈现数据。先来看一个React组件的示例，该组件从JSON服务器获取todo列表并呈现它们：

import React from"react";
import "./App.css";const todosEndpoint = "http://localhost:3001/todos";const TodoApp = () =>{const [todos, setTodos] =React.useState([]);  React.useEffect(()=> {const getData = async () => {const response = awaitfetch(todosEndpoint);const data = await response.json();setTodos(data);};    getData();}, []);  return (<div className="App">{todos.map((todo) => (<div key={todo.id}>{todo.title}</div>))}</div>);
};export default TodoApp;

接下来看看同一个组件，这次重构为useswr：

import React from"react";
import useSWR from "swr";const todosEndpoint = "http://localhost:3001/todos";const getData = async ()=> {const response = awaitfetch(todosEndpoint);return await response.json();
};const TodoApp = () => {const { data: todos } =useSWR(todosEndpoint, getData);return (<div>{todos && todos.map(todo=> (<divkey={todo.id}>{todo.title}</div>)}</div>);
};export default TodoApp;

如你所见，它看起来与前面的实现非常相似。

本例中使用useSWR（key，fetcher，options）来获取todo列表。useSWR使用该密钥进行缓存，例子中使用了todos端点。对于fetcher，传入了一个异步函数来获取todo列表。

需要注意的是，useSWR对于如何获取数据是不敏感的。你可以使用任何你喜欢的异步数据获取策略，可以使用fetch、axios甚至GraphQL。只要函数异步返回数据，useSWR就没问题。

调用useSWR将返回以下参数：

· data：由获取程序解析的给定密钥的数据（如果尚未加载，则未定义）

· error：取数器抛出的错误

· isvaliding：boolean表示是否有正在进行的请求或重新验证

· mutate（data?，shouldRevalidate）：更改缓存数据的函数

图源：pixabay

来看一个更复杂的例子，它使用了useSWR返回的更多参数。在本例中获取一个todo，并呈现一个复选框来切换todo的完成状态。单击复选框时，发出一个PUT请求来更新todo，并调用mutate来更新useSWR的缓存。

import React from"react";
import useSWR from "swr";
import "./App.css";const todosEndpoint = "http://localhost:3001/todos";const getTodo = async(id) => {const response = awaitfetch(`${todosEndpoint}/${id}`);return await response.json();
};const updateTodo = async (id, todo) => {const response = awaitfetch(`${todosEndpoint}/${id}`, {method: "PUT",headers: {"Content-type":"application/json; charset=UTF-8",},body: JSON.stringify(todo),});return await response.json();
};const TodoApp = () => {const todoId = 1;const key =`${todosEndpoint}/${todoId}`;  const {data: todo, mutate } = useSWR(key, () =>getTodo(todoId)); const toggleCompleted = async () => {const newTodo = {...todo,completed: !todo.completed,};await updateTodo(todoId, newTodo);mutate(newTodo);}; if (!todo) {return<div>Loading...</div>;} return (<div><p>{todo.title}</p><div><inputtype="checkbox"id="completed"name="completed"value="completed"checked={todo.completed}onChange={toggleCompleted}/><labelhtmlFor="completed">Completed</label></div></div>);
};export default TodoApp;

使用mutate是提高web应用程序感知性能的一个好方法，可以对数据应用本地更改并更新视图，而无需等待远程数据源更新。useSWR甚至会重新验证并替换为后台的最新数据。

为什么需要库？

图源：unsplash

你可以问问自己这个问题。应用程序中可能已经有了状态解决方案，但你无法感受到使用第三方库进行数据获取和缓存这样看似简单的操作的价值。

缓存数据是很困难的。而且随着应用程序越来越大，它只会变得越来越难。你将遇到边缘案例，遇到复杂的存储和提供商，这些存储和提供商很难理解也很难维护，漏洞也会不知道从哪儿突然冒出来。

正如菲尔·卡尔顿所说：计算机科学中只有两件难事，缓存失效和命名问题。

与其推出自己的数据获取解决方案，为什么不依赖React生态系统中最受尊敬的公司之一构建的经过实战测试的解决方案呢？

useSWR对我们有什么用？

将应用程序迁移到使用useSWR进行数据获取给了我们许多好处：

1. 它能使我们删除代码。我最喜欢打开的请求是删除代码而不是添加代码。应用程序中的代码越少，出现错误的机会就越少。随着年龄的增长，我开始越来越欣赏简单。它允许我们删除整个未声明的存储，使应用程序更简单、更容易理解。

2. 感知性能有所提高。这个应用看起来和感觉都很快。用户对此表示赞赏，反馈也很好。

3. 它使新开发人员更容易加入到项目中。useSWR和大多数开源项目一样，有很好的文档。推出我们自己的解决方案意味着我们需要编写文档，并教会项目新手如何处理数据获取。用了SWR，就不必这样做了。

图源：unsplash

4. 它能够变难为易。我们的应用程序和其他大多数应用程序一样，有很多API调用。其中一些API调用依赖于其他API调用的结果。使用useSWR，很容易编写依赖获取的hooks。

5. 它刷新陈旧的数据。useSWR在焦点上刷新过时的数据。这意味着用户总能拥有最新版本的数据，不需要加载时间。

useSWR对应用程序产生了巨大的影响，它简化了代码，改善了用户体验。我的TOP 1喜欢的React库，必须推荐给你。

一起分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”

（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）

use SWR为什么能成为我的最爱React库？相关推荐

React hooks中swr的原理和源码解析
授权转载自:JonyYu https://github.com/forthealllight/blog/issues/61 swr是一个hook组件,可以作为请求库和状态管理库,本文主要介绍一下在项目 ...
【干货】写给初中级前端的高级进阶指南
以下文章来源于掘金开发者社区,作者晨曦时梦见兮我曾经一度很迷茫,在学了Vue.React的实战开发和应用以后,好像遇到了一些瓶颈,不知道该怎样继续深入下去.相信这也是很多一两年经验的前端工程师所遇到 ...
定时器精度对性能的影响_Comet CAA-500天线分析仪 | 高精度模拟十字针同时显示SWR和阻抗...
Comet CAA-500 MK2天线分析仪高精度模拟十字针同时显示SWR和阻抗. 全彩色TFT LCD显示屏提供图形和数字SWR以及R和X值的总阻抗. 特征: 自动扫描模式在LCD显示屏上自动绘 ...
SWR：最具潜力的 React Hooks 数据请求库
原文链接:https://zhuanlan.zhihu.com/p/89570321 作者:飞冰-chenbin92 说明:本文内容主要来源于 SWR 的官方文档以及 GitHub zeit/sw ...
swr，解决 React 项目 API 调用的最好方案
swr,解决 React 项目 API 调用的最好方案搜了一圈,感觉 swr 源码学习的文章不少,但是好像使用方面的确实有限,所以-- 目前体感是觉得使用 swr 会比 redux-saga 要舒服 ...
缓存冲突：SWR vs. TanStack Query for React
大多数 React 应用程序与远程数据源通信以保存和检索数据记录. 现在的 Web 应用程序开发团队倾向于使用 REST 和类似 GraphQL 的通信模式来实现他们的远程数据源接口. 然后,前端开发 ...
React中使用SWR处理数据请求
React中使用SWR处理数据请求在做React项目开发的时候,我们一般都会直接使用axios插件或者fetch进行数据的获取.但是这一次给大家介绍一个插件库SWR,算是网络数据请求的一个补充吧. ...
React Api请求最佳实践react-query3使用教程（比swr更好用更强大）
前言在请求中,首先 axios 作为请求底层封装库,统一拦截,处理发送请求头和接收的错误响应. 那么更高一层的封装可以选择 swr 或者 react-query,目前 react-query 已经进 ...
vue创建的挂钩中出错_建立自己的Vue 3 SWR挂钩
vue创建的挂钩中出错 Version 3 is just around the corner and the composition API is bringing some new excitin ...

use SWR为什么能成为我的最爱React库？

use SWR为什么能成为我的最爱React库？相关推荐

最新文章

热门文章