- 理解 SWR 以及它在幕后的工作方式
- 如何在 React 和 TypeScript 中使用 SWR
- 在 React 中进行下一级数据获取：结合 SWR 和 React Suspense
- 使用 SWR 预取功能预取数据
- 使用 SWR 预取特性来实现数据分页
- 结语
从各种 API 有效地获取数据对于现在的几乎每一个 Web 应用来说都至关重要。
可能一开始，你会使用内置的 fetch 或 Axios 手动获取数据，但很快你就会遇到如处理缓存、错误处理和过时数据等挑战。随着你的应用程序的增长，管理状态和处理复杂的数据获取逻辑变得更加具有挑战性和耗时。
为了解决这些问题，创建了 SWR。SWR 代表“stale-while-revalidate”，它是一个强大的 React 数据获取库，提供了一种简单而优雅的方式来处理数据获取、缓存和错误处理，同时保持高性能。此外，它使我们能够使用 TypeScript，这是 JavaScript 的静态类型超集，可以提供额外的类型安全层。
在本文中，我们将深入探讨如何使用 SWR 和 TypeScript 在 React 中掌握数据获取，探索 SWR 的核心概念，并演示如何在 SWR 中使用 TypeScript 来处理数据获取、缓存和错误处理，同时保持高性能。我们还将提供实际示例和最佳实践，以便在你的 React 应用程序中进行高效和类型安全的数据获取，以及讨论像 React Suspense 这样的前沿特性在数据获取中的使用。
理解 SWR 以及它在幕后的工作方式
为了正确理解 SWR 到底是什么，我们从一个例子开始。
想象你在一个图书馆工作，为人们提供书籍。有时，人们会多次要求同一本书，这对你来说是一个耗时且重复的任务。如果你不得不一次又一次地从同一个地方拿书，你会花费大量的时间做同样的重复工作，这会给你的客户带来糟糕的体验，因为他们必须等你完成。
为了解决这个问题，你可以在一定的时间内记录下被请求的书籍，并将它们放在附近。这样，当人们要求同一本书时，你就可以立即提供，比每次都要寻找这本书要少费力，也更快。
在这个例子中，SWR 作为你的图书馆助手参与游戏，帮助你跟踪哪些书籍被频繁请求，并确保你只在需要的时候去书架上。
我们将在下一节深入介绍如何在 React 中使用 SWR，但是，对于这个解释，需要引入一些概念。
要在 React 中使用 SWR，我们需要使用一个名为 useSWR 的钩子，它根据 fetcher 函数的状态返回一些变量（在我们的例子中，这个函数将代表去书架上拿书的动作）。
const fetcher = (...args) => fetch(...args).then(res => res.json())
const {data, error, isLoading, isValidating} = useSWR(key, fetcher);
我们可以按照以下方式定义这些变量：
- data: 此变量代表书本本身。
- error: 如果由于某种原因你找不到这本书，此变量将包含原因。
- isLoading: 当你在去拿一本书的路上时，这个变量将有一个布尔值 true 。
- isValidating: 这个变量将类似于
isLoading,但是当你检查你的记录以确认你身边是否已经有这本书时,它的值将为true。从现在开始,你身边的这个位置将被称为cache。 - key: 代表客户想要的书。例如，它可能是标题。
我们可以在下一个图表中清楚地看到这一点。
结语
总的来说，数据获取是构建高性能和用户友好的 React 应用程序的一个重要方面。通过使用 SWR 和 TypeScript，开发者可以利用缓存、预获取和高级数据获取技术的力量，简化他们的数据获取代码并实现下一级的性能。此外，通过集成 React Suspense，开发者可以进一步提升他们的数据获取能力，并提供无缝的用户体验。