React Memo: Global Ilovalar Uchun Optimallashtirish Texnikalarini Chuqur O'rganish

React foydalanuvchi interfeyslarini yaratish uchun kuchli JavaScript kutubxonasi, ammo ilovalar murakkablashgan sari unumdorlikni optimallashtirish hal qiluvchi ahamiyatga ega bo'ladi. React optimallashtirish vositalari to'plamidagi muhim vositalardan biri bu React.memo. Ushbu blog posti global auditoriya uchun yuqori unumdorlikka ega React ilovalarini yaratish uchun React.memo va unga bog'liq texnikalarni tushunish va samarali ishlatish bo'yicha to'liq qo'llanmani taqdim etadi.

React.memo nima?

React.memo bu funksional komponentni memoizatsiya qiluvchi yuqori darajali komponent (HOC). Oddiyroq qilib aytganda, u agar proplari o'zgarmagan bo'lsa, komponentning qayta render qilinishini oldini oladi. Standart holatda, u proplarni sayoz taqqoslash (shallow comparison) qiladi. Bu, ayniqsa, render qilish uchun hisoblash jihatdan qimmat yoki proplari o'zgarmasa ham tez-tez qayta render qilinadigan komponentlar uchun unumdorlikni sezilarli darajada oshirishi mumkin.

Foydalanuvchi profilini ko'rsatuvchi komponentni tasavvur qiling. Agar foydalanuvchining ma'lumotlari (masalan, ismi, avatari) o'zgarmagan bo'lsa, komponentni qayta render qilishga hojat yo'q. React.memo sizga bu keraksiz qayta renderdan o'tishga imkon beradi va qimmatli qayta ishlash vaqtini tejaydi.

Nima uchun React.memo dan foydalanish kerak?

React.memo dan foydalanishning asosiy afzalliklari quyidagilardan iborat:

• Unumdorlikni Oshirish: Keraksiz qayta renderlarning oldini oladi, bu esa tezroq va silliqroq foydalanuvchi interfeyslariga olib keladi.
• Protsessor Yuklamasini Kamaytirish: Kamroq qayta renderlar protsessorning kamroq ishlatilishini anglatadi, bu ayniqsa mobil qurilmalar va cheklangan internet tezligiga ega hududlardagi foydalanuvchilar uchun muhim.
• Yaxshilangan Foydalanuvchi Tajribasi: Tezkorroq ishlaydigan ilova, ayniqsa sekin internet aloqasi yoki eski qurilmalarga ega foydalanuvchilar uchun yaxshiroq foydalanuvchi tajribasini taqdim etadi.

React.memo dan Asosiy Foydalanish

React.memo dan foydalanish juda oddiy. Shunchaki o'z funksional komponentingizni u bilan o'rab qo'ying:

            import React from 'react';

const MyComponent = (props) => {
 console.log('MyComponent render qilindi');
 return (
 
{props.data}
 );
};

export default React.memo(MyComponent);

            

              
                Copy
              
            
          

Ushbu misolda, MyComponent faqat data propi o'zgarganda qayta render qilinadi. console.log iborasi komponent haqiqatan ham qachon qayta render qilinayotganini tekshirishga yordam beradi.

Sayoz Taqqoslashni (Shallow Comparison) Tushunish

Standart holatda, React.memo proplarni sayoz taqqoslash (shallow comparison) qiladi. Bu shuni anglatadiki, u proplarning qiymatlarining o'zini emas, balki ularning havolalari (references) o'zgarganligini tekshiradi. Ob'ektlar va massivlar bilan ishlaganda buni tushunish muhimdir.

Quyidagi misolni ko'rib chiqing:

            import React, { useState } from 'react';

const MyComponent = (props) => {
 console.log('MyComponent render qilindi');
 return (
 
{props.data.name}
 );
};

const MemoizedComponent = React.memo(MyComponent);

const App = () => {
 const [user, setUser] = useState({ name: 'John', age: 30 });

 const handleClick = () => {
 setUser({ ...user }); // Xuddi shu qiymatlarga ega yangi ob'ekt yaratish
 };

 return (
 

 
 Foydalanuvchini yangilash
 
 );
};

export default App;

            

              
                Copy
              
            
          

Ushbu holatda, user ob'ektining qiymatlari (name va age) bir xil bo'lsa ham, handleClick funksiyasi har safar chaqirilganda yangi ob'ekt havolasini yaratadi. Shuning uchun, React.memo data propining o'zgarganini (chunki ob'ekt havolasi boshqacha) ko'radi va MyComponentni qayta render qiladi.

Maxsus Taqqoslash Funksiyasi

Ob'ektlar va massivlar bilan sayoz taqqoslash muammosini hal qilish uchun React.memo ikkinchi argument sifatida maxsus taqqoslash funksiyasini taqdim etishga imkon beradi. Bu funksiya ikkita argument qabul qiladi: prevProps va nextProps. Agar komponent qayta render qilinmasligi kerak bo'lsa (ya'ni, proplar amalda bir xil bo'lsa) true, qayta render qilinishi kerak bo'lsa false qaytarishi kerak.

Avvalgi misolda maxsus taqqoslash funksiyasidan qanday foydalanish mumkinligi ko'rsatilgan:

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

const MyComponent = (props) => {
 console.log('MyComponent render qilindi');
 return (
 
{props.data.name}
 );
};

const areEqual = (prevProps, nextProps) => {
 return prevProps.data.name === nextProps.data.name && prevProps.data.age === nextProps.data.age;
};

const MemoizedComponent = memo(MyComponent, areEqual);

const App = () => {
 const [user, setUser] = useState({ name: 'John', age: 30 });

 const handleClick = () => {
 setUser({ ...user });
 };

 return (
 

 
 Foydalanuvchini yangilash
 
 );
};

export default App;

            

              
                Copy
              
            
          

Ushbu yangilangan misolda, areEqual funksiyasi user ob'ektlarining name va age xususiyatlarini taqqoslaydi. Endi MemoizedComponent faqat name yoki age o'zgarganda qayta render qilinadi.

React.memo ni Qachon Ishlatish Kerak

React.memo quyidagi holatlarda eng samarali hisoblanadi:

• Proplari tez-tez bir xil bo'ladigan komponentlar: Agar komponentning proplari kamdan-kam o'zgarsa, React.memo dan foydalanish keraksiz qayta renderlarning oldini oladi.
• Render qilish uchun hisoblash jihatdan qimmat komponentlar: Murakkab hisob-kitoblarni bajaradigan yoki katta hajmdagi ma'lumotlarni render qiladigan komponentlar uchun qayta renderlarni o'tkazib yuborish unumdorlikni sezilarli darajada oshirishi mumkin.
• Sof funksional komponentlar: Bir xil kirish uchun bir xil chiqishni beradigan komponentlar React.memo uchun ideal nomzodlardir.

Biroq, shuni ta'kidlash kerakki, React.memo hamma muammolarni hal qiluvchi vosita emas. Uni tartibsiz ishlatish aslida unumdorlikka zarar etkazishi mumkin, chunki sayoz taqqoslashning o'zi ham ma'lum bir xarajatga ega. Shuning uchun ilovangizni profiling qilish va memoizatsiyadan eng ko'p foyda ko'radigan komponentlarni aniqlash juda muhim.

React.memo ga Alternativalar

React.memo kuchli vosita bo'lsa-da, React komponentlari unumdorligini optimallashtirish uchun yagona variant emas. Mana ba'zi alternativlar va qo'shimcha usullar:

1. PureComponent

Sinf komponentlari uchun PureComponent React.memo ga o'xshash funksionallikni taqdim etadi. U ham proplarni, ham state'ni sayoz taqqoslaydi va faqat o'zgarishlar mavjud bo'lganda qayta render qiladi.

            import React from 'react';

class MyComponent extends React.PureComponent {
 render() {
 console.log('MyComponent render qilindi');
 return (
 
{this.props.data}
 );
 }
}

export default MyComponent;

            

              
                Copy
              
            
          

PureComponent sinf komponentlarida keraksiz qayta renderlarning oldini olishning an'anaviy usuli bo'lgan shouldComponentUpdateni qo'lda amalga oshirishga qulay alternativadir.

2. shouldComponentUpdate

shouldComponentUpdate bu sinf komponentlaridagi hayotiy sikl metodi bo'lib, u komponentning qayta render qilinishi kerakligini aniqlash uchun maxsus mantiqni belgilashga imkon beradi. U eng katta moslashuvchanlikni ta'minlaydi, lekin ayni paytda ko'proq qo'l mehnatini talab qiladi.

            import React from 'react';

class MyComponent extends React.Component {
 shouldComponentUpdate(nextProps, nextState) {
 return nextProps.data !== this.props.data;
 }

 render() {
 console.log('MyComponent render qilindi');
 return (
 
{this.props.data}
 );
 }
}

export default MyComponent;

            

              
                Copy
              
            
          

shouldComponentUpdate hali ham mavjud bo'lsa-da, PureComponent va React.memo odatda soddaligi va foydalanish qulayligi uchun afzal ko'riladi.

3. useCallback

useCallback bu funksiyani memoizatsiya qiluvchi React hooki. U funksiyaning memoizatsiya qilingan versiyasini qaytaradi, bu versiya faqat uning bog'liqliklaridan biri o'zgargandagina o'zgaradi. Bu ayniqsa memoizatsiya qilingan komponentlarga callback'larni prop sifatida uzatishda foydalidir.

Quyidagi misolni ko'rib chiqing:

            import React, { useState, useCallback, memo } from 'react';

const MyComponent = (props) => {
 console.log('MyComponent render qilindi');
 return (
 Meni bosing
 );
};

const MemoizedComponent = memo(MyComponent);

const App = () => {
 const [count, setCount] = useState(0);

 const handleClick = useCallback(() => {
 setCount(count + 1);
 }, [count]);

 return (
 

 
 
Hisob: {count}
 
 );
};

export default App;

            

              
                Copy
              
            
          

Ushbu misolda, useCallback handleClick funksiyasining faqat count state'i o'zgarganda o'zgarishini ta'minlaydi. useCallbacksiz, Appning har bir renderida yangi funksiya yaratiladi, bu esa MemoizedComponentning keraksiz qayta render qilinishiga sabab bo'ladi.

4. useMemo

useMemo bu qiymatni memoizatsiya qiluvchi React hooki. U memoizatsiya qilingan qiymatni qaytaradi, bu qiymat faqat uning bog'liqliklaridan biri o'zgargandagina o'zgaradi. Bu har bir renderda qayta ishga tushirilishi shart bo'lmagan qimmat hisob-kitoblardan qochish uchun foydalidir.

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

const App = () => {
 const [input, setInput] = useState('');

 const expensiveCalculation = (str) => {
 console.log('Hisoblanmoqda...');
 let result = 0;
 for (let i = 0; i < str.length * 1000000; i++) {
 result++;
 }
 return result;
 };

 const memoizedResult = useMemo(() => expensiveCalculation(input), [input]);

 return (
 

  setInput(e.target.value)} />
 
Natija: {memoizedResult}
 
 );
};

export default App;

            

              
                Copy
              
            
          

Ushbu misolda, useMemo expensiveCalculation funksiyasining faqat input state'i o'zgarganda chaqirilishini ta'minlaydi. Bu hisob-kitobning har bir renderda qayta bajarilishini oldini oladi, bu esa unumdorlikni sezilarli darajada oshirishi mumkin.

Global Ilovalar Uchun Amaliy Misollar

Keling, React.memo va unga bog'liq texnikalarni global ilovalarda qanday qo'llash mumkinligiga oid ba'zi amaliy misollarni ko'rib chiqaylik:

1. Til Tanlash Komponenti

Til tanlash komponenti ko'pincha mavjud tillar ro'yxatini render qiladi. Bu ro'yxat nisbatan statik bo'lishi mumkin, ya'ni u tez-tez o'zgarmaydi. React.memo dan foydalanish ilovaning boshqa qismlari yangilanganda til tanlash komponentining keraksiz qayta render qilinishini oldini oladi.

            import React, { memo } from 'react';

const LanguageItem = ({ language, onSelect }) => {
 console.log(`LanguageItem ${language} render qilindi`);
 return (
 
 onSelect(language)}>{language}
 );
};

const MemoizedLanguageItem = memo(LanguageItem);

const LanguageSelector = ({ languages, onSelect }) => {
 return (
 

 {languages.map((language) => (
 
 ))}
 
 );
};

export default LanguageSelector;

            

              
                Copy
              
            
          

Ushbu misolda, MemoizedLanguageItem faqat language yoki onSelect propi o'zgarganda qayta render qilinadi. Bu, ayniqsa, tillar ro'yxati uzun bo'lsa yoki onSelect ishlovchisi murakkab bo'lsa, foydali bo'lishi mumkin.

2. Valyuta Konverteri

Valyuta konverteri komponenti valyutalar ro'yxatini va ularning kurslarini ko'rsatishi mumkin. Valyuta kurslari vaqti-vaqti bilan yangilanishi mumkin, ammo valyutalar ro'yxati nisbatan barqaror bo'lib qolishi mumkin. React.memo dan foydalanish valyuta kurslari yangilanganda valyuta ro'yxatining keraksiz qayta render qilinishini oldini oladi.

            import React, { memo } from 'react';

const CurrencyItem = ({ currency, rate, onSelect }) => {
 console.log(`CurrencyItem ${currency} render qilindi`);
 return (
 
 onSelect(currency)}>{currency} - {rate}
 );
};

const MemoizedCurrencyItem = memo(CurrencyItem);

const CurrencyConverter = ({ currencies, onSelect }) => {
 return (
 

 {Object.entries(currencies).map(([currency, rate]) => (
 
 ))}
 
 );
};

export default CurrencyConverter;

            

              
                Copy
              
            
          

Ushbu misolda, MemoizedCurrencyItem faqat currency, rate yoki onSelect propi o'zgarganda qayta render qilinadi. Bu, agar valyuta ro'yxati uzun bo'lsa yoki valyuta kurslari tez-tez yangilanib tursa, unumdorlikni oshirishi mumkin.

3. Foydalanuvchi Profilini Ko'rsatish

Foydalanuvchi profilini ko'rsatish ism, profil rasmi va ehtimol bio kabi statik ma'lumotlarni ko'rsatishni o'z ichiga oladi. `React.memo` dan foydalanish komponentning har bir ota-ona komponent yangilanishida emas, balki faqat foydalanuvchi ma'lumotlari haqiqatan o'zgarganda qayta render qilinishini ta'minlaydi.

            import React, { memo } from 'react';

const UserProfile = ({ user }) => {
 console.log('UserProfile render qilindi');
 return (
 

 
{user.name}
 
 
{user.bio}
 
 );
};

export default memo(UserProfile);

            

              
                Copy
              
            
          

Bu, ayniqsa, `UserProfile` kattaroq, tez-tez yangilanib turadigan boshqaruv paneli yoki ilovaning bir qismi bo'lsa va foydalanuvchi ma'lumotlarining o'zi tez-tez o'zgarmasa, juda foydali.

Umumiy Xatolar va Ulardan Qochish Yo'llari

React.memo qimmatli optimallashtirish vositasi bo'lsa-da, umumiy xatolardan xabardor bo'lish va ulardan qochish yo'llarini bilish muhim:

• Haddan tashqari memoizatsiya: React.memo ni tartibsiz ishlatish aslida unumdorlikka zarar etkazishi mumkin, chunki sayoz taqqoslashning o'zi ham ma'lum bir xarajatga ega. Faqat undan foyda ko'rishi mumkin bo'lgan komponentlarni memoizatsiya qiling.
• Noto'g'ri bog'liqlik massivlari: useCallback va useMemo dan foydalanganda, to'g'ri bog'liqlik massivlarini taqdim etganingizga ishonch hosil qiling. Bog'liqliklarni qoldirib ketish yoki keraksiz bog'liqliklarni kiritish kutilmagan xatti-harakatlar va unumdorlik muammolariga olib kelishi mumkin.
• Proplarni o'zgartirish (mutating): Proplarni to'g'ridan-to'g'ri o'zgartirishdan saqlaning, chunki bu React.memo ning sayoz taqqoslashini chetlab o'tishi mumkin. Proplarni yangilashda har doim yangi ob'ektlar yoki massivlar yarating.
• Murakkab taqqoslash mantig'i: Maxsus taqqoslash funksiyalarida murakkab taqqoslash mantig'idan saqlaning, chunki bu React.memo ning unumdorlik afzalliklarini yo'qqa chiqarishi mumkin. Taqqoslash mantig'ini iloji boricha sodda va samarali saqlang.

Ilovangizni Profiling Qilish

React.memo haqiqatan ham unumdorlikni oshirayotganini aniqlashning eng yaxshi usuli - ilovangizni profiling qilish. React profiling uchun bir nechta vositalarni taqdim etadi, jumladan React DevTools Profiler va React.Profiler API.

React DevTools Profiler sizga ilovangizning unumdorlik izlarini yozib olish va tez-tez qayta render qilinayotgan komponentlarni aniqlash imkonini beradi. React.Profiler API esa ma'lum komponentlarning render vaqtini dasturiy ravishda o'lchashga imkon beradi.

Ilovangizni profiling qilish orqali siz memoizatsiyadan eng ko'p foyda ko'radigan komponentlarni aniqlashingiz va React.memo haqiqatan ham unumdorlikni oshirayotganiga ishonch hosil qilishingiz mumkin.

Xulosa

React.memo React komponentlari unumdorligini optimallashtirish uchun kuchli vositadir. Keraksiz qayta renderlarning oldini olish orqali u ilovalaringizning tezligi va sezgirligini oshirib, yaxshiroq foydalanuvchi tajribasiga olib kelishi mumkin. Biroq, React.memo ni oqilona ishlatish va uning haqiqatan ham unumdorlikni oshirayotganiga ishonch hosil qilish uchun ilovangizni profiling qilish muhimdir.

Ushbu blog postida muhokama qilingan tushunchalar va texnikalarni tushunib, siz butun dunyo bo'ylab foydalanuvchilar uchun ilovalaringiz tez va sezgir bo'lishini ta'minlab, global auditoriya uchun yuqori unumdorlikka ega React ilovalarini samarali yaratishingiz mumkin.

React ilovalaringizni optimallashtirishda tarmoq kechikishi va qurilma imkoniyatlari kabi global omillarni hisobga olishni unutmang. Unumdorlik va foydalanish imkoniyatlariga e'tibor qaratib, siz joylashuvi yoki qurilmasidan qat'i nazar, barcha foydalanuvchilar uchun ajoyib tajriba taqdim etadigan ilovalar yaratishingiz mumkin.

Qo'shimcha O'qish va Manbalar

• React.memo Hujjatlari
• useCallback Hujjatlari
• useMemo Hujjatlari
• React'da Unumdorlikni Optimallashtirish
• React Profiler yordamida Komponentlarni Profiling Qilish