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

// Симулиране на API извикване (заменете с вашия реален API endpoint)
const fetchUserData = async (userId) => {
  console.log(`Извличане на потребителски данни за потребител с ID: ${userId}`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // Симулиране на мрежова латентност
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Неуспешно извличане на потребителски данни: ${response.status}`);
  }
  return response.json();
};

// Създаване на кеширана версия на функцията fetchUserData
const getCachedUserData = experimental_useCache(fetchUserData);

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

  return (
    

      
Потребителски профил
      
Име: {userData.name}
      
Имейл: {userData.email}
    
  );
}

function App() {
  return (
    Зареждане на потребителски данни...

Обяснение:

1. Импортиране на experimental_useCache: Импортираме необходимия hook от React.
2. Дефиниране на fetchUserData: Тази функция симулира извличане на потребителски данни от API. Заменете симулираното API извикване с вашата реална логика за извличане на данни. await new Promise симулира мрежова латентност, правейки ефекта от кеширането по-очевиден. Включена е обработка на грешки за готовност за производствена среда.
3. Създаване на getCachedUserData: Използваме experimental_useCache, за да създадем кеширана версия на функцията fetchUserData. Това е функцията, която реално ще използваме в нашия компонент.
4. Използване на getCachedUserData в UserProfile: Компонентът UserProfile извиква getCachedUserData, за да получи потребителските данни. Тъй като използваме experimental_useCache, данните ще бъдат извлечени от кеша, ако вече са налични.
5. Обвиване със Suspense: Компонентът UserProfile е обвит със Suspense, за да се обработи състоянието на зареждане, докато данните се извличат. Това осигурява гладко потребителско изживяване, дори ако зареждането на данните отнеме известно време.
6. Множество извиквания: Компонентът App рендира два компонента UserProfile с едно и също userId (1). Вторият компонент UserProfile ще използва кешираните данни, избягвайки второ API извикване. Той също така включва друг потребителски профил с различно ID, за да демонстрира извличането на некеширани данни.

В този пример първият компонент UserProfile ще извлече потребителските данни от API. Въпреки това, вторият компонент UserProfile ще използва кешираните данни, избягвайки второ API извикване. Това може значително да подобри производителността, особено ако API извикването е скъпо или ако до данните имат достъп много компоненти.

Интеграция със Suspense

experimental_useCache е проектиран да работи безпроблемно с функцията Suspense на React. Suspense ви позволява декларативно да управлявате състоянието на зареждане на компоненти, които чакат данни да се заредят. Когато използвате experimental_useCache заедно със Suspense, React автоматично ще спре рендирането на компонента, докато данните не станат достъпни в кеша или не бъдат извлечени от източника на данни. Това ви позволява да предоставите по-добро потребителско изживяване, като показвате резервен UI (напр. индикатор за зареждане), докато данните се зареждат.

В примера по-горе, компонентът Suspense обвива компонента UserProfile и предоставя fallback prop. Този резервен UI ще се показва, докато потребителските данни се извличат. След като данните са налични, компонентът UserProfile ще бъде рендиран с извлечените данни.

React Server Components (RSCs) и experimental_useCache

experimental_useCache блести, когато се използва с React Server Components. В RSCs, извличането на данни се случва на сървъра, а резултатите се предават поточно към клиента. experimental_useCache може значително да оптимизира извличането на данни от страна на сървъра, като гарантира, че данните се извличат само веднъж на заявка, дори ако множество компоненти се нуждаят от същите данни.

Разгледайте сценарий, в който имате сървърен компонент, който трябва да извлече потребителски данни и да ги покаже в няколко части на UI. Без experimental_useCache, може да се окажете, че извличате потребителските данни няколко пъти, което може да бъде неефективно. С experimental_useCache можете да гарантирате, че потребителските данни се извличат само веднъж и след това се кешират за последващи употреби в рамките на същата сървърна заявка.

Пример (Концептуален пример с RSC):

// Сървърен компонент
import { experimental_useCache } from 'react';

async function fetchUserData(userId) {
  // Симулиране на извличане на потребителски данни от база данни
  await new Promise(resolve => setTimeout(resolve, 500)); // Симулиране на латентност на заявка към база данни
  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 (
    

      
Добре дошъл, {userData.name}!
      
      
    
  );
}

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

      
Потребителска информация
      
Имейл: {userData.email}
    
  );
}

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

      
Последна активност
      
{userData.name} разгледа началната страница.
    
  );
}

В този опростен пример, UserDashboard, UserInfo и UserActivity са всички сървърни компоненти. Всички те се нуждаят от достъп до потребителските данни. Използването на experimental_useCache гарантира, че функцията fetchUserData се извиква само веднъж на сървърна заявка, въпреки че се използва в множество компоненти.

Съображения и потенциални недостатъци

Въпреки че experimental_useCache предлага значителни предимства, е важно да сте наясно с неговите ограничения и потенциални недостатъци:

• Експериментален статус: Като експериментален API, experimental_useCache подлежи на промяна или премахване в бъдещи версии на React. Използвайте го с повишено внимание в производствени среди и бъдете готови да адаптирате кода си, ако е необходимо. Следете официалната документация на React и бележките към версиите за актуализации.
• Инвалидиране на кеша: experimental_useCache не предоставя вградени механизми за инвалидиране на кеша. Ще трябва да внедрите свои собствени стратегии за инвалидиране на кеша, когато основните данни се променят. Това може да включва използване на персонализирани hooks или context providers за управление на живота на кеша.
• Използване на памет: Кеширането на данни може да увеличи използването на памет. Внимавайте с размера на данните, които кеширате, и обмислете използването на техники като изчистване или изтичане на кеша, за да ограничите консумацията на памет. Следете използването на паметта във вашето приложение, особено в сървърни среди.
• Сериализация на аргументите: Аргументите, предавани на кешираната функция, трябва да бъдат сериализируеми. Това е така, защото experimental_useCache използва аргументите, за да генерира ключ за кеша. Ако аргументите не са сериализируеми, кешът може да не работи правилно.
• Отстраняване на грешки: Отстраняването на проблеми с кеширането може да бъде предизвикателство. Използвайте инструменти за регистриране и отстраняване на грешки, за да инспектирате кеша и да проверите дали се държи според очакванията. Обмислете добавянето на персонализирано регистриране за отстраняване на грешки към вашата функция fetchUserData, за да проследявате кога данните се извличат и кога се получават от кеша.
• Глобално състояние: Избягвайте използването на глобално променливо състояние в рамките на кешираната функция. Това може да доведе до неочаквано поведение и да затрудни разбирането на кеша. Разчитайте на аргументите на функцията и кеширания резултат, за да поддържате последователно състояние.
• Сложни структури от данни: Бъдете внимателни, когато кеширате сложни структури от данни, особено ако съдържат кръгови референции. Кръговите референции могат да доведат до безкрайни цикли или грешки при препълване на стека по време на сериализация.

Стратегии за инвалидиране на кеша

Тъй като experimental_useCache не се справя с инвалидирането, ето някои стратегии, които можете да използвате:

• Ръчно инвалидиране: Внедрете персонализиран hook или context provider за проследяване на мутации на данни. Когато настъпи мутация, инвалидирайте кеша, като рестартирате кешираната функция. Това включва съхраняване на версия или времеви печат, който се променя при мутация и проверка на това в рамките на функцията `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("Извличане на данни с версия:", version)
          await new Promise(resolve => setTimeout(resolve, 500));
          return { data: `Данни за версия ${version}` };
       }
  
       const useCachedData = () => {
         const { version } = useContext(DataVersionContext);
         return experimental_useCache(() => fetchData(version))(); // Извикване на кеша
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // Примерна употреба:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return Инвалидиране на кеша
       }
  
       // Обвийте вашето приложение с DataVersionProvider
       // 
       //   
       //   
       // 
       
       

• Изтичане на базата на време: Внедрете механизъм за изтичане на кеша, който автоматично инвалидира кеша след определен период от време. Това може да бъде полезно за данни, които са сравнително статични, но могат да се променят от време на време.
• Инвалидиране на базата на тагове: Свържете тагове с кешираните данни и инвалидирайте кеша въз основа на тези тагове. Това може да бъде полезно за инвалидиране на свързани данни, когато определена част от данните се промени.
• WebSockets и актуализации в реално време: Ако вашето приложение използва WebSockets или други механизми за актуализация в реално време, можете да използвате тези актуализации, за да задействате инвалидиране на кеша. Когато се получи актуализация в реално време, инвалидирайте кеша за засегнатите данни.

Най-добри практики за използване на experimental_useCache

За да използвате ефективно experimental_useCache и да избегнете потенциални клопки, следвайте тези най-добри практики:

• Използвайте го за скъпи операции: Използвайте experimental_useCache само за операции, които са наистина скъпи, като извличане на данни или сложни изчисления. Кеширането на евтини операции всъщност може да намали производителността поради натоварването от управлението на кеша.
• Дефинирайте ясни ключове за кеша: Уверете се, че аргументите, предавани на кешираната функция, уникално идентифицират кешираните данни. Това е от решаващо значение за гарантиране, че кешът работи правилно и че данните не се използват повторно по невнимание. За аргументи-обекти, обмислете тяхната сериализация и хеширане, за да създадете последователен ключ.
• Внедрете стратегии за инвалидиране на кеша: Както беше споменато по-рано, ще трябва да внедрите свои собствени стратегии за инвалидиране на кеша, когато основните данни се променят. Изберете стратегия, която е подходяща за вашето приложение и данни.
• Наблюдавайте производителността на кеша: Наблюдавайте производителността на вашия кеш, за да се уверите, че работи според очакванията. Използвайте инструменти за регистриране и отстраняване на грешки, за да проследявате попаденията и пропуските в кеша и да идентифицирате потенциални тесни места.
• Обмислете алтернативи: Преди да използвате experimental_useCache, обмислете дали други решения за кеширане може да са по-подходящи за вашите нужди. Например, ако се нуждаете от по-стабилно решение за кеширане с вградени функции като инвалидиране и изчистване на кеша, може да обмислите използването на специализирана библиотека за кеширане. Библиотеки като `react-query`, `SWR` или дори използването на `localStorage` понякога могат да бъдат по-подходящи.
• Започнете с малко: Въвеждайте experimental_useCache постепенно във вашето приложение. Започнете с кеширане на няколко ключови операции за извличане на данни и постепенно разширявайте употребата му, докато натрупвате повече опит.
• Документирайте вашата стратегия за кеширане: Ясно документирайте вашата стратегия за кеширане, включително кои данни се кешират, как се инвалидира кешът и всякакви потенциални ограничения. Това ще улесни другите разработчици да разбират и поддържат вашия код.
• Тествайте обстойно: Тествайте обстойно вашата реализация на кеширане, за да се уверите, че работи правилно и че не въвежда неочаквани грешки. Напишете unit тестове, за да проверите дали кешът се попълва и инвалидира според очакванията.

Алтернативи на experimental_useCache

Въпреки че experimental_useCache предоставя удобен начин за управление на кеширането в рамките на React, той не е единствената налична опция. Няколко други решения за кеширане могат да се използват в React приложения, всяко със своите предимства и недостатъци.

• useMemo: Хукът useMemo може да се използва за мемоизиране на резултатите от скъпи изчисления. Въпреки че не предоставя истинско кеширане между рендиранията, той може да бъде полезен за оптимизиране на производителността в рамките на един компонент. Той е по-малко подходящ за извличане на данни или сценарии, при които данните трябва да се споделят между компоненти.
• React.memo: React.memo е компонент от по-висок ред, който може да се използва за мемоизиране на функционални компоненти. Той предотвратява повторното рендиране на компонента, ако неговите props не са се променили. Това може да подобри производителността в някои случаи, но не предоставя кеширане на данни.
• Външни библиотеки за кеширане (react-query, SWR): Библиотеки като react-query и SWR предоставят цялостни решения за извличане на данни и кеширане за React приложения. Тези библиотеки предлагат функции като автоматично инвалидиране на кеша, извличане на данни във фонов режим и оптимистични актуализации. Те могат да бъдат добър избор, ако се нуждаете от по-стабилно решение за кеширане с разширени функции.
• Local Storage / Session Storage: За по-прости случаи на употреба или за запазване на данни между сесии, могат да се използват `localStorage` или `sessionStorage`. Въпреки това, се изисква ръчно управление на сериализацията, инвалидирането и ограниченията за съхранение.
• Персонализирани решения за кеширане: Можете също така да изградите свои собствени персонализирани решения за кеширане, използвайки context API на React или други техники за управление на състоянието. Това ви дава пълен контрол върху реализацията на кеширане, но също така изисква повече усилия и експертиза.

Заключение

Хукът experimental_useCache на React предлага мощен и удобен начин за управление на кеширането в React приложения. Чрез кеширане на резултатите от скъпи операции можете значително да подобрите производителността, да намалите мрежовите заявки и да опростите логиката си за извличане на данни. Когато се използва заедно със Suspense и React Server Components, experimental_useCache може допълнително да подобри потребителското изживяване и да оптимизира производителността на сървърното рендиране.

Въпреки това е важно да сте наясно с ограниченията и потенциалните недостатъци на experimental_useCache, като липсата на вградено инвалидиране на кеша и потенциала за увеличено използване на памет. Като следвате най-добрите практики, описани в това ръководство, и внимателно обмисляте специфичните нужди на вашето приложение, можете ефективно да използвате experimental_useCache, за да отключите значителни ползи за производителността и да предоставите по-добро потребителско изживяване.

Не забравяйте да се информирате за последните актуализации на експерименталните API на React и бъдете готови да адаптирате кода си, ако е необходимо. Тъй като React продължава да се развива, техниките за кеширане като experimental_useCache ще играят все по-важна роля в изграждането на високопроизводителни и мащабируеми уеб приложения.