React Cache 機能を理解する

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 アプリケーションを最適化するための包括的なアプローチが提供され、開発者が特定のニーズに基づいてパフォーマンスを微調整できるようになります。

キャッシュ機能を使用する場合

次のような場合にキャッシュ機能を使用できます。

• 高価なデータ フェッチをメモ化する: サーバー コンポーネントが API からのデータ フェッチや複雑な計算の実行に依存している場合、データ フェッチ関数をキャッシュでラップすると、パフォーマンスが大幅に向上します。この関数は同じ引数に対して 1 回だけ実行され、その後のレンダリングではキャッシュされた結果が使用されます。

• データのプリロード: キャッシュを利用して、コンポーネントがレンダリングされる前にデータをプリロードできます。これは、最初のレンダリングですぐに利用できる必要がある重要なデータに特に役立ちます。

• コンポーネント間で結果を共有: 複数のサーバー コンポーネントがサーバーから取得した同じデータを必要とする場合、キャッシュを使用すると単一のリクエストが確実に行われ、結果がすべてのコンポーネント間で共有されるため、冗長性が削減されます。サーバー呼び出し。

結論

Next.js のキャッシュ機能は、React の組み込みキャッシュ機能と組み合わせることで、アプリケーションでのデータの取得とコンポーネントのレンダリングを最適化するための強力なツールキットを提供します。データと計算を戦略的にキャッシュすることで、パフォーマンスを大幅に向上させ、不必要な API 呼び出しを減らし、ユーザー エクスペリエンスを向上させることができます。

React のキャッシュ機能は実験的な機能であり、変更される可能性があることを覚えておいてください。最新の情報と使用ガイドラインについては、常に最新の React ドキュメントを参照してください。

以上がReact Cache 機能を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。