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

// Simulējam API izsaukumu (aizstājiet ar savu faktisko API galapunktu)
const fetchUserData = async (userId) => {
  console.log(`Fetching user data for user ID: ${userId}`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // Simulējam tīkla aizkavi
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user data: ${response.status}`);
  }
  return response.json();
};

// Izveidojam kešotu fetchUserData funkcijas versiju
const getCachedUserData = experimental_useCache(fetchUserData);

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

  return (
    

      
User Profile
      
Name: {userData.name}
      
Email: {userData.email}
    
  );
}

function App() {
  return (
    Loading user data...

Paskaidrojums:

1. Importējam experimental_useCache: Mēs importējam nepieciešamo āķi no React.
2. Definējam fetchUserData: Šī funkcija simulē lietotāja datu ielādi no API. Aizstājiet imitēto API izsaukumu ar savu faktisko datu ielādes loģiku. await new Promise simulē tīkla aizkavi, padarot kešošanas efektu acīmredzamāku. Kļūdu apstrāde ir iekļauta, lai kods būtu gatavs produkcijai.
3. Izveidojam getCachedUserData: Mēs izmantojam experimental_useCache, lai izveidotu kešotu fetchUserData funkcijas versiju. Šī ir funkcija, kuru mēs faktiski izmantosim savā komponentē.
4. Lietojam getCachedUserData komponentē UserProfile: Komponente UserProfile izsauc getCachedUserData, lai iegūtu lietotāja datus. Tā kā mēs izmantojam experimental_useCache, dati tiks iegūti no kešatmiņas, ja tie jau ir pieejami.
5. Ietveram ar Suspense: Komponente UserProfile ir ietverta ar Suspense, lai pārvaldītu ielādes stāvokli, kamēr dati tiek ielādēti. Tas nodrošina plūstošu lietotāja pieredzi, pat ja datu ielāde aizņem kādu laiku.
6. Vairāki izsaukumi: Komponente App renderē divas UserProfile komponentes ar vienādu userId (1). Otrā UserProfile komponente izmantos kešotos datus, izvairoties no otra API izsaukuma. Tā ietver arī citu lietotāja profilu ar atšķirīgu ID, lai demonstrētu nekešotu datu ielādi.

Šajā piemērā pirmā UserProfile komponente ielādēs lietotāja datus no API. Tomēr otrā UserProfile komponente izmantos kešotos datus, izvairoties no otra API izsaukuma. Tas var ievērojami uzlabot veiktspēju, īpaši, ja API izsaukums ir dārgs vai datiem piekļūst daudzas komponentes.

Integrācija ar Suspense

experimental_useCache ir izstrādāts, lai nevainojami darbotos ar React Suspense funkciju. Suspense ļauj deklaratīvi pārvaldīt to komponenšu ielādes stāvokli, kuras gaida datu ielādi. Kad jūs izmantojat experimental_useCache kopā ar Suspense, React automātiski apturēs komponentes renderēšanu, līdz dati būs pieejami kešatmiņā vai būs ielādēti no datu avota. Tas ļauj nodrošināt labāku lietotāja pieredzi, parādot rezerves UI (piemēram, ielādes indikatoru), kamēr dati tiek ielādēti.

Iepriekšējā piemērā Suspense komponente ietver UserProfile komponenti un nodrošina fallback rekvizītu (prop). Šis rezerves UI tiks parādīts, kamēr lietotāja dati tiek ielādēti. Kad dati būs pieejami, UserProfile komponente tiks renderēta ar ielādētajiem datiem.

React Servera Komponentes (RSC) un experimental_useCache

experimental_useCache īpaši izceļas, ja to lieto ar React Servera Komponentēm. RSC gadījumā datu ielāde notiek serverī, un rezultāti tiek straumēti uz klientu. experimental_useCache var būtiski optimizēt servera puses datu ielādi, nodrošinot, ka dati tiek ielādēti tikai vienu reizi vienā pieprasījumā, pat ja vairākām komponentēm nepieciešami tie paši dati.

Apsveriet scenāriju, kurā jums ir servera komponente, kurai nepieciešams ielādēt lietotāja datus un attēlot tos vairākās UI daļās. Bez experimental_useCache jūs varētu vairākas reizes ielādēt lietotāja datus, kas būtu neefektīvi. Ar experimental_useCache jūs varat nodrošināt, ka lietotāja dati tiek ielādēti tikai vienu reizi un pēc tam kešoti turpmākai izmantošanai tā paša servera pieprasījuma ietvaros.

Piemērs (Konceptuāls RSC piemērs):

// Servera komponente
import { experimental_useCache } from 'react';

async function fetchUserData(userId) {
  // Simulējam lietotāja datu ielādi no datubāzes
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulējam datubāzes vaicājuma aizkavi
  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 (
    

      
Welcome, {userData.name}!
      
      
    
  );
}

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

      
User Information
      
Email: {userData.email}
    
  );
}

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

      
Recent Activity
      
{userData.name} viewed the homepage.
    
  );
}

Šajā vienkāršotajā piemērā UserDashboard, UserInfo un UserActivity visas ir Servera Komponentes. Tām visām ir nepieciešama piekļuve lietotāja datiem. Izmantojot experimental_useCache, tiek nodrošināts, ka fetchUserData funkcija tiek izsaukta tikai vienu reizi vienā servera pieprasījumā, lai gan tā tiek izmantota vairākās komponentēs.

Apsvērumi un potenciālie trūkumi

Lai gan experimental_useCache piedāvā ievērojamas priekšrocības, ir svarīgi apzināties tā ierobežojumus un potenciālos trūkumus:

• Eksperimentāls statuss: Kā eksperimentāla API, experimental_useCache var tikt mainīta vai noņemta nākamajās React versijās. Izmantojiet to piesardzīgi produkcijas vidēs un esiet gatavi nepieciešamības gadījumā pielāgot savu kodu. Sekojiet līdzi React oficiālajai dokumentācijai un laidienu piezīmēm, lai uzzinātu par jaunumiem.
• Kešatmiņas invalidācija: experimental_useCache nenodrošina iebūvētus mehānismus kešatmiņas invalidācijai. Jums būs jāievieš savas stratēģijas, lai padarītu kešatmiņu par spēkā neesošu, kad pamatā esošie dati mainās. Tas varētu ietvert pielāgotu āķu vai konteksta nodrošinātāju izmantošanu, lai pārvaldītu kešatmiņas dzīves ciklu.
• Atmiņas lietojums: Datu kešošana var palielināt atmiņas lietojumu. Pievērsiet uzmanību kešoto datu apjomam un apsveriet tādu paņēmienu izmantošanu kā kešatmiņas izstumšana (eviction) vai derīguma termiņa beigas (expiration), lai ierobežotu atmiņas patēriņu. Pārraugiet atmiņas lietojumu savā lietojumprogrammā, īpaši servera puses vidēs.
• Argumentu serializācija: Kešotajai funkcijai nodotajiem argumentiem jābūt serializējamiem. Tas ir tāpēc, ka experimental_useCache izmanto argumentus, lai ģenerētu kešatmiņas atslēgu. Ja argumenti nav serializējami, kešatmiņa var nedarboties pareizi.
• Atkļūdošana: Kešošanas problēmu atkļūdošana var būt sarežģīta. Izmantojiet žurnalēšanas un atkļūdošanas rīkus, lai pārbaudītu kešatmiņu un pārliecinātos, ka tā darbojas, kā paredzēts. Apsveriet iespēju pievienot pielāgotu atkļūdošanas žurnalēšanu savai fetchUserData funkcijai, lai izsekotu, kad dati tiek ielādēti un kad tie tiek iegūti no kešatmiņas.
• Globālais stāvoklis: Izvairieties no globāla mainīga stāvokļa izmantošanas kešotajā funkcijā. Tas var novest pie neparedzētas uzvedības un apgrūtināt spriešanu par kešatmiņu. Paļaujieties uz funkcijas argumentiem un kešoto rezultātu, lai uzturētu konsekventu stāvokli.
• Sarežģītas datu struktūras: Esiet piesardzīgi, kešojot sarežģītas datu struktūras, īpaši, ja tās satur cikliskas atsauces. Cikliskas atsauces var izraisīt bezgalīgas cilpas vai steka pārpildes kļūdas serializācijas laikā.

Kešatmiņas invalidācijas stratēģijas

Tā kā experimental_useCache nepārvalda invalidāciju, šeit ir dažas stratēģijas, kuras varat izmantot:

• Manuāla invalidācija: Ieviesiet pielāgotu āķi vai konteksta nodrošinātāju, lai sekotu līdzi datu mutācijām. Kad notiek mutācija, padariet kešatmiņu par spēkā neesošu, atiestatot kešoto funkciju. Tas ietver versijas vai laikspiedola glabāšanu, kas mainās pēc mutācijas, un pārbaudi šo `fetch` funkcijā.

       
       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("Fetching data with version:", 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))(); // Izsaucam kešatmiņu
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // Lietošanas piemērs:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return Invalidate Cache
       }
  
       // Ietveriet savu lietotni ar DataVersionProvider
       // 
       //   
       //   
       // 
       
       

• Laika bāzes derīguma termiņš: Ieviesiet kešatmiņas derīguma termiņa mehānismu, kas automātiski padara kešatmiņu par spēkā neesošu pēc noteikta laika perioda. Tas var būt noderīgi datiem, kas ir relatīvi statiski, bet reizēm var mainīties.
• Birku bāzes invalidācija: Saistiet birkas ar kešotajiem datiem un padariet kešatmiņu par spēkā neesošu, pamatojoties uz šīm birkām. Tas var būt noderīgi, lai padarītu par spēkā neesošiem saistītos datus, kad mainās kāda konkrēta datu daļa.
• WebSockets un reāllaika atjauninājumi: Ja jūsu lietojumprogramma izmanto WebSockets vai citus reāllaika atjaunināšanas mehānismus, jūs varat izmantot šos atjauninājumus, lai iedarbinātu kešatmiņas invalidāciju. Kad tiek saņemts reāllaika atjauninājums, padariet par spēkā neesošu kešatmiņu ietekmētajiem datiem.

Labākās prakses experimental_useCache lietošanai

Lai efektīvi izmantotu experimental_useCache un izvairītos no potenciālām kļūmēm, ievērojiet šīs labākās prakses:

• Izmantojiet to dārgām operācijām: Izmantojiet experimental_useCache tikai tām operācijām, kas ir patiesi dārgas, piemēram, datu ielādei vai sarežģītiem aprēķiniem. Lētu operāciju kešošana var pat samazināt veiktspēju kešatmiņas pārvaldības pieskaitāmo izmaksu dēļ.
• Definējiet skaidras kešatmiņas atslēgas: Pārliecinieties, ka kešotajai funkcijai nodotie argumenti unikāli identificē kešotos datus. Tas ir būtiski, lai nodrošinātu, ka kešatmiņa darbojas pareizi un dati netiek nejauši atkārtoti izmantoti. Objektu argumentiem apsveriet to serializēšanu un jaukšanu (hashing), lai izveidotu konsekventu atslēgu.
• Ieviesiet kešatmiņas invalidācijas stratēģijas: Kā minēts iepriekš, jums būs jāievieš savas stratēģijas, lai padarītu kešatmiņu par spēkā neesošu, kad pamatā esošie dati mainās. Izvēlieties stratēģiju, kas ir piemērota jūsu lietojumprogrammai un datiem.
• Pārraugiet kešatmiņas veiktspēju: Pārraugiet savas kešatmiņas veiktspēju, lai nodrošinātu, ka tā darbojas, kā paredzēts. Izmantojiet žurnalēšanas un atkļūdošanas rīkus, lai izsekotu kešatmiņas trāpījumiem (hits) un kļūdām (misses) un identificētu potenciālos vājos posmus.
• Apsveriet alternatīvas: Pirms experimental_useCache lietošanas apsveriet, vai citi kešošanas risinājumi varētu būt piemērotāki jūsu vajadzībām. Piemēram, ja jums nepieciešams robustāks kešošanas risinājums ar iebūvētām funkcijām, piemēram, kešatmiņas invalidāciju un izstumšanu, jūs varētu apsvērt īpašu kešošanas bibliotēku. Bibliotēkas kā `react-query`, `SWR` vai pat `localStorage` izmantošana dažkārt var būt piemērotāka.
• Sāciet ar mazumiņu: Ieviesiet experimental_useCache savā lietojumprogrammā pakāpeniski. Sāciet ar dažu galveno datu ielādes operāciju kešošanu un pakāpeniski paplašiniet tā lietojumu, gūstot vairāk pieredzes.
• Dokumentējiet savu kešošanas stratēģiju: Skaidri dokumentējiet savu kešošanas stratēģiju, ieskaitot to, kādi dati tiek kešoti, kā kešatmiņa tiek padarīta par spēkā neesošu, un jebkādus iespējamos ierobežojumus. Tas atvieglos citiem izstrādātājiem jūsu koda saprašanu un uzturēšanu.
• Rūpīgi testējiet: Rūpīgi testējiet savu kešošanas implementāciju, lai nodrošinātu, ka tā darbojas pareizi un neievieš nekādas neparedzētas kļūdas. Rakstiet vienības testus, lai pārbaudītu, vai kešatmiņa tiek aizpildīta un padarīta par spēkā neesošu, kā paredzēts.

Alternatīvas experimental_useCache

Lai gan experimental_useCache nodrošina ērtu veidu, kā pārvaldīt kešošanu React ietvaros, tā nav vienīgā pieejamā iespēja. React lietojumprogrammās var izmantot vairākus citus kešošanas risinājumus, katram no kuriem ir savas priekšrocības un trūkumi.

• useMemo: useMemo āķi var izmantot, lai memoizētu dārgu aprēķinu rezultātus. Lai gan tas nenodrošina patiesu kešošanu starp renderēšanas procesiem, tas var būt noderīgs veiktspējas optimizēšanai vienas komponentes ietvaros. Tas ir mazāk piemērots datu ielādei vai scenārijiem, kur dati ir jādala starp komponentēm.
• React.memo: React.memo ir augstākas kārtas komponente, ko var izmantot funkcionālo komponenšu memoizēšanai. Tā novērš komponentes atkārtotu renderēšanu, ja tās rekvizīti (props) nav mainījušies. Tas dažos gadījumos var uzlabot veiktspēju, bet nenodrošina datu kešošanu.
• Ārējās kešošanas bibliotēkas (react-query, SWR): Bibliotēkas kā react-query un SWR nodrošina visaptverošus datu ielādes un kešošanas risinājumus React lietojumprogrammām. Šīs bibliotēkas piedāvā tādas funkcijas kā automātiska kešatmiņas invalidācija, fona datu ielāde un optimistiski atjauninājumi. Tās var būt laba izvēle, ja jums nepieciešams robustāks kešošanas risinājums ar papildu funkcijām.
• Local Storage / Session Storage: Vienkāršākiem lietošanas gadījumiem vai datu saglabāšanai starp sesijām var izmantot `localStorage` vai `sessionStorage`. Tomēr ir nepieciešama manuāla serializācijas, invalidācijas un glabāšanas ierobežojumu pārvaldība.
• Pielāgoti kešošanas risinājumi: Jūs varat arī izveidot savus pielāgotus kešošanas risinājumus, izmantojot React konteksta API vai citas stāvokļa pārvaldības metodes. Tas dod jums pilnīgu kontroli pār kešošanas implementāciju, bet tas arī prasa vairāk pūļu un zināšanu.

Noslēgums

React experimental_useCache āķis piedāvā spēcīgu un ērtu veidu, kā pārvaldīt kešošanu React lietojumprogrammās. Kešojot dārgu operāciju rezultātus, jūs varat ievērojami uzlabot veiktspēju, samazināt tīkla pieprasījumus un vienkāršot datu ielādes loģiku. Lietojot to kopā ar Suspense un React Servera Komponentēm, experimental_useCache var vēl vairāk uzlabot lietotāja pieredzi un optimizēt servera renderēšanas veiktspēju.

Tomēr ir svarīgi apzināties experimental_useCache ierobežojumus un potenciālos trūkumus, piemēram, iebūvētas kešatmiņas invalidācijas trūkumu un potenciāli palielinātu atmiņas lietojumu. Ievērojot šajā rokasgrāmatā izklāstītās labākās prakses un rūpīgi apsverot savas lietojumprogrammas specifiskās vajadzības, jūs varat efektīvi izmantot experimental_useCache, lai sasniegtu ievērojamus veiktspējas uzlabojumus un nodrošinātu labāku lietotāja pieredzi.

Atcerieties sekot līdzi jaunākajiem atjauninājumiem par React eksperimentālajām API un esiet gatavi nepieciešamības gadījumā pielāgot savu kodu. Tā kā React turpina attīstīties, kešošanas metodes, piemēram, experimental_useCache, spēlēs arvien svarīgāku lomu augstas veiktspējas un mērogojamu tīmekļa lietojumprogrammu izveidē.