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

// API chaqiruvini simulyatsiya qilish (haqiqiy API manzilingiz bilan almashtiring)
const fetchUserData = async (userId) => {
  console.log(`Foydalanuvchi IDsi uchun ma'lumotlarni olish: ${userId}`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // Tarmoq kechikishini simulyatsiya qilish
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Foydalanuvchi ma'lumotlarini olib bo'lmadi: ${response.status}`);
  }
  return response.json();
};

// fetchUserData funksiyasining keshlashtirilgan versiyasini yaratish
const getCachedUserData = experimental_useCache(fetchUserData);

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

  return (
    

      
Foydalanuvchi Profili
      
Ismi: {userData.name}
      
Email: {userData.email}
    
  );
}

function App() {
  return (
    Foydalanuvchi ma'lumotlari yuklanmoqda...

Tushuntirish:

1. experimental_useCacheni import qilish: React-dan kerakli hookni import qilamiz.
2. fetchUserDatani aniqlash: Bu funksiya APIdan foydalanuvchi ma'lumotlarini olishni simulyatsiya qiladi. Mock API chaqiruvini haqiqiy ma'lumotlarni olish mantig'ingiz bilan almashtiring. await new Promise tarmoq kechikishini simulyatsiya qiladi, bu keshlashtirish ta'sirini yanada aniqroq qiladi. Ishlab chiqarishga tayyor bo'lish uchun xatoliklarni qayta ishlash kiritilgan.
3. getCachedUserDatani yaratish: Biz fetchUserData funksiyasining keshlashtirilgan versiyasini yaratish uchun experimental_useCachedan foydalanamiz. Bu biz komponentimizda haqiqatdan ham ishlatadigan funksiyadir.
4. UserProfileda getCachedUserDatadan foydalanish: UserProfile komponenti foydalanuvchi ma'lumotlarini olish uchun getCachedUserDatani chaqiradi. Biz experimental_useCachedan foydalanayotganimiz uchun, agar ma'lumotlar allaqachon mavjud bo'lsa, ular keshdan olinadi.
5. Suspense bilan o'rash: UserProfile komponenti ma'lumotlar yuklanayotganda yuklanish holatini boshqarish uchun Suspense bilan o'ralgan. Bu, ma'lumotlarni yuklash biroz vaqt talab qilsa ham, silliq foydalanuvchi tajribasini ta'minlaydi.
6. Bir nechta chaqiruvlar: App komponenti bir xil userId (1) bilan ikkita UserProfile komponentini render qiladi. Ikkinchi UserProfile komponenti keshlashtirilgan ma'lumotlardan foydalanadi va ikkinchi API chaqiruvidan saqlanadi. Shuningdek, u keshlanmagan ma'lumotlarni olishni namoyish qilish uchun boshqa IDga ega boshqa foydalanuvchi profilini ham o'z ichiga oladi.

Ushbu misolda, birinchi UserProfile komponenti foydalanuvchi ma'lumotlarini APIdan oladi. Biroq, ikkinchi UserProfile komponenti keshlashtirilgan ma'lumotlardan foydalanadi va ikkinchi API chaqiruvidan saqlanadi. Bu, ayniqsa, agar API chaqiruvi qimmat bo'lsa yoki ma'lumotlarga ko'plab komponentlar tomonidan kirilsa, unumdorlikni sezilarli darajada yaxshilashi mumkin.

Suspense bilan integratsiya

experimental_useCache React-ning Suspense xususiyati bilan muammosiz ishlash uchun mo'ljallangan. Suspense ma'lumotlar yuklanishini kutayotgan komponentlarning yuklanish holatini deklarativ ravishda boshqarishga imkon beradi. experimental_useCacheni Suspense bilan birgalikda ishlatsangiz, React komponentning renderlanishini ma'lumotlar keshda mavjud bo'lguncha yoki ma'lumotlar manbasidan olinguncha avtomatik ravishda to'xtatib turadi. Bu ma'lumotlar yuklanayotganda zaxira UI (masalan, yuklanish spinneri) ko'rsatish orqali yaxshiroq foydalanuvchi tajribasini ta'minlashga imkon beradi.

Yuqoridagi misolda Suspense komponenti UserProfile komponentini o'rab oladi va fallback propini taqdim etadi. Ushbu zaxira UI foydalanuvchi ma'lumotlari olinayotganda ko'rsatiladi. Ma'lumotlar mavjud bo'lgach, UserProfile komponenti olingan ma'lumotlar bilan renderlanadi.

React Server Komponentlari (RSC) va experimental_useCache

experimental_useCache React Server Komponentlari bilan ishlatilganda o'zining yorqin tomonlarini namoyon qiladi. RSC-larda ma'lumotlarni olish serverda sodir bo'ladi va natijalar mijozga uzatiladi. experimental_useCache server tomonida ma'lumotlarni olishni sezilarli darajada optimallashtirishi mumkin, bu esa bir nechta komponentlarga bir xil ma'lumotlar kerak bo'lsa ham, ma'lumotlar har bir so'rov uchun faqat bir marta olinishini ta'minlaydi.

Sizda foydalanuvchi ma'lumotlarini olib, uni UI ning bir nechta qismlarida ko'rsatishi kerak bo'lgan server komponenti bor degan stsenariyni ko'rib chiqing. experimental_useCache bo'lmasa, siz foydalanuvchi ma'lumotlarini bir necha marta olishingiz mumkin, bu samarasiz bo'lishi mumkin. experimental_useCache bilan siz foydalanuvchi ma'lumotlari faqat bir marta olinishini va keyin bir xil server so'rovi ichida keyingi foydalanish uchun keshlanishini ta'minlashingiz mumkin.

Misol (Kontseptual RSC misoli):

// Server Komponenti
import { experimental_useCache } from 'react';

async function fetchUserData(userId) {
  // Ma'lumotlar bazasidan foydalanuvchi ma'lumotlarini olishni simulyatsiya qilish
  await new Promise(resolve => setTimeout(resolve, 500)); // Ma'lumotlar bazasi so'rovi kechikishini simulyatsiya qilish
  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 (
    

      
Xush kelibsiz, {userData.name}!
      
      
    
  );
}

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

      
Foydalanuvchi ma'lumotlari
      
Email: {userData.email}
    
  );
}

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

      
So'nggi faoliyat
      
{userData.name} bosh sahifani ko'rdi.
    
  );
}

Ushbu soddalashtirilgan misolda UserDashboard, UserInfo va UserActivity barchasi Server Komponentlaridir. Ularning barchasiga foydalanuvchi ma'lumotlariga kirish kerak. experimental_useCachedan foydalanish fetchUserData funksiyasi bir nechta komponentlarda ishlatilishiga qaramay, har bir server so'rovi uchun faqat bir marta chaqirilishini ta'minlaydi.

E'tiborga olish kerak bo'lgan jihatlar va potentsial kamchiliklar

experimental_useCache sezilarli afzalliklarni taqdim etsa-da, uning cheklovlari va potentsial kamchiliklaridan xabardor bo'lish muhimdir:

• Eksperimental holat: Eksperimental API sifatida, experimental_useCache kelajakdagi React relizlarida o'zgarishi yoki olib tashlanishi mumkin. Uni ishlab chiqarish muhitida ehtiyotkorlik bilan ishlating va agar kerak bo'lsa, kodingizni moslashtirishga tayyor bo'ling. Yangilanishlar uchun React-ning rasmiy hujjatlari va reliz eslatmalarini kuzatib boring.
• Keshni bekor qilish (Invalidatsiya): experimental_useCache keshni bekor qilish uchun o'rnatilgan mexanizmlarni ta'minlamaydi. Asosiy ma'lumotlar o'zgarganda keshni bekor qilish uchun o'zingizning strategiyalaringizni amalga oshirishingiz kerak bo'ladi. Bu keshning yashash muddatini boshqarish uchun maxsus hooklar yoki kontekst provayderlaridan foydalanishni o'z ichiga olishi mumkin.
• Xotiradan foydalanish: Ma'lumotlarni keshlashtirish xotiradan foydalanishni oshirishi mumkin. Siz keshlayotgan ma'lumotlar hajmiga e'tibor bering va xotira sarfini cheklash uchun keshni tozalash yoki muddati o'tish kabi usullardan foydalanishni ko'rib chiqing. Ilovangizdagi, ayniqsa server tomonidagi muhitlarda xotiradan foydalanishni kuzatib boring.
• Argumentlarni serializatsiya qilish: Keshlashtirilgan funksiyaga uzatilgan argumentlar serializatsiya qilinadigan bo'lishi kerak. Buning sababi, experimental_useCache kesh kalitini yaratish uchun argumentlardan foydalanadi. Agar argumentlar serializatsiya qilinmasa, kesh to'g'ri ishlamasligi mumkin.
• Nosozliklarni tuzatish: Keshlashtirish muammolarini tuzatish qiyin bo'lishi mumkin. Keshni tekshirish va uning kutilganidek ishlashini tasdiqlash uchun logging va tuzatish vositalaridan foydalaning. Ma'lumotlar qachon olinayotganini va qachon keshdan olinayotganini kuzatish uchun fetchUserData funksiyangizga maxsus tuzatish loglarini qo'shishni ko'rib chiqing.
• Global holat: Keshlashtirilgan funksiya ichida global o'zgaruvchan holatdan foydalanishdan saqlaning. Bu kutilmagan xatti-harakatlarga olib kelishi va kesh haqida mulohaza yuritishni qiyinlashtirishi mumkin. Barqaror holatni saqlab qolish uchun funksiya argumentlari va keshlashtirilgan natijaga tayaning.
• Murakkab ma'lumotlar tuzilmalari: Murakkab ma'lumotlar tuzilmalarini, ayniqsa ular aylana havolalarni o'z ichiga olgan bo'lsa, keshlashtirishda ehtiyot bo'ling. Aylana havolalar serializatsiya paytida cheksiz tsikllarga yoki stekning to'lib ketishi xatolariga olib kelishi mumkin.

Keshni bekor qilish strategiyalari

experimental_useCache bekor qilishni boshqarmaganligi sababli, siz qo'llashingiz mumkin bo'lgan ba'zi strategiyalar mavjud:

• Qo'lda bekor qilish: Ma'lumotlar mutatsiyalarini kuzatish uchun maxsus hook yoki kontekst provayderini amalga oshiring. Mutatsiya sodir bo'lganda, keshlashtirilgan funksiyani qayta o'rnatish orqali keshni bekor qiling. Bu mutatsiya paytida o'zgaradigan versiya yoki vaqt belgisini saqlashni va buni `fetch` funksiyasi ichida tekshirishni o'z ichiga oladi.

       
       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("Versiya bilan ma'lumotlarni olish:", version)
          await new Promise(resolve => setTimeout(resolve, 500));
          return { data: `${version} versiyasi uchun ma'lumotlar` };
       }
  
       const useCachedData = () => {
         const { version } = useContext(DataVersionContext);
         return experimental_useCache(() => fetchData(version))(); // Keshni chaqirish
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // Foydalanish misoli:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return Keshni bekor qilish
       }
  
       // Ilovangizni DataVersionProvider bilan o'rang
       // 
       //   
       //   
       // 
       
       

• Vaqtga asoslangan muddati o'tish: Ma'lum bir vaqt o'tgach keshni avtomatik ravishda bekor qiladigan keshning muddati o'tish mexanizmini amalga oshiring. Bu nisbatan statik, ammo vaqti-vaqti bilan o'zgarishi mumkin bo'lgan ma'lumotlar uchun foydali bo'lishi mumkin.
• Teglarga asoslangan bekor qilish: Keshlashtirilgan ma'lumotlar bilan teglarni bog'lang va ushbu teglarga asoslanib keshni bekor qiling. Bu ma'lum bir ma'lumot o'zgarganda bog'liq ma'lumotlarni bekor qilish uchun foydali bo'lishi mumkin.
• WebSockets va real vaqtda yangilanishlar: Agar ilovangiz WebSockets yoki boshqa real vaqtda yangilanish mexanizmlaridan foydalansa, siz ushbu yangilanishlardan keshni bekor qilishni ishga tushirish uchun foydalanishingiz mumkin. Real vaqtda yangilanish olinganda, ta'sirlangan ma'lumotlar uchun keshni bekor qiling.

experimental_useCache-dan foydalanish bo'yicha eng yaxshi amaliyotlar

experimental_useCachedan samarali foydalanish va potentsial tuzoqlardan qochish uchun quyidagi eng yaxshi amaliyotlarga rioya qiling:

• Uni qimmat operatsiyalar uchun ishlating: experimental_useCacheni faqat haqiqatdan ham qimmat bo'lgan operatsiyalar, masalan, ma'lumotlarni olish yoki murakkab hisob-kitoblar uchun ishlating. Arzon operatsiyalarni keshlashtirish, keshni boshqarishning qo'shimcha yuklanishi tufayli aslida unumdorlikni pasaytirishi mumkin.
• Aniq kesh kalitlarini aniqlang: Keshlashtirilgan funksiyaga uzatilgan argumentlar keshlanayotgan ma'lumotlarni yagona tarzda aniqlashini ta'minlang. Bu keshning to'g'ri ishlashi va ma'lumotlarning tasodifan qayta ishlatilmasligini ta'minlash uchun juda muhimdir. Ob'ekt argumentlari uchun ularni serializatsiya qilish va izchil kalit yaratish uchun xeshlashni ko'rib chiqing.
• Keshni bekor qilish strategiyalarini amalga oshiring: Yuqorida aytib o'tilganidek, asosiy ma'lumotlar o'zgarganda keshni bekor qilish uchun o'zingizning strategiyalaringizni amalga oshirishingiz kerak bo'ladi. Ilovangiz va ma'lumotlaringiz uchun mos bo'lgan strategiyani tanlang.
• Kesh unumdorligini kuzatib boring: Keshning kutilganidek ishlashini ta'minlash uchun uning unumdorligini kuzatib boring. Keshga tushishlar va o'tkazib yuborishlarni kuzatish va potentsial to'siqlarni aniqlash uchun logging va tuzatish vositalaridan foydalaning.
• Alternativalarni ko'rib chiqing: experimental_useCachedan foydalanishdan oldin, boshqa keshlashtirish yechimlari sizning ehtiyojlaringizga ko'proq mos kelishi mumkinligini ko'rib chiqing. Masalan, agar sizga keshni bekor qilish va tozalash kabi o'rnatilgan xususiyatlarga ega bo'lgan mustahkamroq keshlashtirish yechimi kerak bo'lsa, siz maxsus keshlashtirish kutubxonasidan foydalanishni ko'rib chiqishingiz mumkin. `react-query`, `SWR` kabi kutubxonalar yoki hatto `localStorage`dan foydalanish ba'zan ko'proq mos kelishi mumkin.
• Kichikdan boshlang: Ilovangizga experimental_useCacheni bosqichma-bosqich kiriting. Bir nechta asosiy ma'lumotlarni olish operatsiyalarini keshlashtirishdan boshlang va ko'proq tajriba orttirganingiz sari uning qo'llanilishini asta-sekin kengaytiring.
• Keshlashtirish strategiyangizni hujjatlashtiring: Keshlashtirish strategiyangizni, jumladan, qaysi ma'lumotlar keshlanayotgani, kesh qanday bekor qilinayotgani va har qanday potentsial cheklovlarni aniq hujjatlashtiring. Bu boshqa dasturchilarga kodingizni tushunish va saqlashni osonlashtiradi.
• Puxta sinovdan o'tkazing: Keshlashtirish implementatsiyangizning to'g'ri ishlashini va kutilmagan xatoliklarni keltirib chiqarmasligini ta'minlash uchun uni puxta sinovdan o'tkazing. Keshning kutilganidek to'ldirilayotgani va bekor qilinayotganini tekshirish uchun birlik testlarini yozing.

experimental_useCache-ga alternativlar

experimental_useCache React ichida keshlashtirishni boshqarishning qulay usulini taqdim etsa-da, bu yagona variant emas. React ilovalarida ishlatilishi mumkin bo'lgan, har biri o'zining afzalliklari va kamchiliklariga ega bo'lgan bir qancha boshqa keshlashtirish yechimlari mavjud.

• useMemo: useMemo hooki qimmat hisob-kitoblar natijalarini memoizatsiya qilish uchun ishlatilishi mumkin. U renderlar bo'ylab haqiqiy keshlashtirishni ta'minlamasa-da, bitta komponent ichida unumdorlikni optimallashtirish uchun foydali bo'lishi mumkin. U ma'lumotlarni olish yoki ma'lumotlarni komponentlar o'rtasida bo'lishish kerak bo'lgan stsenariylar uchun kamroq mos keladi.
• React.memo: React.memo bu funksional komponentlarni memoizatsiya qilish uchun ishlatilishi mumkin bo'lgan yuqori tartibli komponentdir. U proplari o'zgarmagan bo'lsa, komponentning qayta renderlanishini oldini oladi. Bu ba'zi hollarda unumdorlikni yaxshilashi mumkin, ammo u ma'lumotlarni keshlashtirishni ta'minlamaydi.
• Tashqi keshlashtirish kutubxonalari (react-query, SWR): react-query va SWR kabi kutubxonalar React ilovalari uchun keng qamrovli ma'lumotlarni olish va keshlashtirish yechimlarini taqdim etadi. Ushbu kutubxonalar avtomatik keshni bekor qilish, fonda ma'lumotlarni olish va optimistik yangilanishlar kabi xususiyatlarni taklif etadi. Agar sizga ilg'or xususiyatlarga ega bo'lgan mustahkamroq keshlashtirish yechimi kerak bo'lsa, ular yaxshi tanlov bo'lishi mumkin.
• Local Storage / Session Storage: Oddiyroq holatlar yoki sessiyalar bo'ylab ma'lumotlarni saqlash uchun `localStorage` yoki `sessionStorage`dan foydalanish mumkin. Biroq, serializatsiya, bekor qilish va saqlash chegaralarini qo'lda boshqarish talab etiladi.
• Maxsus keshlashtirish yechimlari: Siz shuningdek, React-ning kontekst API yoki boshqa holatni boshqarish usullaridan foydalanib o'zingizning maxsus keshlashtirish yechimlaringizni yaratishingiz mumkin. Bu sizga keshlashtirish implementatsiyasi ustidan to'liq nazoratni beradi, ammo bu ko'proq harakat va tajribani talab qiladi.

Xulosa

React-ning experimental_useCache hooki React ilovalarida keshlashtirishni boshqarishning kuchli va qulay usulini taklif etadi. Qimmat operatsiyalar natijalarini keshlashtirish orqali siz unumdorlikni sezilarli darajada yaxshilashingiz, tarmoq so'rovlarini kamaytirishingiz va ma'lumotlarni olish mantig'ingizni soddalashtirishingiz mumkin. Suspense va React Server Komponentlari bilan birgalikda ishlatilganda, experimental_useCache foydalanuvchi tajribasini yanada yaxshilashi va serverda renderlash unumdorligini optimallashtirishi mumkin.

Biroq, experimental_useCachening cheklovlari va potentsial kamchiliklaridan, masalan, o'rnatilgan keshni bekor qilishning yo'qligi va xotiradan foydalanishning ortishi ehtimolidan xabardor bo'lish muhimdir. Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish va ilovangizning o'ziga xos ehtiyojlarini diqqat bilan ko'rib chiqish orqali siz experimental_useCachedan sezilarli unumdorlik yutuqlariga erishish va yaxshiroq foydalanuvchi tajribasini taqdim etish uchun samarali foydalanishingiz mumkin.

React-ning eksperimental APIlariga oid so'nggi yangilanishlardan xabardor bo'lishni va kerak bo'lganda kodingizni moslashtirishga tayyor bo'lishni unutmang. React rivojlanishda davom etar ekan, experimental_useCache kabi keshlashtirish usullari yuqori unumdorlikka ega va kengaytiriladigan veb-ilovalar yaratishda tobora muhim rol o'ynaydi.