React Cache 機能を理解する-jsチュートリアル-php.cn

React Cache 機能を理解する

WBOY

リリース： 2024-09-12 18:15:32

オリジナル

1050 人が閲覧しました

Understanding the React Cache function

React のエコシステムが拡大するにつれ、データの取得を最適化するためのより強力なツールの 1 つがキャッシュ機能です。この組み込み機能により、サーバーデータを効果的に管理および保存し、冗長なネットワークリクエストを削減し、アプリ全体のパフォーマンスを向上させるなど、多くのことを行うことができます。

この記事では、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 のキャッシュ機能はサーバーコンポーネントでのみ使用することを目的としていることに注意することが重要です。キャッシュを呼び出すたびに、新しいメモ化された関数が作成されます。つまり、同じ関数でキャッシュを複数回呼び出すと、同じキャッシュを共有しない個別のメモ化されたバージョンが作成されます。

もう 1 つ注意すべき点は、キャッシュ関数は成功した結果とエラーの両方をキャッシュすることです。したがって、関数が特定の引数に対してエラーをスローした場合、そのエラーはキャッシュされ、同じ引数を使用した後続の呼び出し時に再スローされます。

この機能は、パフォーマンスと効率を向上させるための React の広範な戦略の一部であり、仮想 DOM や useMemo フックや useCallback フックなどの既存のメカニズムを補完し、コンポーネントのレンダリングと関数参照を最適化するメモ化技術も採用しています。

キャッシュ機能のメリット

React のキャッシュ機能を使用するメリットは、主にパフォーマンスの最適化、特に不必要な計算とデータのフェッチ操作の削減を中心に展開されます。以下にキャッシュ機能の主な利点をいくつか示します:

アプリケーションパフォーマンスの向上: キャッシュは、複数のコンポーネント間でキャッシュされたデータを再利用することで、必要なサーバーリクエストの数を減らすのに役立ちます。これにより、アプリケーションがデータの取得や計算を待つ時間が短縮されるため、応答時間が短縮され、ユーザーエクスペリエンスがよりスムーズになります。
効率的なデータフェッチ: データフェッチを伴うシナリオ、特にサーバー側のレンダリングまたは静的生成コンテキストでは、キャッシュによってサーバーからフェッチする必要があるデータの量を大幅に削減できます。これは、同じデータが頻繁に要求されるアプリケーションや、データの取得にパフォーマンスの点でコストがかかるアプリケーションで特に有益です。
减少服务器负载：通过从缓存提供数据而不是向服务器发出新请求，缓存有助于更均匀地分配负载。这可以提高后端服务的可扩展性和可靠性，因为它们不会被频繁的相同请求淹没。
增强的用户体验：更快的加载时间和减少的延迟有助于提供更好的用户体验。用户可以更快地与应用程序交互，因为应用程序花费更少的时间来获取或计算数据。
对高级缓存策略的支持：React 的缓存功能补充了其他缓存机制和策略，例如记忆化（useMemo）和回调记忆化（useCallback）。这些工具共同提供了优化 React 应用程序的综合方法，使开发人员能够根据特定需求微调性能。

何时使用缓存功能

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

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