Yuqori samaradorlikka erishish: React Profiler API'ga chuqur sho'ng'ish

Zamonaviy veb-dasturlash dunyosida foydalanuvchi tajribasi birinchi o'rinda turadi. Ravon va sezgir interfeys mamnun foydalanuvchi bilan hafsalasi pir bo'lgan foydalanuvchi o'rtasidagi hal qiluvchi omil bo'lishi mumkin. React'dan foydalanadigan dasturchilar uchun murakkab va dinamik foydalanuvchi interfeyslarini yaratish har qachongidan ham osonlashdi. Biroq, ilovalar murakkablashgani sari, ishlash samaradorligidagi to'siqlar xavfi ham ortadi — bu sekin ishlashga, animatsiyalarning uzilishiga va umumiy yomon foydalanuvchi tajribasiga olib keladigan sezilmas samarasizliklardir. Aynan shu yerda React Profiler API dasturchining asboblar to'plamidagi ajralmas vositaga aylanadi.

Ushbu keng qamrovli qoʻllanma sizni React Profiler bilan chuqur tanishtiradi. Biz uning nima ekanligini, React DevTools va uning dasturiy API'si orqali undan qanday samarali foydalanishni va eng muhimi, uning natijalarini talqin qilib, keng tarqalgan ishlash muammolarini tashxislash va tuzatishni oʻrganamiz. Yakunda siz ishlash samaradorligini tahlil qilishni qoʻrqinchli vazifadan rivojlanish jarayoningizning tizimli va foydali qismiga aylantirishga tayyor boʻlasiz.

React Profiler API nima?

React Profiler — bu dasturchilarga React ilovasining ishlash samaradorligini oʻlchashga yordam berish uchun moʻljallangan maxsus vosita. Uning asosiy vazifasi ilovangizda render qilinadigan har bir komponent haqida vaqt maʼlumotlarini toʻplashdir, bu sizga ilovangizning qaysi qismlari render qilish uchun “qimmat” ekanligini va ishlash muammolariga sabab boʻlishi mumkinligini aniqlash imkonini beradi.

U quyidagi muhim savollarga javob beradi:

• Ma'lum bir komponentni render qilish qancha vaqt oladi?
• Foydalanuvchi o'zaro ta'siri davomida komponent necha marta qayta render qilinadi?
• Nima uchun ma'lum bir komponent qayta render qilindi?

React Profiler'ni Chrome DevTools'dagi Performance yorlig'i yoki Lighthouse kabi umumiy maqsadli brauzer ishlash vositalaridan farqlash muhim. Ushbu vositalar umumiy sahifa yuklanishi, tarmoq so'rovlari va skriptlarning bajarilish vaqtini o'lchash uchun ajoyib bo'lsa-da, React Profiler sizga React ekotizimi ichidagi ishlash samaradorligining komponent darajasidagi ko'rinishini taqdim etadi. U React hayotiy siklini tushunadi va holat (state), prop'lar va kontekst bilan bog'liq bo'lgan, boshqa vositalar ko'ra olmaydigan samarasizliklarni aniqlay oladi.

Profiler ikkita asosiy shaklda mavjud:

1. React DevTools kengaytmasi: Toʻgʻridan-toʻgʻri brauzeringizning dasturchi vositalariga integratsiya qilingan, foydalanuvchi uchun qulay, grafik interfeys. Bu profil yaratishni boshlashning eng keng tarqalgan usuli.
2. Dasturiy `` Komponenti: Ishlash oʻlchovlarini dasturiy ravishda toʻplash uchun toʻgʻridan-toʻgʻri JSX kodingizga qoʻshishingiz mumkin boʻlgan komponent, bu avtomatlashtirilgan testlash yoki metrikalarni tahlil xizmatiga yuborish uchun foydalidir.

Muhimi, Profiler ishlab chiqish (development) muhitlari uchun mo'ljallangan. Garchi profil yaratish yoqilgan maxsus production build mavjud bo'lsa-da, React'ning standart production build'i bu funksionallikni olib tashlaydi, toki kutubxona oxirgi foydalanuvchilaringiz uchun imkon qadar yengil va tez bo'lsin.

Ishni boshlash: React Profiler'dan qanday foydalanish kerak

Keling, amaliyotga o'taylik. Ilovangizni profillash oddiy jarayon bo'lib, ikkala usulni tushunish sizga maksimal moslashuvchanlikni beradi.

1-usul: React DevTools Profiler yorlig'i

Ko'pgina kundalik ishlash samaradorligini tuzatish uchun React DevTools'dagi Profiler yorlig'i sizning asosiy vositangizdir. Agar u sizda o'rnatilmagan bo'lsa, birinchi qadam — uni o'zingiz tanlagan brauzer (Chrome, Firefox, Edge) uchun kengaytmani yuklab olish.

Birinchi profillash seansini o'tkazish bo'yicha qadam-baqadam qo'llanma:

1. Ilovangizni oching: Ishlab chiqish rejimida ishlayotgan React ilovangizga o'ting. Brauzeringizning kengaytmalar panelida React belgisini ko'rsangiz, DevTools faol ekanligini bilasiz.
2. Dasturchi vositalarini oching: Brauzeringizning dasturchi vositalarini oching (odatda F12 yoki Ctrl+Shift+I / Cmd+Option+I bilan) va "Profiler" yorlig'ini toping. Agar sizda yorliqlar ko'p bo'lsa, u "»" belgisi ortida yashiringan bo'lishi mumkin.
3. Profillashni boshlang: Profiler interfeysida ko'k doira (yozib olish tugmasi) ni ko'rasiz. Ishlash ma'lumotlarini yozib olishni boshlash uchun uni bosing.
4. Ilovangiz bilan o'zaro aloqada bo'ling: O'lchamoqchi bo'lgan harakatni bajaring. Bu sahifani yuklash, modal oynani ochadigan tugmani bosish, formaga yozish yoki katta ro'yxatni filtrlash kabi har qanday harakat bo'lishi mumkin. Maqsad — sekin ishlayotgan foydalanuvchi o'zaro ta'sirini takrorlash.
5. Profillashni to'xtating: O'zaro ta'sirni tugatgandan so'ng, seansni to'xtatish uchun yozib olish tugmasini yana bir marta bosing (endi u qizil bo'ladi).

Bo'ldi! Profiler to'plagan ma'lumotlarni qayta ishlaydi va sizga ushbu o'zaro ta'sir davomida ilovangizning render ishlashi haqida batafsil vizualizatsiyani taqdim etadi.

2-usul: Dasturiy `Profiler` komponenti

DevTools interaktiv nosozliklarni tuzatish uchun ajoyib bo'lsa-da, ba'zida ishlash ma'lumotlarini avtomatik ravishda to'plash kerak bo'ladi. `react` paketidan eksport qilingan `` komponenti aynan shuni qilish imkonini beradi.

Siz komponentlar daraxtingizning istalgan qismini `` komponenti bilan o'rashingiz mumkin. U ikkita prop talab qiladi:

• `id` (string): Siz profillayotgan daraxt qismi uchun noyob identifikator. Bu turli profilerlardan olingan o'lchovlarni farqlashga yordam beradi.
• `onRender` (funksiya): Profillangan daraxt ichidagi komponent yangilanishni "commit" qilgan har safar React chaqiradigan qayta chaqiruv (callback) funksiyasi.

Mana kod misoli:

import React, { Profiler } from 'react';

// onRender qayta chaqiruv funksiyasi
function onRenderCallback(
  id, // hozirgina "commit" qilingan Profiler daraxtining "id" prop'i
  phase, // "mount" (agar daraxt endigina o'rnatilgan bo'lsa) yoki "update" (agar u qayta render qilingan bo'lsa)
  actualDuration, // tasdiqlangan (committed) yangilanishni render qilishga sarflangan vaqt
  baseDuration, // butun quyi daraxtni memoizatsiyasiz render qilish uchun taxminiy vaqt
  startTime, // React ushbu yangilanishni render qilishni boshlagan vaqt
  commitTime, // React ushbu yangilanishni tasdiqlagan (commit qilgan) vaqt
  interactions // yangilanishni keltirib chiqargan oʻzaro taʼsirlar toʻplami
) {
  // Bu ma'lumotlarni log'ga yozishingiz, tahlil nuqtasiga yuborishingiz yoki jamlashingiz mumkin.
  console.log({
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime,
  });
}

function App() {
  return (
    

      
        
      
      

        
          
        
      
    
  );
}

`onRender` qayta chaqiruv parametrlarini tushunish:

• `id`: `` komponentiga uzatgan string `id`.
• `phase`: Yoki `"mount"` (komponent birinchi marta o'rnatildi) yoki `"update"` (prop'lar, holat yoki hooklardagi o'zgarishlar tufayli qayta render qilindi).
• `actualDuration`: Ushbu maxsus yangilanish uchun `` va uning avlodlarini render qilish uchun ketgan vaqt, millisekundlarda. Bu sekin renderlarni aniqlash uchun asosiy metrikangizdir.
• `baseDuration`: Butun quyi daraxtni noldan render qilish qancha vaqt olishini taxmin qilish. Bu "eng yomon holat" senariysi va komponentlar daraxtining umumiy murakkabligini tushunish uchun foydalidir. Agar `actualDuration` `baseDuration`'dan ancha kichik bo'lsa, bu memoizatsiya kabi optimallashtirishlar samarali ishlayotganini ko'rsatadi.
• `startTime` va `commitTime`: React renderlashni boshlagan va yangilanishni DOM'ga commit qilgan vaqt belgilari. Bular vaqt o'tishi bilan ishlash samaradorligini kuzatish uchun ishlatilishi mumkin.
• `interactions`: Yangilanish rejalashtirilganida kuzatilayotgan "o'zaro ta'sirlar" to'plami (bu yangilanishlar sababini kuzatish uchun eksperimental API'ning bir qismi).

Profiler natijalarini talqin qilish: Yo'naltirilgan sayohat

React DevTools'da yozib olish seansini to'xtatganingizdan so'ng, sizga juda ko'p ma'lumot taqdim etiladi. Keling, interfeysning asosiy qismlarini ko'rib chiqaylik.

Commit tanlovchisi

Profilerning yuqori qismida siz ustunli diagrammani ko'rasiz. Ushbu diagrammadagi har bir ustun React yozib olish paytida DOM'ga qilgan bitta "commit" ni ifodalaydi. Ustunning balandligi va rangi ushbu commitni render qilish qancha vaqt olganini ko'rsatadi — balandroq, sariq/to'q sariq rangli ustunlar pastroq, ko'k/yashil rangli ustunlarga qaraganda qimmatroq. Har bir render siklining tafsilotlarini ko'rib chiqish uchun ushbu ustunlarni bosishingiz mumkin.

Flamegraph diagrammasi

Bu eng kuchli vizualizatsiya. Tanlangan commit uchun flamegraph ilovangizdagi qaysi komponentlar render qilinganligini ko'rsatadi. Mana uni qanday o'qish kerak:

• Komponent ierarxiyasi: Diagramma sizning komponent daraxtingiz kabi tuzilgan. Yuqoridagi komponentlar o'zlaridan pastdagi komponentlarni chaqirgan.
• Render vaqti: Komponent ustunining kengligi uning va uning bolalarining render qilishga qancha vaqt sarflaganiga mos keladi. Kengroq ustunlar siz birinchi navbatda tekshirishingiz kerak bo'lganlardir.
• Rang kodlash: Ustunning rangi ham render vaqtini ko'rsatadi, tez renderlar uchun sovuq ranglardan (ko'k, yashil) sekin renderlar uchun issiq ranglargacha (sariq, to'q sariq, qizil).
• Kulrang komponentlar: Kulrang ustun komponentning ushbu commit davomida qayta render qilinmaganligini anglatadi. Bu ajoyib belgi! Bu sizning memoizatsiya strategiyalaringiz ushbu komponent uchun ishlayotganini anglatadi.

Ranked (Reytingli) diagramma

Agar flamegraph juda murakkab tuyulsa, Ranked diagramma ko'rinishiga o'tishingiz mumkin. Bu ko'rinish tanlangan commit davomida render qilingan barcha komponentlarni render qilish uchun eng ko'p vaqt sarflaganiga qarab tartiblangan ro'yxatini ko'rsatadi. Bu sizning eng qimmat komponentlaringizni darhol aniqlashning ajoyib usuli.

Komponent tafsilotlari paneli

Flamegraph yoki Ranked diagrammasida ma'lum bir komponentni bosganingizda, o'ng tomonda tafsilotlar paneli paydo bo'ladi. Bu yerda siz eng amaliy ma'lumotlarni topasiz:

• Render davomiyligi: U tanlangan commit'dagi ushbu komponent uchun `actualDuration` va `baseDuration` ni ko'rsatadi.
• "Rendered at": Bu ushbu komponent render qilingan barcha commitlarni ro'yxatini ko'rsatadi, bu sizga uning qanchalik tez-tez yangilanishini tezda ko'rish imkonini beradi.
• "Why did this render?": Bu ko'pincha eng qimmatli ma'lumotdir. React DevTools komponent nima uchun qayta render qilinganini aytib berishga harakat qiladi. Keng tarqalgan sabablar:
  • Prop'lar o'zgardi
  • Hook'lar o'zgardi (masalan, `useState` yoki `useReducer` qiymati yangilandi)
  • Ota-ona komponenti render qilindi (bu bola komponentlarda keraksiz qayta renderlarning keng tarqalgan sababi)
  • Kontekst o'zgardi

Keng tarqalgan ishlashdagi to'siqlar va ularni qanday tuzatish kerak

Endi siz ishlash ma'lumotlarini qanday yig'ish va o'qishni bilasiz, keling, Profiler yordamida aniqlanadigan keng tarqalgan muammolarni va ularni hal qilish uchun standart React usullarini o'rganamiz.

1-muammo: Keraksiz qayta renderlar

Bu React ilovalarida eng keng tarqalgan ishlash muammosidir. Bu komponentning natijasi aynan bir xil bo'lishiga qaramay, u qayta render qilinganida sodir bo'ladi. Bu protsessor sikllarini isrof qiladi va interfeysingizni sekin his qildirishi mumkin.

Tashxis:

• Profiler'da siz komponentning ko'plab commitlar davomida juda tez-tez render qilinayotganini ko'rasiz.
• "Why did this render?" bo'limi o'z prop'lari o'zgarmagan bo'lsa ham, uning ota-ona komponenti qayta render qilinganligi sababli ekanligini ko'rsatadi.
• Flamegraph'dagi ko'plab komponentlar rangli, garchi ular bog'liq bo'lgan holatning faqat kichik bir qismi o'zgargan bo'lsa ham.

1-yechim: `React.memo()`

`React.memo` — bu sizning komponentingizni memoizatsiya qiladigan yuqori tartibli komponent (HOC). U komponentning oldingi va yangi prop'larini yuzaki (shallow) taqqoslaydi. Agar prop'lar bir xil bo'lsa, React komponentni qayta render qilishni o'tkazib yuboradi va oxirgi render qilingan natijani qayta ishlatadi.

`React.memo`dan oldin:**

function UserAvatar({ userName, avatarUrl }) {
  console.log(`Rendering UserAvatar for ${userName}`)
  return ;
}

// Ota-onada:
// Agar ota-ona biron bir sababga ko'ra qayta render qilinsa (masalan, o'z holati o'zgarsa),
// UserAvatar userName va avatarUrl bir xil bo'lsa ham qayta render qilinadi.

import React from 'react';

const UserAvatar = React.memo(function UserAvatar({ userName, avatarUrl }) {
  console.log(`Rendering UserAvatar for ${userName}`)
  return ;
});

// Endi UserAvatar FAQAT userName yoki avatarUrl prop'lari haqiqatan o'zgarganda qayta render qilinadi.

function ParentComponent() {
  const [count, setCount] = useState(0);

  // Bu funksiya ParentComponent'ning har bir renderida qayta yaratiladi
  const handleItemClick = (id) => {
    console.log('Clicked item', id);
  };

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* MemoizedListItem count har o'zgarganda qayta render qilinadi, chunki handleItemClick yangi funksiya */}
      
    
  );
}

import { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // Bu funksiya endi memoizatsiya qilingan va uning bog'liqliklari (bo'sh massiv) o'zgarmaguncha qayta yaratilmaydi.
  const handleItemClick = useCallback((id) => {
    console.log('Clicked item', id);
  }, []); // Bo'sh bog'liqliklar massivi u faqat bir marta yaratilishini anglatadi

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* Endi, MemoizedListItem count o'zgarganda qayta render QILINMAYDI */}
      
    
  );
}

function ProductList({ products, filterTerm }) {
  // Bu qimmat filtrlash amaliyoti ProductList'ning HAR BIR renderida ishlaydi,
  // hatto bog'liq bo'lmagan prop o'zgargan bo'lsa ham.
  const visibleProducts = products.filter(p => p.name.includes(filterTerm));

  return (
    

      {visibleProducts.map(p => 
{p.name}
)}
    
  );
}

import { useMemo } from 'react';

function ProductList({ products, filterTerm }) {
  // Bu hisob-kitob endi faqat `products` yoki `filterTerm` o'zgarganda ishlaydi.
  const visibleProducts = useMemo(() => {
    return products.filter(p => p.name.includes(filterTerm));
  }, [products, filterTerm]);

  return (
    

      {visibleProducts.map(p => 
{p.name}
)}
    
  );
}

// AppContext.js
const AppContext = createContext({ 
  currentUser: null, 
  theme: 'light', 
  language: 'en',
  setTheme: () => {}, 
  // ... va yana 20 ta qiymat
});

// MyComponent.js
// Bu komponentga faqat currentUser kerak, lekin mavzu o'zgarganda qayta render qilinadi!
const { currentUser } = useContext(AppContext);

// UserContext.js
const UserContext = createContext(null);

// ThemeContext.js
const ThemeContext = createContext({ theme: 'light', setTheme: () => {} });

// MyComponent.js
// Bu komponent endi FAQAT currentUser o'zgarganda qayta render qilinadi.
const currentUser = useContext(UserContext);

// webpack.config.js
module.exports = {
  // ... boshqa konfiguratsiya
  resolve: {
    alias: {
      'react-dom$': 'react-dom/profiling',
    },
  },
};