ReactJS - cache()

更新于 2025/3/23 1:52:17

在 React 18 中，有一个名为"缓存函数"的新功能。该函数会记住向其传递特定输入时发生的情况。因此，如果我们在 React 中处理某些事情时使用具有相同参数的相同函数，它不会重复该工作。相反，它会快速返回记住的结果，从而节省用户的时间和资源。这类似于我们的计算机记住东西以便更高效地执行。

语法

const cachedFunc = cache(func);

参数

func − func 是一个可以使用某些信息执行任务的函数，它可以处理我们提供的任何类型的信息。

返回值

当我们将这个缓存版本的函数与特定输入一起使用时，它会检查它是否已经为这些输入存储了结果。如果有，它会给我们这个结果，而无需再次运行该函数。但如果它没有存储结果，它会使用这些输入运行原始函数，将结果保存在其内存中，然后给我们这个结果。因此，原始函数仅在缓存中没有保存结果时运行。

示例

以下是如何使用 React 18 中的缓存功能的示例。在此示例中，我们将创建一个简单的缓存来计算数字的平方。

import { cache } from 'react';

// 计算数字的平方并缓存结果
export const square = cache(async (num) => {
   console.log(`Calculating the square of ${num}`);
   return num * num;
});

const result1 = await square(5); // 计算并缓存结果
const result2 = await square(5); // 返回记忆化(缓存)结果

console.log(result1); // 计算 5, 25 的平方
console.log(result2); // 25(不重新计算，只返回缓存结果)

// 使用 square 函数
const result3 = await square(3); // 这将计算并缓存结果。
console.log(result3); // 输出:3, 9 的平方

在此示例中，我们创建了一个 square 函数，用于计算并缓存数字的平方。当我们在同一渲染过程中使用相同的输入(例如 5)调用它时，它会返回缓存的结果，从而减少重新计算的需要。当我们使用不同的输入(例如 3)再次调用它时，它会计算并缓存新的结果。

示例 − 为避免重复工作，请使用缓存

这是另一个示例，展示了 React − 中缓存函数的使用

缓存函数用于保存名为 calculateProductStats 的函数的结果。缓存创建的 getProductStats 方法用于收集各种项目的统计信息。

ProductDetails 组件使用 GetProductStats 检索单个产品的数据，而 SalesDetails 组件使用它来获取报告中多个项目的数据。这展示了我们如何根据需求将记忆应用于各种方法和组件。

import { cache } from 'react';
import calculateProductStats from 'lib/product';

const getProductStats = cache(calculateProductStats);

function ProductDetails({product}) {
   const stats = getProductStats(product);
   // 在这里写入代码
}

function SalesDetails({products}) {
   for (let product in products) {
      const stats = getProductStats(product);
      // 在这里写入代码
   }
   // 在这里写入代码
}

如果 ProductDetails 和 SalesReport 中都呈现了相同的产品对象，则这两个组件可以共享工作，并且只为该产品调用一次 calculateProductStats。

假设 ProductDetails 是第一个被呈现的。它将调用 getProductStats 并查看是否存在缓存结果。将发生缓存未命中，因为这是第一次使用该产品调用 getProductStats。然后 getProductStats 将使用该产品调用 calculateProductStats 并将结果保存到缓存中。

当 SalesReport 生成其产品列表并找到相同的产品对象时，它将调用 getProductStats 并从缓存中读取结果。

示例 − 预加载数据

假设我们正在创建一个网页，需要从数据库获取一些数据以在其上显示。此数据提取可能需要一些时间。我们可以使用新的缓存功能在需要数据之前就开始在后台获取数据。

下面是一个例子 −

假设我们有一个 getUser 函数，它从数据库收集用户的数据。甚至在我们需要用户的数据之前，我们就通过执行 getUser(id) 开始在 Page 组件中获取数据。在数据检索过程中，我们可以在组件中执行其他操作。

然后通过在 Profile 组件中再次调用 getUser 来获取用户的信息。如果 Page 组件的初始调用已经获取并缓存了用户的数据，则 Profile 组件可以使用该缓存数据，而不必执行另一个缓慢的数据库访问。这会加快页面速度，因为它最大限度地减少了获取数据的等待时间。

import { cache } from 'react';
import fetchProductDetails from 'api/products';

const getProductDetails = cache(async (productId) => {
   return await fetchProductDetails(productId);
});

function ProductInfo({ productId }) {
   // 获取产品详细信息
   getProductDetails(productId);

   return (
      <div>
         <h2>Product Information</h2>
         {getProductDetails(productId).description}
      </div>
   );
}

在此示例中，我们有一个 ProductInfo 组件，它使用缓存函数在后台开始接收产品详细信息。这样，当我们需要数据时，它已经在缓存中，从而减少了在页面上显示产品信息所需的时间。

限制

在 React 中处理服务器请求时，每次发出新的服务器请求时，都会清除所有记忆函数的函数缓存结果的内存存储(缓存)。
每次我们使用缓存函数时，都会创建一个新的不同函数。因此，如果我们使用相同的原始函数多次调用缓存，我们会收到单独的记忆函数，并且这些记忆函数不会共享用于保存结果的相同内存存储。
缓存提供的记忆函数也会记住错误。如果原始函数对任何输入返回错误，则该错误将保留在内存中。因此，使用具有相同输入的记忆化函数将导致相同的错误，而无需重新运行该函数。
重要的是，缓存方法仅用于 React 中称为"服务器组件"的部分。它不适用于我们应用程序的其他部分。