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

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

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

这是另一个示例，展示了 React 中缓存函数：cache() 的使用 -

缓存函数：cache() 用于保存名为 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);
	 	// write code here
}

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

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

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

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

示例 - 预加载数据

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

下面是一个例子 -

假设我们有一个 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 }) {
	 	// Fetch product details
	 	getProductDetails(productId);

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

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

局限性

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

总结

“缓存函数：cache() ”是 React 18 中添加的一项新功能，它允许开发人员根据声明的输入轻松存储和检索函数的结果。这样可以节省重复计算，并在遇到相同的输入时快速返回缓存结果，从而提高效率。

本页
上一页
下一页