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

// Imituojamas API iškvietimas (pakeiskite savo tikruoju API galiniu tašku)
const fetchUserData = async (userId) => {
  console.log(`Gaunami vartotojo duomenys su ID: ${userId}`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // Imituojamas tinklo vėlavimas
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Nepavyko gauti vartotojo duomenų: ${response.status}`);
  }
  return response.json();
};

// Sukuriama kešuota fetchUserData funkcijos versija
const getCachedUserData = experimental_useCache(fetchUserData);

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

  return (
    

      
Vartotojo profilis
      
Vardas: {userData.name}
      
El. paštas: {userData.email}
    
  );
}

function App() {
  return (
    Įkeliami vartotojo duomenys...

Paaiškinimas:

1. Importuojame experimental_useCache: Importuojame reikiamą „hook“ iš React.
2. Apibrėžiame fetchUserData: Ši funkcija imituoja vartotojo duomenų gavimą iš API. Pakeiskite imituojamą API iškvietimą savo tikrąja duomenų gavimo logika. await new Promise imituoja tinklo delsą, kad kešavimo efektas būtų akivaizdesnis. Įtrauktas klaidų apdorojimas, siekiant paruošti kodą gamybinei aplinkai.
3. Sukuriame getCachedUserData: Naudojame experimental_useCache, kad sukurtume kešuotą fetchUserData funkcijos versiją. Tai yra funkcija, kurią iš tikrųjų naudosime savo komponente.
4. Naudojame getCachedUserData komponente UserProfile: Komponentas UserProfile iškviečia getCachedUserData, kad gautų vartotojo duomenis. Kadangi naudojame experimental_useCache, duomenys bus paimti iš kešo, jei jie jau yra prieinami.
5. Apgaubiame su Suspense: Komponentas UserProfile yra apgaubtas su Suspense, kad būtų galima valdyti įkėlimo būseną, kol gaunami duomenys. Tai užtikrina sklandžią vartotojo patirtį, net jei duomenų įkėlimas užtrunka.
6. Keli iškvietimai: Komponentas App atvaizduoja du UserProfile komponentus su tuo pačiu userId (1). Antrasis UserProfile komponentas naudos kešuotus duomenis, išvengdamas antro API iškvietimo. Taip pat įtrauktas kitas vartotojo profilis su skirtingu ID, siekiant parodyti nekešuotų duomenų gavimą.

Šiame pavyzdyje pirmasis UserProfile komponentas gaus vartotojo duomenis iš API. Tačiau antrasis UserProfile komponentas naudos kešuotus duomenis, išvengdamas antro API iškvietimo. Tai gali žymiai pagerinti našumą, ypač jei API iškvietimas yra brangus arba jei duomenis pasiekia daug komponentų.

Integracija su Suspense

experimental_useCache yra sukurtas sklandžiai veikti su React „Suspense“ funkcija. „Suspense“ leidžia deklaratyviai valdyti komponentų, kurie laukia duomenų įkėlimo, būseną. Kai naudojate experimental_useCache kartu su „Suspense“, React automatiškai sustabdys komponento atvaizdavimą, kol duomenys bus prieinami keše arba gauti iš duomenų šaltinio. Tai leidžia suteikti geresnę vartotojo patirtį, rodant atsarginę sąsają (pvz., įkėlimo indikatorių), kol duomenys yra įkeliami.

Aukščiau pateiktame pavyzdyje Suspense komponentas apgaubia UserProfile komponentą ir pateikia fallback savybę. Ši atsarginė sąsaja bus rodoma, kol bus gaunami vartotojo duomenys. Kai duomenys bus prieinami, UserProfile komponentas bus atvaizduotas su gautais duomenimis.

React Serverio Komponentai (RSC) ir experimental_useCache

experimental_useCache ypač atsiskleidžia, kai naudojamas su React Serverio Komponentais. RSC aplinkoje duomenų gavimas vyksta serveryje, o rezultatai yra perduodami srautu klientui. experimental_useCache gali žymiai optimizuoti serverio pusės duomenų gavimą, užtikrindamas, kad duomenys būtų gaunami tik vieną kartą per užklausą, net jei keliems komponentams reikia tų pačių duomenų.

Apsvarstykite scenarijų, kai turite serverio komponentą, kuriam reikia gauti vartotojo duomenis ir juos parodyti keliose sąsajos dalyse. Be experimental_useCache, galite baigti tuo, kad vartotojo duomenys bus gaunami kelis kartus, o tai gali būti neefektyvu. Su experimental_useCache galite užtikrinti, kad vartotojo duomenys būtų gauti tik vieną kartą ir tada kešuoti vėlesniam naudojimui toje pačioje serverio užklausoje.

Pavyzdys (Konceptualus RSC pavyzdys):

// Serverio komponentas
import { experimental_useCache } from 'react';

async function fetchUserData(userId) {
  // Imituojamas vartotojo duomenų gavimas iš duomenų bazės
  await new Promise(resolve => setTimeout(resolve, 500)); // Imituojamas duomenų bazės užklausos vėlavimas
  return { id: userId, name: `User ${userId}`, email: `user${userId}@example.com` };
}

const getCachedUserData = experimental_useCache(fetchUserData);

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

  return (
    

      
Sveiki, {userData.name}!
      
      
    
  );
}

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

      
Vartotojo informacija
      
El. paštas: {userData.email}
    
  );
}

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

      
Paskutinė veikla
      
{userData.name} peržiūrėjo pagrindinį puslapį.
    
  );
}

Šiame supaprastintame pavyzdyje UserDashboard, UserInfo ir UserActivity yra visi serverio komponentai. Jiems visiems reikia prieigos prie vartotojo duomenų. Naudojant experimental_useCache užtikrinama, kad fetchUserData funkcija yra iškviečiama tik vieną kartą per serverio užklausą, nors ji naudojama keliuose komponentuose.

Svarstymai ir galimi trūkumai

Nors experimental_useCache siūlo didelių privalumų, svarbu žinoti apie jo apribojimus ir galimus trūkumus:

• Eksperimentinis statusas: Kadangi tai yra eksperimentinė API, experimental_useCache gali būti pakeista arba pašalinta būsimose React versijose. Naudokite ją atsargiai gamybinėse aplinkose ir būkite pasirengę prireikus pritaikyti savo kodą. Stebėkite oficialią React dokumentaciją ir išleidimo pastabas dėl atnaujinimų.
• Kešo anuliavimas: experimental_useCache nesuteikia integruotų mechanizmų kešo anuliavimui. Jums reikės įgyvendinti savo strategijas, kaip anuliuoti kešą, kai pasikeičia pagrindiniai duomenys. Tai gali apimti pasirinktinių „hook'ų“ ar konteksto teikėjų naudojimą kešo gyvavimo laikui valdyti.
• Atminties naudojimas: Duomenų kešavimas gali padidinti atminties naudojimą. Būkite atidūs kešuojamų duomenų dydžiui ir apsvarstykite galimybę naudoti tokias technikas kaip kešo išvalymas (eviction) ar galiojimo laiko nustatymas, siekiant apriboti atminties suvartojimą. Stebėkite atminties naudojimą savo programoje, ypač serverio pusės aplinkose.
• Argumentų serializavimas: Argumentai, perduodami kešuotai funkcijai, turi būti serializuojami. Taip yra todėl, kad experimental_useCache naudoja argumentus kešo raktui generuoti. Jei argumentai nėra serializuojami, kešas gali neveikti teisingai.
• Derinimas (Debugging): Kešavimo problemų derinimas gali būti sudėtingas. Naudokite registravimo (logging) ir derinimo įrankius, kad patikrintumėte kešą ir įsitikintumėte, jog jis veikia kaip tikėtasi. Apsvarstykite galimybę pridėti pasirinktinį derinimo registravimą į savo fetchUserData funkciją, kad galėtumėte sekti, kada duomenys yra gaunami ir kada jie paimami iš kešo.
• Globali būsena: Venkite naudoti globalią kintamą būseną kešuotoje funkcijoje. Tai gali sukelti netikėtą elgesį ir apsunkinti kešo veikimo supratimą. Pasikliaukite funkcijos argumentais ir kešuotu rezultatu, kad išlaikytumėte nuoseklią būseną.
• Sudėtingos duomenų struktūros: Būkite atsargūs kešuodami sudėtingas duomenų struktūras, ypač jei jose yra ciklinių nuorodų. Ciklinės nuorodos gali sukelti begalines kilpas arba kamino perpildos (stack overflow) klaidas serializavimo metu.

Kešo anuliavimo strategijos

Kadangi experimental_useCache neapdoroja anuliavimo, štai keletas strategijų, kurias galite taikyti:

• Rankinis anuliavimas: Įgyvendinkite pasirinktinį „hook“ arba konteksto teikėją, kad sektumėte duomenų mutacijas. Kai įvyksta mutacija, anuliuokite kešą iš naujo nustatydami kešuotą funkciją. Tai apima versijos ar laiko žymės saugojimą, kuri keičiasi įvykus mutacijai, ir jos tikrinimą `fetch` funkcijoje.

       
       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("Gaunami duomenys su versija:", version)
          await new Promise(resolve => setTimeout(resolve, 500));
          return { data: `Duomenys versijai ${version}` };
       }
  
       const useCachedData = () => {
         const { version } = useContext(DataVersionContext);
         return experimental_useCache(() => fetchData(version))(); // Iškviečiame kešą
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // Naudojimo pavyzdys:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return Anuliuoti kešą
       }
  
       // Apgaubkite savo App su DataVersionProvider
       // 
       //   
       //   
       // 
       
       

• Laiku pagrįstas galiojimo laikas: Įgyvendinkite kešo galiojimo laiko mechanizmą, kuris automatiškai anuliuoja kešą po tam tikro laiko. Tai gali būti naudinga duomenims, kurie yra gana statiški, bet kartais gali keistis.
• Žymomis pagrįstas anuliavimas: Susiekite žymes su kešuotais duomenimis ir anuliuokite kešą remdamiesi šiomis žymėmis. Tai gali būti naudinga anuliuojant susijusius duomenis, kai pasikeičia konkretus duomenų vienetas.
• „WebSockets“ ir realaus laiko atnaujinimai: Jei jūsų programa naudoja „WebSockets“ ar kitus realaus laiko atnaujinimo mechanizmus, galite naudoti šiuos atnaujinimus kešo anuliavimui inicijuoti. Gavus realaus laiko atnaujinimą, anuliuokite paveiktų duomenų kešą.

Geriausios experimental_useCache naudojimo praktikos

Norėdami efektyviai naudoti experimental_useCache ir išvengti galimų spąstų, laikykitės šių geriausių praktikų:

• Naudokite jį brangioms operacijoms: Naudokite experimental_useCache tik operacijoms, kurios yra tikrai brangios, pavyzdžiui, duomenų gavimui ar sudėtingiems skaičiavimams. Nebrangių operacijų kešavimas gali iš tikrųjų sumažinti našumą dėl kešo valdymo pridėtinių išlaidų.
• Apibrėžkite aiškius kešo raktus: Užtikrinkite, kad argumentai, perduodami kešuotai funkcijai, unikaliai identifikuotų kešuojamus duomenis. Tai yra labai svarbu norint užtikrinti, kad kešas veiktų teisingai ir kad duomenys nebūtų netyčia pakartotinai naudojami. Objektų argumentams apsvarstykite galimybę juos serializuoti ir maišyti (hashing), kad sukurtumėte nuoseklų raktą.
• Įgyvendinkite kešo anuliavimo strategijas: Kaip minėta anksčiau, jums reikės įgyvendinti savo strategijas, kaip anuliuoti kešą, kai pasikeičia pagrindiniai duomenys. Pasirinkite strategiją, kuri tinka jūsų programai ir duomenims.
• Stebėkite kešo našumą: Stebėkite savo kešo našumą, kad įsitikintumėte, jog jis veikia kaip tikėtasi. Naudokite registravimo ir derinimo įrankius, kad sektumėte kešo pataikymus (hits) ir nepataikymus (misses) bei nustatytumėte galimas kliūtis.
• Apsvarstykite alternatyvas: Prieš naudodami experimental_useCache, apsvarstykite, ar kiti kešavimo sprendimai gali būti tinkamesni jūsų poreikiams. Pavyzdžiui, jei jums reikia patikimesnio kešavimo sprendimo su integruotomis funkcijomis, tokiomis kaip kešo anuliavimas ir išvalymas, galite apsvarstyti galimybę naudoti specializuotą kešavimo biblioteką. Bibliotekos, tokios kaip `react-query`, `SWR`, ar net `localStorage` naudojimas kartais gali būti tinkamesnis.
• Pradėkite nuo mažų žingsnių: Įdiekite experimental_useCache savo programoje palaipsniui. Pradėkite nuo kelių pagrindinių duomenų gavimo operacijų kešavimo ir palaipsniui plėskite jo naudojimą, kai įgysite daugiau patirties.
• Dokumentuokite savo kešavimo strategiją: Aiškiai dokumentuokite savo kešavimo strategiją, įskaitant tai, kokie duomenys yra kešuojami, kaip kešas yra anuliuojamas ir bet kokius galimus apribojimus. Tai palengvins kitiems programuotojams suprasti ir prižiūrėti jūsų kodą.
• Kruopščiai testuokite: Kruopščiai testuokite savo kešavimo įgyvendinimą, kad įsitikintumėte, jog jis veikia teisingai ir neįveda jokių netikėtų klaidų. Parašykite vienetinius testus (unit tests), kad patikrintumėte, ar kešas yra užpildomas ir anuliuojamas kaip tikėtasi.

Alternatyvos experimental_useCache

Nors experimental_useCache suteikia patogų būdą valdyti kešavimą React aplinkoje, tai nėra vienintelė galimybė. React programose galima naudoti keletą kitų kešavimo sprendimų, kurių kiekvienas turi savo privalumų ir trūkumų.

• useMemo: useMemo „hook“ gali būti naudojamas brangių skaičiavimų rezultatams įsiminti (memoize). Nors jis nesuteikia tikro kešavimo tarp atvaizdavimų, jis gali būti naudingas optimizuojant našumą vieno komponento viduje. Jis mažiau tinka duomenų gavimui ar scenarijams, kai duomenimis reikia dalintis tarp komponentų.
• React.memo: React.memo yra aukštesnės eilės komponentas (higher-order component), kuris gali būti naudojamas funkciniams komponentams įsiminti. Jis apsaugo nuo komponento peratvaizdavimo, jei jo savybės (props) nepasikeitė. Tai gali pagerinti našumą kai kuriais atvejais, bet nesuteikia duomenų kešavimo.
• Išorinės kešavimo bibliotekos (react-query, SWR): Bibliotekos, tokios kaip react-query ir SWR, siūlo išsamius duomenų gavimo ir kešavimo sprendimus React programoms. Šios bibliotekos siūlo tokias funkcijas kaip automatinis kešo anuliavimas, foninis duomenų gavimas ir optimistiniai atnaujinimai. Jos gali būti geras pasirinkimas, jei jums reikia patikimesnio kešavimo sprendimo su pažangiomis funkcijomis.
• Local Storage / Session Storage: Paprastesniems naudojimo atvejams arba duomenų išsaugojimui tarp seansų galima naudoti `localStorage` arba `sessionStorage`. Tačiau reikia rankiniu būdu valdyti serializavimą, anuliavimą ir saugojimo apribojimus.
• Pasirinktiniai kešavimo sprendimai: Taip pat galite sukurti savo pasirinktinius kešavimo sprendimus naudodami React konteksto API ar kitas būsenos valdymo technikas. Tai suteikia jums visišką kešavimo įgyvendinimo kontrolę, tačiau taip pat reikalauja daugiau pastangų ir patirties.

Išvados

React experimental_useCache „hook“ siūlo galingą ir patogų būdą valdyti kešavimą React programose. Kešuodami brangių operacijų rezultatus, galite žymiai pagerinti našumą, sumažinti tinklo užklausas ir supaprastinti savo duomenų gavimo logiką. Kai naudojamas kartu su „Suspense“ ir „React Server Components“, experimental_useCache gali dar labiau pagerinti vartotojo patirtį ir optimizuoti serverio atvaizdavimo našumą.

Tačiau svarbu žinoti apie experimental_useCache apribojimus ir galimus trūkumus, tokius kaip integruoto kešo anuliavimo nebuvimas ir galimas padidėjęs atminties naudojimas. Laikydamiesi šiame vadove aprašytų geriausių praktikų ir atidžiai apsvarstydami konkrečius savo programos poreikius, galite efektyviai panaudoti experimental_useCache, kad pasiektumėte reikšmingą našumo padidėjimą ir suteiktumėte geresnę vartotojo patirtį.

Nepamirškite sekti naujausių React eksperimentinių API atnaujinimų ir būkite pasirengę prireikus pritaikyti savo kodą. React toliau tobulėjant, kešavimo technikos, tokios kaip experimental_useCache, vaidins vis svarbesnį vaidmenį kuriant aukšto našumo ir mastelio keitimui pritaikytas interneto programas.