当前位置：首页 > 文章列表 > 文章 > 前端 > 了解 React Cache 功能

了解 React Cache 功能

来源：dev.to 2024-09-12 20:00:59 0浏览收藏

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《了解 React Cache 功能》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

了解 React Cache 功能

随着react生态系统的不断扩大，优化数据获取的更强大的工具之一就是缓存功能。此内置功能允许您执行许多操作，例如有效管理和存储服务器数据、减少冗余网络请求以及提高整体应用程序性能。

在本文中，我们将了解 react 中的缓存功能、它的好处以及如何使用它。

什么是react缓存功能

react 发布的缓存功能是为了优化性能而设计的。它是通过在将相同的参数传递给函数时避免不必要的计算来实现的。这可以通过一种称为记忆的机制来实现，即存储函数调用的结果，并在相同的输入再次发生时重新使用。

react 的缓存功能有助于防止函数使用相同的参数重复执行，从而节省计算资源并提高应用程序的整体效率。

要使用缓存函数，您需要用缓存包装目标函数，react 负责存储函数调用的结果。当使用相同的参数再次调用包装的函数时，react 首先检查缓存。如果这些参数的结果存在于缓存中，它将返回缓存的结果，而不是再次执行该函数。

此行为确保函数仅在必要时运行，即当参数与之前看到的参数不同时。

这是一个简单的示例，演示如何使用 react 的缓存功能在从天气应用程序获取数据时跳过重复的工作：

import { cache } from 'react';
import { Suspense } from 'react';

const fetchWeatherData = async (city) => {
  console.log(`Fetching weather data for ${city}...`);
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 2000));
  return { 
    temperature: Math.round(Math.random() * 30),
    conditions: ['Sunny', 'Cloudy', 'Rainy'][Math.floor(Math.random() * 3)]
  };
};

const getCachedWeatherData = cache(fetchWeatherData);

async function WeatherWidget({ city }) {
  const weatherData = await getCachedWeatherData(city);
  return (
    <div>
      <h2>Weather in {city}</h2>
      <p>Temperature: {weatherData.temperature}°C</p>
      <p>Conditions: {weatherData.conditions}</p>
    </div>
  );
}

function WeatherDashboard() {
  return (
    <div>
      <Suspense fallback={<div>Loading New York weather...</div>}>
        <WeatherWidget city="New York" />
      </Suspense>
      <Suspense fallback={<div>Loading London weather...</div>}>
        <WeatherWidget city="London" />
      </Suspense>
      <Suspense fallback={<div>Loading New York weather...</div>}>
        <WeatherWidget city="New York" /> {/* Duplicate */}
      </Suspense>
      <Suspense fallback={<div>Loading Tokyo weather...</div>}>
        <WeatherWidget city="Tokyo" />
      </Suspense>
    </div>
  );
}

export default WeatherDashboard;

在上面的代码中，缓存函数应用于 fetchweatherdata，创建了一个新函数 getcachedweatherdata 来存储天气数据获取的结果。然后，在 weatherwidget 组件中使用此缓存函数来检索不同城市的天气信息。

weatherdashboard 组件呈现 weatherwidget 的多个实例，其中包括纽约的重复实例，这是故意的。这是缓存机制的关键概念证明，因为它可以通过重用第一次调用的缓存结果来防止在渲染周期内多次请求相同数据时出现冗余且昂贵的操作，从而避免不必要的网络请求。

这种缓存机制有几个优点：它减少了 api 调用的次数，从而提高了性能并降低了服务器负载；它确保请求相同信息的组件之间的数据一致性；它通过自动处理潜在的重复请求来简化组件代码。

需要注意的是，react 的缓存功能仅适用于服务器组件。每次对缓存的调用都会创建一个新的记忆函数，这意味着使用同一函数多次调用缓存将导致产生不共享相同缓存的单独记忆版本。

还有一点需要注意的是，缓存函数会缓存成功的结果和错误的结果。因此，如果函数对某些参数抛出错误，该错误将被缓存，并在使用相同参数的后续调用时重新抛出。

此功能是 react 提高性能和效率的更广泛策略的一部分，补充了虚拟 dom 以及 usememo 和 usecallback 挂钩等现有机制，这些机制还采用记忆技术来优化组件渲染和函数引用。

缓存功能的好处

使用 react 缓存功能的好处主要围绕性能优化，特别是减少不必要的计算和数据获取操作。以下是缓存功能的一些主要优点：

提高应用程序性能：缓存有助于通过跨多个组件重用缓存数据来减少所需的服务器请求数量。这会带来更快的响应时间和更流畅的用户体验，因为应用程序等待获取或计算数据的时间更少。
高效数据获取：在涉及数据获取的场景中，尤其是在服务器端渲染或静态生成上下文中，缓存可以显着减少需要从服务器获取的数据量。这对于频繁请求相同数据或数据获取在性能方面成本较高的应用程序特别有用。
减少服务器负载：通过从缓存提供数据而不是向服务器发出新请求，缓存有助于更均匀地分配负载。这可以提高后端服务的可扩展性和可靠性，因为它们不会被频繁的相同请求淹没。
增强的用户体验：更快的加载时间和减少的延迟有助于提供更好的用户体验。用户可以更快地与应用程序交互，因为应用程序花费更少的时间来获取或计算数据。
对高级缓存策略的支持：react 的缓存功能补充了其他缓存机制和策略，例如记忆化（usememo）和回调记忆化（usecallback）。这些工具共同提供了优化 react 应用程序的综合方法，使开发人员能够根据特定需求微调性能。

何时使用缓存功能

您可以在需要时使用缓存功能：

memoize 昂贵的数据获取：如果您的服务器组件依赖于从 api 获取数据或执行复杂的计算，则使用缓存包装数据获取功能可以显着提高性能。对于相同的参数，该函数只会执行一次，后续渲染将使用缓存的结果。
预加载数据：您可以利用缓存在组件渲染之前预加载数据。这对于需要在初始渲染时立即可用的关键数据特别有用。
跨组件共享结果：当多个服务器组件需要从服务器获取相同的数据时，使用缓存可确保发出单个请求，并且结果在所有组件之间共享，从而减少冗余服务器调用。