了解 React Cache 功能-js教程-PHP中文網

Understanding the React Cache function

Dengan berkembangnya ekosistem React, salah satu alatan yang lebih berkuasa untuk mengoptimumkan pengambilan data ialah fungsi cache. Ciri terbina dalam ini membolehkan anda melakukan banyak perkara seperti mengurus dan menyimpan data pelayan dengan berkesan, mengurangkan permintaan rangkaian yang berlebihan dan juga meningkatkan prestasi aplikasi keseluruhan.

Dalam artikel ini, kita akan melihat fungsi cache dalam React, faedahnya dan cara menggunakannya.

Apakah Fungsi cache React

Fungsi cache yang dikeluarkan oleh React direka untuk mengoptimumkan prestasi. Ia berbuat demikian dengan mengelakkan pengiraan yang tidak perlu apabila hujah yang sama dihantar ke fungsi. Ini boleh dilakukan melalui mekanisme yang dikenali sebagai memoisasi, di mana hasil panggilan fungsi disimpan dan digunakan semula jika input yang sama berlaku lagi.

Fungsi cache React membantu menghalang fungsi daripada dilaksanakan berulang kali dengan hujah yang sama, sekali gus menjimatkan sumber pengiraan dan meningkatkan kecekapan keseluruhan aplikasi.

Untuk menggunakan fungsi cache, anda membalut fungsi sasaran dengan cache, dan React menguruskan menyimpan hasil panggilan fungsi. Apabila fungsi yang dibalut dipanggil semula dengan hujah yang sama, React menyemak cache terlebih dahulu. Jika keputusan untuk argumen tersebut wujud dalam cache, ia mengembalikan hasil cache dan bukannya melaksanakan fungsi itu semula.

Tingkah laku ini memastikan bahawa fungsi hanya berjalan apabila perlu, iaitu, apabila hujah berbeza daripada yang dilihat sebelum ini.

Berikut ialah contoh mudah yang menunjukkan cara menggunakan fungsi cache React untuk melangkau kerja pendua apabila mengambil data daripada aplikasi cuaca:

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;

登入後複製

Dalam kod di atas, fungsi cache digunakan untuk fetchWeatherData, mencipta fungsi baharu getCachedWeatherData yang menghafal hasil pengambilan data cuaca. Fungsi cache ini kemudiannya digunakan dalam komponen WeatherWidget untuk mendapatkan maklumat cuaca untuk bandar yang berbeza.

Komponen WeatherDashboard memaparkan berbilang kejadian WeatherWidget, termasuk pendua untuk New York, yang disengajakan. Ini berfungsi sebagai bukti konsep penting untuk mekanisme caching, kerana ia menghalang operasi mahal yang berlebihan apabila data yang sama diminta beberapa kali dalam kitaran pemaparan dengan menggunakan semula hasil cache daripada panggilan pertama, mengelakkan permintaan rangkaian yang tidak perlu.

Mekanisme caching ini mempunyai beberapa kelebihan: ia mengurangkan bilangan panggilan API, menghasilkan prestasi yang lebih baik dan beban pelayan yang lebih rendah; ia memastikan ketekalan data merentas komponen yang meminta maklumat yang sama; dan ia memudahkan kod komponen dengan mengendalikan kemungkinan permintaan pendua secara automatik.

Perlu ambil perhatian bahawa fungsi cache React bertujuan untuk digunakan dalam Komponen Pelayan sahaja. Setiap panggilan ke cache mencipta fungsi memoized baharu, bermakna memanggil cache berbilang kali dengan fungsi yang sama akan menghasilkan versi memori yang berasingan yang tidak berkongsi cache yang sama.

Perkara lain yang perlu diambil perhatian ialah fungsi cache menyimpan kedua-dua hasil dan ralat yang berjaya. Jadi, jika fungsi melemparkan ralat untuk argumen tertentu, ralat itu akan dicache dan dilemparkan semula pada panggilan berikutnya dengan argumen yang sama.

Ciri ini merupakan sebahagian daripada strategi React yang lebih luas untuk meningkatkan prestasi dan kecekapan, melengkapkan mekanisme sedia ada seperti DOM maya dan cangkuk useMemo dan useCallback, yang turut menggunakan teknik hafalan untuk mengoptimumkan pemaparan komponen dan rujukan fungsi.

Manfaat Fungsi cache

Faedah menggunakan fungsi cache React terutamanya berkisar pada pengoptimuman prestasi, khususnya dari segi mengurangkan pengiraan yang tidak perlu dan operasi pengambilan data. Berikut ialah beberapa faedah utama fungsi cache:

Peningkatan Prestasi Aplikasi: Caching membantu dalam mengurangkan bilangan permintaan pelayan yang diperlukan dengan menggunakan semula data cache merentas berbilang komponen. Ini membawa kepada masa tindak balas yang lebih pantas dan pengalaman pengguna yang lebih lancar, kerana aplikasi menghabiskan lebih sedikit masa menunggu data diambil atau dikira.
Pengambilan Data yang Cekap: Dalam senario yang melibatkan pengambilan data, terutamanya dalam pemaparan sebelah pelayan atau konteks penjanaan statik, cache boleh mengurangkan jumlah data yang perlu diambil daripada pelayan dengan ketara. Ini amat berfaedah dalam aplikasi yang data yang sama sering diminta atau pengambilan data yang mahal dari segi prestasi.
減少伺服器負載：透過從快取提供資料而不是向伺服器發出新請求，快取有助於更均勻地分配負載。這可以提高後端服務的可擴展性和可靠性，因為它們不會被頻繁的相同請求淹沒。
增強的使用者體驗：更快的載入時間和減少的延遲有助於提供更好的使用者體驗。用戶可以更快地與應用程式交互，因為應用程式花費更少的時間來獲取或計算資料。
對高階快取策略的支援：React 的快取功能補充了其他快取機制和策略，例如記憶化（useMemo）和回呼記憶化（useCallback）。這些工具共同提供了優化 React 應用程式的綜合方法，使開發人員能夠根據特定需求微調效能。

何時使用快取功能

您可以在需要時使用快取功能：

Memoize 昂貴的資料擷取：如果您的伺服器元件依賴從 API 取得資料或執行複雜的計算，則使用快取包裝資料擷取功能可以顯著提高效能。對於相同的參數，函數只會執行一次，後續渲染將使用快取的結果。
預先載入資料：您可以利用快取在元件渲染之前預先載入資料。這對於需要在初始渲染時立即可用的關鍵資料特別有用。
跨元件共享結果：當多個伺服器元件需要從伺服器取得相同的資料時，使用快取可確保發出單一請求，並且結果在所有元件之間共享，從而減少冗餘伺服器調用。