Reactda xotira sizib chiqishini aniqlash: Komponentlarni tozalashni tekshirish bo'yicha to'liq qo'llanma

React ilovalarida xotira sizib chiqishi ishlash samaradorligini sezilarsiz pasaytirishi va foydalanuvchi tajribasiga salbiy ta'sir ko'rsatishi mumkin. Ushbu sizib chiqishlar komponentlar o'chirilganda, lekin ular bilan bog'liq resurslar (masalan, taymerlar, hodisa tinglovchilari va obunalar) to'g'ri tozalanmaganda yuzaga keladi. Vaqt o'tishi bilan bu bo'shatilmagan resurslar to'planib, xotirani egallaydi va ilovaning sekinlashishiga olib keladi. Ushbu to'liq qo'llanma komponentlarni to'g'ri tozalashni tekshirish orqali xotira sizib chiqishini aniqlash va oldini olish strategiyalarini taqdim etadi.

Reactda xotira sizib chiqishini tushunish

Xotira sizib chiqishi komponent DOM'dan olib tashlanganda, lekin ba'zi JavaScript kodlari hali ham unga havola saqlab qolganda yuzaga keladi, bu esa "axlat yig'uvchi" (garbage collector) uning egallagan xotirasini bo'shatishiga to'sqinlik qiladi. React o'z komponentlarining hayot siklini samarali boshqaradi, lekin ishlab chiquvchilar komponentlarning hayot sikli davomida olgan har qanday resurslardan voz kechishini ta'minlashi kerak.

Xotira sizib chiqishining umumiy sabablari:

• Tozalanmagan taymerlar va intervallar: Komponent o'chirilgandan keyin taymerlarni (setTimeout, setInterval) ishlab turishini qoldirish.
• O'chirilmagan hodisa tinglovchilari: window, document yoki boshqa DOM elementlariga biriktirilgan hodisa tinglovchilarini uzmaslik.
• Tugatmagan obunalar: Kuzatuvchilardan (masalan, RxJS) yoki boshqa ma'lumotlar oqimlaridan obunani bekor qilmaslik.
• Bo'shatilmagan resurslar: Uchinchi tomon kutubxonalari yoki API'lardan olingan resurslarni bo'shatmaslik.
• Yopilmalar (Closures): Komponent ichidagi funksiyalarning komponent holati (state) yoki prop'lariga havolalarni tasodifan ushlab turishi va saqlab qolishi.

Xotira sizib chiqishini aniqlash

Xotira sizib chiqishini ishlab chiqish siklining boshida aniqlash juda muhim. Bu muammolarni aniqlashga yordam beradigan bir nechta usullar mavjud:

1. Brauzer ishlab chiquvchi vositalari

Zamonaviy brauzer ishlab chiquvchi vositalari xotirani profilini tahlil qilish uchun kuchli imkoniyatlarni taqdim etadi. Xususan, Chrome DevTools juda samarali.

1. Xotira suratlari (Heap Snapshots) oling: Turli vaqt nuqtalarida ilovaning xotira suratlarini oling. Komponent o'chirilgandan keyin "axlat yig'uvchi" tomonidan tozalanmayotgan obyektlarni aniqlash uchun suratlarni solishtiring.
2. Xotira ajratish vaqt shkalasi (Allocation Timeline): Vaqt shkalasi vaqt o'tishi bilan xotira ajratilishini ko'rsatadi. Komponentlar o'rnatilayotgan va o'chirilayotgan bo'lsa ham, xotira sarfi ortib borayotganini qidiring.
3. Ishlash samaradorligi (Performance) yorlig'i: Xotirani ushlab turgan funksiyalarni aniqlash uchun ishlash profillarini yozib oling.

Misol (Chrome DevTools):

1. Chrome DevTools'ni oching (Ctrl+Shift+I yoki Cmd+Option+I).
2. "Memory" yorlig'iga o'ting.
3. "Heap snapshot" ni tanlang va "Take snapshot" tugmasini bosing.
4. Komponentni o'rnatish va o'chirishni ishga tushirish uchun ilovangiz bilan o'zaro aloqada bo'ling.
5. Yana bir surat oling.
6. "Axlat yig'uvchi" tomonidan tozalanishi kerak bo'lgan, lekin tozalanmagan obyektlarni topish uchun ikkita suratni solishtiring.

2. React DevTools Profiler

React DevTools ishlashdagi qiyinchiliklarni, shu jumladan xotira sizib chiqishi sabab bo'lganlarni aniqlashga yordam beradigan profiler'ni taqdim etadi. U to'g'ridan-to'g'ri xotira sizib chiqishini aniqlamasa-da, kutilganidek ishlamayotgan komponentlarga ishora qilishi mumkin.

3. Kod tekshiruvi (Code Reviews)

Muntazam kod tekshiruvlari, ayniqsa komponentlarni tozalash mantig'iga e'tibor qaratish, potentsial xotira sizib chiqishini aniqlashga yordam beradi. Tozalash funksiyalari bilan birga useEffect hook'lariga e'tibor bering va barcha taymerlar, hodisa tinglovchilari va obunalar to'g'ri boshqarilayotganiga ishonch hosil qiling.

4. Testlash kutubxonalari

Jest va React Testing Library kabi testlash kutubxonalari xotira sizib chiqishini maxsus tekshiradigan integratsiya testlarini yaratish uchun ishlatilishi mumkin. Bu testlar komponentni o'rnatish va o'chirishni simulyatsiya qilishi va hech qanday resurs saqlanib qolmaganligini tasdiqlashi mumkin.

Xotira sizib chiqishining oldini olish: Eng yaxshi amaliyotlar

Xotira sizib chiqishiga qarshi kurashishning eng yaxshi yondashuvi - bu ularning paydo bo'lishining oldini olishdir. Quyida amal qilish kerak bo'lgan ba'zi eng yaxshi amaliyotlar keltirilgan:

1. Tozalash funksiyalari bilan useEffect dan foydalanish

useEffect hook'i funksional komponentlarda qo'shimcha effektlarni (side effects) boshqarishning asosiy mexanizmidir. Taymerlar, hodisa tinglovchilari yoki obunalar bilan ishlaganda, komponent o'chirilganda ushbu resurslarni ro'yxatdan o'chiradigan tozalash funksiyasini har doim taqdim eting.

Misol:

import React, { useState, useEffect } from 'react';

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

 useEffect(() => {
  const intervalId = setInterval(() => {
   setCount(prevCount => prevCount + 1);
  }, 1000);

  return () => {
   clearInterval(intervalId);
   console.log('Taymer tozalandi!');
  };
 }, []);

 return (
  

   
Sanoq: {count}
  
 );
}

export default MyComponent;

Ushbu misolda, useEffect hook'i har soniyada count holatini oshiradigan intervalni o'rnatadi. Tozalash funksiyasi (useEffect tomonidan qaytarilgan) komponent o'chirilganda intervalni tozalaydi va xotira sizib chiqishining oldini oladi.

2. Hodisa tinglovchilarini olib tashlash

Agar siz window, document yoki boshqa DOM elementlariga hodisa tinglovchilarini biriktirsangiz, komponent o'chirilganda ularni olib tashlaganingizga ishonch hosil qiling.

Misol:

import React, { useEffect } from 'react';

function MyComponent() {
 const handleScroll = () => {
  console.log('Aylantirildi!');
 };

 useEffect(() => {
  window.addEventListener('scroll', handleScroll);

  return () => {
   window.removeEventListener('scroll', handleScroll);
   console.log('Aylantirish tinglovchisi olib tashlandi!');
  };
 }, []);

 return (
  

   
Ushbu sahifani aylantiring.
  
 );
}

export default MyComponent;

Ushbu misol window ga aylantirish (scroll) hodisasi tinglovchisini biriktiradi. Tozalash funksiyasi komponent o'chirilganda hodisa tinglovchisini olib tashlaydi.

3. Kuzatuvchilardan (Observables) obunani bekor qilish

Agar ilovangiz kuzatuvchilardan (masalan, RxJS) foydalansa, komponent o'chirilganda ulardan obunani bekor qilganingizga ishonch hosil qiling. Buni qilmaslik xotira sizib chiqishiga va kutilmagan xatti-harakatlarga olib kelishi mumkin.

Misol (RxJS yordamida):

import React, { useState, useEffect } from 'react';
import { interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

function MyComponent() {
 const [count, setCount] = useState(0);
 const destroy$ = new Subject();

 useEffect(() => {
  interval(1000)
   .pipe(takeUntil(destroy$))
   .subscribe(val => {
    setCount(val);
   });

  return () => {
   destroy$.next();
   destroy$.complete();
   console.log('Obuna bekor qilindi!');
  };
 }, []);

 return (
  

   
Sanoq: {count}
  
 );
}

export default MyComponent;

Ushbu misolda, kuzatuvchi (interval) har soniyada qiymatlarni chiqaradi. takeUntil operatori destroy$ subyekti qiymat chiqarganda kuzatuvchining yakunlanishini ta'minlaydi. Tozalash funksiyasi destroy$ da qiymat chiqaradi va uni yakunlaydi, kuzatuvchidan obunani bekor qiladi.

4. Fetch API uchun AbortController dan foydalanish

Fetch API yordamida API so'rovlarini amalga oshirayotganda, agar so'rov tugashidan oldin komponent o'chirilsa, so'rovni bekor qilish uchun AbortController dan foydalaning. Bu keraksiz tarmoq so'rovlari va potentsial xotira sizib chiqishining oldini oladi.

Misol:

import React, { useState, useEffect } from 'react';

function MyComponent() {
 const [data, setData] = useState(null);
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState(null);

 useEffect(() => {
  const abortController = new AbortController();
  const signal = abortController.signal;

  const fetchData = async () => {
   try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1', { signal });
    if (!response.ok) {
     throw new Error(`HTTP xatosi! Holat: ${response.status}`);
    }
    const json = await response.json();
    setData(json);
   } catch (e) {
    if (e.name === 'AbortError') {
     console.log('Fetch bekor qilindi');
    } else {
     setError(e);
    }
   } finally {
    setLoading(false);
   }
  };

  fetchData();

  return () => {
   abortController.abort();
   console.log('Fetch bekor qilindi!');
  };
 }, []);

 if (loading) return 
Yuklanmoqda...
;
 if (error) return 
Xatolik: {error.message}
;

 return (
  

   
Ma'lumotlar: {JSON.stringify(data)}
  
 );
}

export default MyComponent;

Ushbu misolda, AbortController yaratiladi va uning signali fetch funksiyasiga uzatiladi. Agar komponent so'rov tugashidan oldin o'chirilsa, abortController.abort() usuli chaqiriladi va so'rov bekor qilinadi.

5. O'zgaruvchan qiymatlarni saqlash uchun useRef dan foydalanish

Ba'zan, qayta renderlashlarga sabab bo'lmasdan renderlar orasida saqlanadigan o'zgaruvchan qiymatni ushlab turishingiz kerak bo'lishi mumkin. useRef hook'i bu maqsad uchun idealdir. Bu tozalash funksiyasida kirish kerak bo'lgan taymerlarga yoki boshqa resurslarga havolalarni saqlash uchun foydali bo'lishi mumkin.

Misol:

import React, { useRef, useEffect } from 'react';

function MyComponent() {
 const timerId = useRef(null);

 useEffect(() => {
  timerId.current = setInterval(() => {
   console.log('Tik');
  }, 1000);

  return () => {
   clearInterval(timerId.current);
   console.log('Taymer tozalandi!');
  };
 }, []);

 return (
  

   
Konsolda "tik"larni tekshiring.
  
 );
}

export default MyComponent;

Ushbu misolda, timerId ref'i intervalning ID'sini saqlaydi. Tozalash funksiyasi intervalni tozalash uchun ushbu ID'ga kira oladi.

6. O'chirilgan komponentlarda holat yangilanishlarini minimallashtirish

Komponent o'chirilgandan keyin uning holatini o'rnatishdan saqlaning. React sizga buni qilishga urinsangiz ogohlantiradi, chunki bu xotira sizib chiqishiga va kutilmagan xatti-harakatlarga olib kelishi mumkin. Ushbu yangilanishlarning oldini olish uchun isMounted naqshidan yoki AbortController dan foydalaning.

Misol (AbortController bilan holat yangilanishlaridan qochish - 4-bo'limdagi misolga qarang):

AbortController yondashuvi "Fetch API uchun AbortController dan foydalanish" bo'limida ko'rsatilgan va asinxron chaqiruvlarda o'chirilgan komponentlarda holat yangilanishlarining oldini olishning tavsiya etilgan usuli hisoblanadi.

Xotira sizib chiqishini testlash

Xotira sizib chiqishini maxsus tekshiradigan testlarni yozish, komponentlaringiz resurslarni to'g'ri tozalayotganiga ishonch hosil qilishning samarali usulidir.

1. Jest va React Testing Library bilan integratsiya testlari

Komponentni o'rnatish va o'chirishni simulyatsiya qilish va hech qanday resurs saqlanib qolmaganligini tasdiqlash uchun Jest va React Testing Library'dan foydalaning.

Misol:

import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import MyComponent from './MyComponent'; // Komponentingizga to'g'ri yo'l bilan almashtiring

// Axlat yig'ishni majburlash uchun oddiy yordamchi funksiya (ishonchli emas, lekin ba'zi hollarda yordam berishi mumkin)
function forceGarbageCollection() {
 if (global.gc) {
  global.gc();
 }
}

describe('MyComponent', () => {
 let container = null;
 beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
 });

 afterEach(() => {
  unmountComponentAtNode(container);
  container.remove();
  container = null;
  forceGarbageCollection();
 });

 it('xotira sizib chiqmasligi kerak', async () => {
  const initialMemory = performance.memory.usedJSHeapSize;

  render(, container);
  unmountComponentAtNode(container);
  forceGarbageCollection();

  // Axlat yig'ish sodir bo'lishi uchun qisqa vaqt kuting
  await new Promise(resolve => setTimeout(resolve, 500));

  const finalMemory = performance.memory.usedJSHeapSize;

  expect(finalMemory).toBeLessThan(initialMemory + 1024 * 100); // Kichik xatolik chegarasiga ruxsat bering (100KB)
 });
});

Ushbu misol komponentni render qiladi, uni o'chiradi, axlat yig'ishni majburlaydi va keyin xotira ishlatilishi sezilarli darajada oshganligini tekshiradi. Eslatma: performance.memory ba'zi brauzerlarda eskirgan, agar kerak bo'lsa, alternativlarni ko'rib chiqing.

2. Cypress yoki Selenium bilan uchdan-uchga (End-to-End) testlar

Uchdan-uchga testlar, foydalanuvchi o'zaro ta'sirlarini simulyatsiya qilish va vaqt o'tishi bilan xotira sarfini kuzatish orqali xotira sizib chiqishini aniqlash uchun ham ishlatilishi mumkin.

Avtomatlashtirilgan xotira sizib chiqishini aniqlash uchun vositalar

Xotira sizib chiqishini aniqlash jarayonini avtomatlashtirishga yordam beradigan bir nechta vositalar mavjud:

• MemLab (Facebook): Ochiq manbali JavaScript xotirasini testlash freymvorki.
• LeakCanary (Square - Android uchun, lekin konsepsiyalar qo'llaniladi): Asosan Android uchun bo'lsa-da, sizib chiqishni aniqlash tamoyillari JavaScript'ga ham tegishli.

Xotira sizib chiqishini tuzatish: Bosqichma-bosqich yondashuv

Xotira sizib chiqishidan shubhalansangiz, muammoni aniqlash va tuzatish uchun quyidagi amallarni bajaring:

1. Sizib chiqishni takrorlang: Sizib chiqishni keltirib chiqaradigan aniq foydalanuvchi o'zaro ta'sirlarini yoki komponent hayot sikllarini aniqlang.
2. Xotira ishlatilishini profillang: Xotira suratlari va ajratish vaqt shkalalarini olish uchun brauzer ishlab chiquvchi vositalaridan foydalaning.
3. Sizib chiqayotgan obyektlarni aniqlang: "Axlat yig'uvchi" tomonidan tozalanmayotgan obyektlarni topish uchun xotira suratlarini tahlil qiling.
4. Obyekt havolalarini kuzatib boring: Kodingizning qaysi qismlari sizib chiqayotgan obyektlarga havolalarni ushlab turganini aniqlang.
5. Sizib chiqishni tuzating: Tegishli tozalash mantig'ini amalga oshiring (masalan, taymerlarni tozalash, hodisa tinglovchilarini olib tashlash, kuzatuvchilardan obunani bekor qilish).
6. Tuzatishni tekshiring: Sizib chiqish bartaraf etilganiga ishonch hosil qilish uchun profil yaratish jarayonini takrorlang.

Xulosa

Xotira sizib chiqishi React ilovalarining ishlashi va barqarorligiga sezilarli ta'sir ko'rsatishi mumkin. Xotira sizib chiqishining umumiy sabablarini tushunish, komponentlarni tozalash bo'yicha eng yaxshi amaliyotlarga rioya qilish va tegishli aniqlash va tuzatish vositalaridan foydalanish orqali siz ushbu muammolarning ilovangizning foydalanuvchi tajribasiga ta'sir qilishining oldini olishingiz mumkin. Muntazam kod tekshiruvlari, puxta testlash va xotirani boshqarishga proaktiv yondashuv mustahkam va samarali React ilovalarini yaratish uchun zarurdir. Yodda tutingki, oldini olish har doim davolashdan yaxshiroqdir; boshidanoq sinchkovlik bilan tozalash keyinchalik tuzatish vaqtini sezilarli darajada tejaydi.