ReactJS - cache() 函数

在 React 18 中，有一个名为“cache 函数”的新特性。此函数会记住当传递特定输入时发生的情况。因此，如果我们在 React 中处理某些内容时使用相同的函数和相同的参数，它不会重复执行任务。相反，它将快速返回记住的结果，从而节省用户的时间和资源。这类似于我们的计算机记住某些内容以便更高效地执行操作。

语法

const cachedFunc = cache(func);

参数

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

返回值

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

示例

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

import { cache } from 'react';

// Calculate the square of a number and cache the result
export const square = cache(async (num) => {
   console.log(`Calculating the square of ${num}`);
   return num * num;
});

const result1 = await square(5); // Calculate and cache the result
const result2 = await square(5); // Return the memoized (cached) result

console.log(result1); // Calculating the square of 5, 25
console.log(result2); // 25 (No recalculation, just returns the cached result)

// Use the square function
const result3 = await square(3); // This will calculate and cache the result.
console.log(result3); // Output: Square of 3, 9

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

示例 - 使用 cache 避免重复工作

这是另一个显示在 React 中使用 cache 函数的示例：

cache 函数用于保存名为 calculateProductStats 函数的结果。cache 创建的 getProductStats 方法用于收集各种商品的统计数据。

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

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

const getProductStats = cache(calculateProductStats);

function ProductDetails({product}) {
   const stats = getProductStats(product);
   // write code here
}

function SalesDetails({products}) {
   for (let product in products) {
      const stats = getProductStats(product);
      // write code here
   }
   // write code here
}

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

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

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

示例 - 预加载数据

假设我们正在创建一个网页，并且需要从数据库中获取一些数据以在网页上显示。此数据提取可能需要一些时间。我们可以使用新的 cache 函数，甚至在我们不需要数据之前就开始在后台获取数据。

这是一个示例：

假设我们有一个 getUser 函数，该函数从数据库中收集用户的数据。即使在我们不需要用户数据之前，我们也可以通过在 Page 组件中执行 getUser(id) 来开始获取它。在数据检索发生的同时，我们可以在组件中执行其他操作。

然后通过在 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 }) {
   // Fetch product details
   getProductDetails(productId);

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

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

局限性

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

总结

“cache 函数”是 React 18 中添加的一个新特性，它允许开发人员根据声明的输入轻松存储和检索函数的结果。这可以节省重复计算并通过快速返回缓存的结果来提高效率，从而节省重复计算，提高效率。

reactjs_reference_api.htm

打印页面