import React, { experimental_useCache, Suspense } from 'react';

// Simulace volání API (nahraďte skutečným koncovým bodem API)
const fetchUserData = async (userId) => {
  console.log(`Získávání uživatelských dat pro ID uživatele: ${userId}`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // Simulace latence sítě
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Nepodařilo se získat uživatelská data: ${response.status}`);
  }
  return response.json();
};

// Vytvoření verze funkce fetchUserData uložené v mezipaměti
const getCachedUserData = experimental_useCache(fetchUserData);

function UserProfile({ userId }) {
  const userData = getCachedUserData(userId);

  return (
    

      
Uživatelský profil
      
Jméno: {userData.name}
      
Email: {userData.email}
    
  );
}

function App() {
  return (
    Načítání uživatelských dat...

Vysvětlení:

1. Import experimental_useCache: Importujeme nezbytný hook z Reactu.
2. Definujte fetchUserData: Tato funkce simuluje získávání uživatelských dat z API. Nahraďte volání fiktivního API skutečnou logikou získávání dat. await new Promise simuluje latenci sítě, čímž se efekt ukládání do mezipaměti stává zřejmějším. Pro připravenost k produkci je zahrnuta obsluha chyb.
3. Vytvořte getCachedUserData: Používáme experimental_useCache k vytvoření verze funkce fetchUserData uložené v mezipaměti. Toto je funkce, kterou ve skutečnosti použijeme v naší komponentě.
4. Použijte getCachedUserData v UserProfile: Komponenta UserProfile volá getCachedUserData, aby získala uživatelská data. Protože používáme experimental_useCache, data se získají z mezipaměti, pokud jsou již k dispozici.
5. Zabalte se Suspense: Komponenta UserProfile je zabalena do Suspense, aby se zpracoval stav načítání, zatímco se data získávají. To zajišťuje plynulý uživatelský zážitek, i když načítání dat nějakou dobu trvá.
6. Vícenásobné volání: Komponenta App vykresluje dvě komponenty UserProfile se stejným userId (1). Druhá komponenta UserProfile použije data z mezipaměti, čímž se zabrání druhému volání API. Zahrnuje také další uživatelský profil s jiným ID, aby se demonstrovalo získávání dat, která nejsou v mezipaměti.

V tomto příkladu získá první komponenta UserProfile uživatelská data z API. Druhá komponenta UserProfile však použije data z mezipaměti, čímž se zabrání druhému volání API. To může výrazně zlepšit výkon, zejména pokud je volání API nákladné nebo pokud k datům přistupuje mnoho komponent.

Integrace se Suspense

experimental_useCache je navržen tak, aby bez problémů fungoval s funkcí Suspense v Reactu. Suspense vám umožňuje deklarativně zpracovávat stav načítání komponent, které čekají na načtení dat. Když používáte experimental_useCache ve spojení se Suspense, React automaticky pozastaví vykreslování komponenty, dokud nebudou data k dispozici v mezipaměti nebo nebudou stažena ze zdroje dat. To vám umožní poskytnout lepší uživatelskou zkušenost zobrazením náhradního uživatelského rozhraní (např. načítacího spinneru) během načítání dat.

Ve výše uvedeném příkladu komponenta Suspense obaluje komponentu UserProfile a poskytuje vlastnost fallback. Toto náhradní uživatelské rozhraní se zobrazí během získávání uživatelských dat. Jakmile budou data k dispozici, komponenta UserProfile se vykreslí se získanými daty.

React Server Components (RSCs) a experimental_useCache

experimental_useCache září, když se používá s React Server Components. V RSCs probíhá získávání dat na serveru a výsledky se streamují klientovi. experimental_useCache může výrazně optimalizovat získávání dat na straně serveru tím, že zajistí, že se data získají pouze jednou na požadavek, i když více komponent potřebuje stejná data.

Zvažte scénář, kdy máte serverovou komponentu, která potřebuje získat uživatelská data a zobrazit je ve více částech uživatelského rozhraní. Bez experimental_useCache byste mohli skončit se získáváním uživatelských dat vícekrát, což může být neefektivní. S experimental_useCache se můžete ujistit, že uživatelská data se získají pouze jednou a poté se uloží do mezipaměti pro následné použití ve stejném požadavku na server.

Příklad (Konceptuální příklad RSC):

// Serverová komponenta
import { experimental_useCache } from 'react';

async function fetchUserData(userId) {
  // Simulace získávání uživatelských dat z databáze
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulace latence dotazu databáze
  return { id: userId, name: `Uživatel ${userId}`, email: `user${userId}@example.com` };
}

const getCachedUserData = experimental_useCache(fetchUserData);

export default async function UserDashboard({ userId }) {
  const userData = await getCachedUserData(userId);

  return (
    

      
Vítejte, {userData.name}!
      
      
    
  );
}

async function UserInfo({ userId }) {
  const userData = await getCachedUserData(userId);
  return (
    

      
Informace o uživateli
      
Email: {userData.email}
    
  );
}

async function UserActivity({ userId }) {
  const userData = await getCachedUserData(userId);
  return (
    

      
Nedávná aktivita
      
{userData.name} zobrazil domovskou stránku.
    
  );
}

V tomto zjednodušeném příkladu jsou UserDashboard, UserInfo a UserActivity serverové komponenty. Všechny potřebují přístup k uživatelským datům. Použití experimental_useCache zajišťuje, že funkce fetchUserData je volána pouze jednou na požadavek serveru, i když se používá ve více komponentách.

Úvahy a potenciální nevýhody

I když experimental_useCache nabízí významné výhody, je důležité si uvědomit jeho omezení a potenciální nevýhody:

• Experimentální stav: Jako experimentální API podléhá experimental_useCache změnám nebo odstranění v budoucích verzích Reactu. Používejte jej opatrně v produkčním prostředí a buďte připraveni přizpůsobit svůj kód v případě potřeby. Sledujte oficiální dokumentaci Reactu a poznámky k vydání pro aktualizace.
• Invalidace mezipaměti: experimental_useCache neposkytuje vestavěné mechanismy pro invalidaci mezipaměti. Budete muset implementovat vlastní strategie pro invalidaci mezipaměti, když se změní základní data. To by mohlo zahrnovat použití vlastních hooků nebo poskytovatelů kontextu ke správě životnosti mezipaměti.
• Využití paměti: Ukládání dat do mezipaměti může zvýšit využití paměti. Mějte na paměti velikost dat, která ukládáte do mezipaměti, a zvažte použití technik, jako je odstraňování mezipaměti nebo vypršení platnosti, abyste omezili spotřebu paměti. Sledujte využití paměti ve své aplikaci, zejména v prostředích na straně serveru.
• Serializace argumentů: Argumenty předané funkci uložené v mezipaměti musí být serializovatelné. Je to proto, že experimental_useCache používá argumenty k vygenerování klíče mezipaměti. Pokud argumenty nejsou serializovatelné, mezipaměť nemusí fungovat správně.
• Ladění: Ladění problémů s ukládáním do mezipaměti může být náročné. Použijte nástroje pro protokolování a ladění ke kontrole mezipaměti a ověření, že se chová podle očekávání. Zvažte přidání vlastního ladění do vaší funkce fetchUserData, abyste sledovali, kdy se data získávají a kdy se načítají z mezipaměti.
• Globální stav: Vyhněte se používání globálního proměnlivého stavu v rámci funkce uložené v mezipaměti. To může vést k neočekávanému chování a ztížit uvažování o mezipaměti. Spoléhejte na argumenty funkce a výsledek uložený v mezipaměti, abyste udrželi konzistentní stav.
• Složité datové struktury: Buďte opatrní při ukládání složitých datových struktur do mezipaměti, zejména pokud obsahují cyklické reference. Cyklické reference mohou vést k nekonečným smyčkám nebo chybám přetečení zásobníku během serializace.

Strategie invalidace mezipaměti

Vzhledem k tomu, že experimental_useCache nezpracovává invalidaci, zde jsou některé strategie, které můžete použít:

• Ruční invalidace: Implementujte vlastní hook nebo poskytovatele kontextu pro sledování mutací dat. Když dojde k mutaci, invalidujte mezipaměť resetováním funkce uložené v mezipaměti. To zahrnuje ukládání verze nebo časového razítka, které se změní při mutaci, a kontrolu toho v rámci funkce `fetch`.

       
       import React, { createContext, useContext, useState, experimental_useCache } from 'react';
  
       const DataVersionContext = createContext(null);
  
       export function DataVersionProvider({ children }) {
         const [version, setVersion] = useState(0);
         const invalidate = () => setVersion(v => v + 1);
  
         return (
           
             {children}
           
         );
       }
  
       async function fetchData(version) {
          console.log("Získávání dat s verzí:", version)
          await new Promise(resolve => setTimeout(resolve, 500));
          return { data: `Data for version ${version}` };
       }
  
       const useCachedData = () => {
         const { version } = useContext(DataVersionContext);
         return experimental_useCache(() => fetchData(version))(); // Invokujte mezipaměť
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // Příklad použití:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return Invalidace mezipaměti
       }
  
       // Zabaľte svoju App pomocou DataVersionProvider
       // 
       //   
       //   
       // 
       
       

• Vypršení platnosti na základě času: Implementujte mechanismus vypršení platnosti mezipaměti, který automaticky invaliduje mezipaměť po určité době. To může být užitečné pro data, která jsou relativně statická, ale mohou se občas změnit.
• Invalidace založená na značkách: Spojte značky s daty uloženými v mezipaměti a invalidujte mezipaměť na základě těchto značek. To může být užitečné pro invalidaci souvisejících dat, když se změní určitý kus dat.
• WebSockets a aktualizace v reálném čase: Pokud vaše aplikace používá WebSockets nebo jiné mechanismy aktualizace v reálném čase, můžete tyto aktualizace použít k aktivaci invalidace mezipaměti. Když je přijata aktualizace v reálném čase, invalidujte mezipaměť pro ovlivněná data.

Osvědčené postupy pro použití experimental_useCache

Chcete-li efektivně využít experimental_useCache a vyhnout se potenciálním nástrahám, dodržujte tyto osvědčené postupy:

• Používejte jej pro nákladné operace: Používejte experimental_useCache pouze pro operace, které jsou skutečně nákladné, jako je získávání dat nebo složité výpočty. Ukládání levných operací do mezipaměti může ve skutečnosti snížit výkon kvůli režii správy mezipaměti.
• Definujte jasné klíče mezipaměti: Ujistěte se, že argumenty předané funkci uložené v mezipaměti jednoznačně identifikují data, která se ukládají do mezipaměti. To je zásadní pro zajištění správného fungování mezipaměti a pro to, aby se data nechtěně znovu nepoužívala. Pro argumenty objektu zvažte jejich serializaci a hashování, abyste vytvořili konzistentní klíč.
• Implementujte strategie invalidace mezipaměti: Jak již bylo zmíněno, budete muset implementovat své vlastní strategie pro invalidaci mezipaměti, když se změní základní data. Zvolte strategii, která je vhodná pro vaši aplikaci a data.
• Monitorujte výkon mezipaměti: Sledujte výkon vaší mezipaměti, abyste se ujistili, že funguje podle očekávání. Použijte nástroje pro protokolování a ladění ke sledování zásahů a chyb mezipaměti a identifikaci potenciálních úzkých míst.
• Zvažte alternativy: Před použitím experimental_useCache zvažte, zda by pro vaše potřeby nebyla vhodnější jiná řešení ukládání do mezipaměti. Pokud například potřebujete robustnější řešení ukládání do mezipaměti s vestavěnými funkcemi, jako je invalidace a odstraňování mezipaměti, můžete zvážit použití vyhrazené knihovny pro ukládání do mezipaměti. Knihovny jako `react-query`, `SWR` nebo dokonce použití `localStorage` mohou být někdy vhodnější.
• Začněte v malém: Zaveďte experimental_useCache postupně ve své aplikaci. Začněte ukládáním do mezipaměti několika klíčových operací získávání dat a postupně rozšiřujte jeho použití, jakmile získáte více zkušeností.
• Dokumentujte svou strategii ukládání do mezipaměti: Jasně dokumentujte svou strategii ukládání do mezipaměti, včetně toho, která data se ukládají do mezipaměti, jak se mezipaměť invaliduje a jakákoli potenciální omezení. To usnadní ostatním vývojářům pochopení a údržbu vašeho kódu.
• Důkladně testujte: Důkladně otestujte implementaci ukládání do mezipaměti, abyste se ujistili, že funguje správně a že nezavádí žádné neočekávané chyby. Napište jednotkové testy, abyste ověřili, že se mezipaměť naplňuje a invaliduje podle očekávání.

Alternativy k experimental_useCache

I když experimental_useCache poskytuje pohodlný způsob správy ukládání do mezipaměti v rámci Reactu, není to jediná dostupná možnost. V aplikacích React lze použít několik dalších řešení ukládání do mezipaměti, z nichž každé má své vlastní výhody a nevýhody.

• useMemo: Hook useMemo lze použít k memoizaci výsledků nákladných výpočtů. I když neposkytuje skutečné ukládání do mezipaměti napříč vykresleními, může být užitečné pro optimalizaci výkonu v rámci jedné komponenty. Je méně vhodný pro získávání dat nebo scénáře, kde je třeba sdílet data napříč komponentami.
• React.memo: React.memo je komponenta vyššího řádu, kterou lze použít k memoizaci funkčních komponent. Zabraňuje opětovnému vykreslení komponenty, pokud se její vlastnosti nezměnily. To může v některých případech zlepšit výkon, ale neposkytuje ukládání dat do mezipaměti.
• Externí knihovny pro ukládání do mezipaměti (react-query, SWR): Knihovny jako react-query a SWR poskytují komplexní řešení pro získávání dat a ukládání do mezipaměti pro aplikace React. Tyto knihovny nabízejí funkce, jako je automatická invalidace mezipaměti, získávání dat na pozadí a optimistické aktualizace. Mohou být dobrou volbou, pokud potřebujete robustnější řešení ukládání do mezipaměti s pokročilými funkcemi.
• Místní úložiště / Úložiště relací: Pro jednodušší případy použití nebo uchování dat napříč relacemi lze využít `localStorage` nebo `sessionStorage`. Je však vyžadována ruční správa serializace, invalidace a limitů úložiště.
• Vlastní řešení ukládání do mezipaměti: Můžete si také vytvořit vlastní řešení ukládání do mezipaměti pomocí rozhraní API kontextu Reactu nebo jiných technik správy stavu. To vám dává úplnou kontrolu nad implementací ukládání do mezipaměti, ale vyžaduje to také více úsilí a odbornosti.

Závěr

React's experimental_useCache hook nabízí účinný a pohodlný způsob správy ukládání do mezipaměti v rámci aplikací React. Ukládáním výsledků nákladných operací do mezipaměti můžete výrazně zlepšit výkon, snížit síťové požadavky a zjednodušit logiku získávání dat. Při použití ve spojení se Suspense a React Server Components může experimental_useCache dále zlepšit uživatelskou zkušenost a optimalizovat výkon vykreslování na serveru.

Je však důležité si uvědomit omezení a potenciální nevýhody experimental_useCache, jako je nedostatek vestavěné invalidace mezipaměti a potenciál zvýšeného využití paměti. Dodržováním osvědčených postupů popsaných v této příručce a pečlivým zvážením specifických potřeb vaší aplikace můžete efektivně využít experimental_useCache k odemknutí významného zvýšení výkonu a poskytování lepší uživatelské zkušenosti.

Nezapomeňte zůstat informováni o nejnovějších aktualizacích experimentálních API Reactu a buďte připraveni přizpůsobit svůj kód podle potřeby. Vzhledem k tomu, že se React neustále vyvíjí, budou techniky ukládání do mezipaměti, jako je experimental_useCache, hrát stále důležitější roli při vytváření vysoce výkonných a škálovatelných webových aplikací.