React Contextni optimallashtirish: Keraksiz qayta renderlarning oldini olish

React Context – bu sizning ilovangizda global holatni boshqarish uchun kuchli vositadir. U har bir darajada proplarni qoʻlda uzatmasdan komponentlar oʻrtasida maʼlumotlarni almashish imkonini beradi. Biroq, notoʻgʻri foydalanish unumdorlik muammolariga, xususan, foydalanuvchi tajribasiga taʼsir qiluvchi keraksiz qayta renderlarga olib kelishi mumkin. Ushbu maqola ushbu muammolarning oldini olish uchun React Contextni optimallashtirish boʻyicha toʻliq qoʻllanmani taqdim etadi.

Muammoni tushunish: Qayta renderlar kaskadi

Standart holatda, kontekst qiymati oʻzgarganda, kontekstni isteʼmol qiladigan barcha komponentlar, kontekstning oʻzgargan qismini ishlatishidan qatʼi nazar, qayta renderlanadi. Bu koʻplab komponentlarning keraksiz ravishda qayta renderlanishiga olib keladigan zanjirli reaksiyani keltirib chiqarishi mumkin, bu esa, ayniqsa, katta va murakkab ilovalarda unumdorlikning pasayishiga olib keladi.

React yordamida yaratilgan yirik elektron tijorat ilovasini tasavvur qiling. Siz kontekstdan foydalanuvchi autentifikatsiyasi holati, xarid savatchasi maʼlumotlari yoki joriy tanlangan valyutani boshqarish uchun foydalanishingiz mumkin. Agar foydalanuvchi autentifikatsiyasi holati oʻzgarsa (masalan, tizimga kirish yoki chiqish) va siz oddiy kontekstni amalga oshirishdan foydalanayotgan boʻlsangiz, har bir komponent autentifikatsiya kontekstini isteʼmol qiladi, hatto faqat mahsulot tafsilotlarini koʻrsatadigan va autentifikatsiya maʼlumotlariga tayanmaydiganlar ham qayta renderlanadi. Bu juda samarasiz.

Nima uchun qayta renderlar muhim?

Qayta renderlarning oʻzi aslida yomon emas. Reactning muvofiqlashtirish jarayoni samarali boʻlishi uchun moʻljallangan. Biroq, haddan tashqari koʻp qayta renderlar quyidagilarga olib kelishi mumkin:

• Protsessor (CPU) dan foydalanishning ortishi: Har bir qayta render Reactdan virtual DOMni taqqoslashni va potentsial ravishda haqiqiy DOMni yangilashni talab qiladi.
• Foydalanuvchi interfeysi (UI) yangilanishlarining sekinlashishi: Brauzer qayta renderlash bilan band boʻlganida, u foydalanuvchi harakatlariga kamroq javob berishi mumkin.
• Batareya quvvatining sarflanishi: Mobil qurilmalarda tez-tez qayta renderlanish batareya quvvatiga sezilarli taʼsir qilishi mumkin.

React Contextni optimallashtirish usullari

Yaxshiyamki, React Contextdan foydalanishni optimallashtirish va keraksiz qayta renderlarni minimallashtirish uchun bir nechta usullar mavjud. Bu usullar komponentlarning ular bogʻliq boʻlgan kontekst qiymati aslida oʻzgarmaganida qayta renderlanishining oldini olishga qaratilgan.

1. Kontekst qiymatini memoizatsiya qilish

Eng asosiy va koʻpincha eʼtibordan chetda qoladigan optimallashtirish bu kontekst qiymatini memoizatsiya qilishdir. Agar kontekst qiymati har bir renderda yaratiladigan obyekt yoki massiv boʻlsa, React uning tarkibi bir xil boʻlsa ham, uni yangi qiymat deb hisoblaydi. Bu asosiy maʼlumotlar oʻzgarmagan taqdirda ham qayta renderlarni keltirib chiqaradi.

Misol:

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

const AuthContext = createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  // Yomon: Qiymat har bir renderda qayta yaratiladi
  // const authValue = { user, login: () => setUser({ name: 'John Doe' }), logout: () => setUser(null) };

  // Yaxshi: Qiymatni memoizatsiya qiling
  const authValue = useMemo(
    () => ({ user, login: () => setUser({ name: 'John Doe' }), logout: () => setUser(null) }),
    [user]
  );

  return (
    
      {children}
    
  );
}

export { AuthContext, AuthProvider };

            

              
                Copy
              
            
          

Ushbu misolda useMemo authValue faqat user holati oʻzgarganda oʻzgarishini taʼminlaydi. Agar user oʻzgarmasa, isteʼmol qiluvchi komponentlar keraksiz ravishda qayta renderlanmaydi.

Global jihat: Bu namuna foydalanuvchi afzalliklarini (masalan, til, mavzu) boshqarishda ayniqsa foydalidir, chunki bu oʻzgarishlar kamdan-kam sodir boʻlishi mumkin. Masalan, Yaponiyadagi foydalanuvchi oʻz tilini yapon tiliga oʻrnatgan boʻlsa, useMemo boshqa kontekst qiymatlari oʻzgarganda, lekin til afzalligi oʻzgarmaganida keraksiz qayta renderlarning oldini oladi.

2. useContext bilan selektor namunasi

Selektor namunasi kontekst qiymatidan komponentga kerak boʻlgan faqat maʼlum maʼlumotlarni ajratib oladigan funksiya yaratishni oʻz ichiga oladi. Bu bogʻliqliklarni ajratishga va kontekstning ahamiyatsiz qismlari oʻzgarganda qayta renderlarning oldini olishga yordam beradi.

Misol:

            
import React, { useContext } from 'react';
import { AuthContext } from './AuthContext';

function ProfileName() {
  const user = useContext(AuthContext).user; //To'g'ridan-to'g'ri kirish, AuthContext'dagi har qanday o'zgarishda qayta renderga sabab bo'ladi
  const userName = useAuthUserName();  //Selektor ishlatadi

  return 
Xush kelibsiz, {userName ? userName : 'Mehmon'}
;
}

function useAuthUserName() {
    const { user } = useContext(AuthContext);
    return user ? user.name : null;
}



            

              
                Copy
              
            
          

Ushbu misol kontekstga toʻgʻridan-toʻgʻri kirish AuthContext ichidagi har qanday oʻzgarishlarda qayta renderlarni qanday keltirib chiqarishini koʻrsatadi. Keling, buni selektor bilan yaxshilaymiz:

            
import React, { useContext, useMemo } from 'react';
import { AuthContext } from './AuthContext';

function ProfileName() {
    const userName = useAuthUserName();

    return 
Xush kelibsiz, {userName ? userName : 'Mehmon'}
;
}

function useAuthUserName() {
    const { user } = useContext(AuthContext);
    return useMemo(() => user ? user.name : null, [user]);
}


            

              
                Copy
              
            
          

Endi ProfileName faqat foydalanuvchining ismi oʻzgarganda qayta renderlanadi, hatto AuthContext ichidagi boshqa xususiyatlar yangilansa ham.

Global jihat: Ushbu namuna murakkab foydalanuvchi profillariga ega boʻlgan ilovalarda qimmatlidir. Masalan, aviakompaniya ilovasi foydalanuvchining sayohat afzalliklari, tez-tez uchuvchi raqami va toʻlov maʼlumotlarini bitta kontekstda saqlashi mumkin. Selektorlardan foydalanish foydalanuvchining tez-tez uchuvchi raqamini koʻrsatadigan komponentning faqat toʻlov maʼlumotlari yangilanganda emas, balki aynan shu maʼlumot oʻzgarganda qayta renderlanishini taʼminlaydi.

3. Kontekstni iste'mol qilish uchun maxsus hooklar

Selektor namunasini maxsus hooklar bilan birlashtirish kontekst qiymatlarini isteʼmol qilish va qayta renderlarni optimallashtirishning toza va qayta foydalanish mumkin boʻlgan usulini taqdim etadi. Siz maxsus maʼlumotlarni tanlash mantigʻini maxsus hook ichiga joylashtirishingiz mumkin.

Misol:

            
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function useThemeColor() {
  const { color } = useContext(ThemeContext);
  return color;
}

function ThemedComponent() {
  const themeColor = useThemeColor();

  return 
Bu mavzuli komponent.
;
}

            

              
                Copy
              
            
          

Bu yondashuv butun ThemeContext ga obuna boʻlmasdan, har qanday komponentda mavzu rangiga osonlik bilan kirish imkonini beradi.

Global jihat: Xalqarolashtirilgan ilovada joriy lokalni (til va mintaqaviy sozlamalar) saqlash uchun kontekstdan foydalanishingiz mumkin. useLocale() kabi maxsus hook maʼlum formatlash funksiyalari yoki tarjima qilingan satrlarga kirishni taʼminlashi mumkin, bu esa komponentlarning faqat boshqa kontekst qiymatlari yangilanganda emas, balki lokal oʻzgarganda qayta renderlanishini taʼminlaydi.

4. Komponentlarni memoizatsiya qilish uchun React.memo

Kontekstni optimallashtirish bilan ham, agar uning ota-komponenti qayta renderlansa, komponent baribir qayta renderlanishi mumkin. React.memo bu funksional komponentni memoizatsiya qiluvchi yuqori tartibli komponent boʻlib, proplar oʻzgarmagan boʻlsa, qayta renderlarning oldini oladi. Maksimal samara uchun uni kontekstni optimallashtirish bilan birgalikda ishlating.

Misol:

            
import React, { memo } from 'react';

const MyComponent = memo(function MyComponent(props) {
  // ... komponent mantig'i
});

export default MyComponent;

            

              
                Copy
              
            
          

Standart holatda, React.memo proplarni yuzaki taqqoslaydi. Murakkabroq holatlar uchun ikkinchi argument sifatida maxsus taqqoslash funksiyasini taqdim etishingiz mumkin.

Global jihat: Valyuta konvertori komponentini koʻrib chiqing. U miqdor, manba valyutasi va maqsad valyutasi uchun proplarni olishi mumkin. React.memo dan maxsus taqqoslash funksiyasi bilan foydalanish, agar miqdor bir xil boʻlib qolsa, hatto ota-komponentdagi boshqa bogʻliq boʻlmagan prop oʻzgarsa ham, qayta renderlarning oldini olishi mumkin.

5. Kontekstlarni ajratish

Agar sizning kontekst qiymatingiz bir-biriga bogʻliq boʻlmagan maʼlumotlar qismlarini oʻz ichiga olsa, uni bir nechta kichikroq kontekstlarga boʻlishni oʻylab koʻring. Bu komponentlarning faqat oʻzlariga kerak boʻlgan kontekstlarga obuna boʻlishini taʼminlash orqali qayta renderlar doirasini qisqartiradi.

Misol:

            
// Buning o'rniga:
// const AppContext = createContext({ user: {}, theme: {}}); 

// Foydalaning:
const UserContext = createContext({});
const ThemeContext = createContext({});

            

              
                Copy
              
            
          

Bu, ayniqsa, turli komponentlar tanlab isteʼmol qiladigan turli xil xususiyatlarga ega katta kontekst obyektiga ega boʻlganingizda samarali boʻladi.

Global jihat: Murakkab moliyaviy ilovada siz foydalanuvchi maʼlumotlari, bozor maʼlumotlari va savdo konfiguratsiyalari uchun alohida kontekstlarga ega boʻlishingiz mumkin. Bu real vaqt rejimida aksiya narxlarini koʻrsatadigan komponentlarga foydalanuvchi hisobi sozlamalarini boshqaradigan komponentlarda qayta renderlarni keltirib chiqarmasdan yangilanish imkonini beradi.

6. Holatni boshqarish uchun kutubxonalardan foydalanish (Kontekstga alternativlar)

Kontekst oddiyroq ilovalar uchun ajoyib boʻlsa-da, murakkab holatni boshqarish uchun siz Redux, Zustand, Jotai yoki Recoil kabi kutubxonalarni koʻrib chiqishingiz mumkin. Bu kutubxonalar koʻpincha keraksiz qayta renderlarning oldini olish uchun oʻrnatilgan optimallashtirishlarga ega boʻladi, masalan, selektor funksiyalari va mayda donador obuna modellari.

Redux: Redux yagona ombor va bashorat qilinadigan holat konteyneridan foydalanadi. Selektorlar ombordan maʼlum maʼlumotlarni ajratib olish uchun ishlatiladi, bu esa komponentlarga faqat kerakli maʼlumotlarga obuna boʻlish imkonini beradi.

Zustand: Zustand — soddalashtirilgan flux tamoyillaridan foydalangan holda kichik, tez va kengaytiriladigan holatni boshqarish yechimi. U Redux'ning ortiqcha kodlaridan qochib, shunga oʻxshash afzalliklarni taqdim etadi.

Jotai: Jotai — bu komponentlar oʻrtasida osongina almashinishi mumkin boʻlgan kichik, mustaqil holat birliklarini yaratishga imkon beruvchi atomik holatni boshqarish kutubxonasi. Jotai oʻzining soddaligi va minimal qayta renderlari bilan tanilgan.

Recoil: Recoil — bu Facebook tomonidan yaratilgan holatni boshqarish kutubxonasi boʻlib, u "atomlar" va "selektorlar" tushunchasini kiritadi. Atomlar komponentlar obuna boʻlishi mumkin boʻlgan holat birliklari, selektorlar esa ushbu atomlardan olingan qiymatlardir. Recoil qayta renderlar ustidan juda nozik nazoratni taklif qiladi.

Global jihat: Murakkab ilova ustida ishlayotgan global taqsimlangan jamoa uchun holatni boshqarish kutubxonasidan foydalanish kod bazasining turli qismlarida izchillik va bashorat qilish imkoniyatini saqlashga yordam beradi, bu esa disk raskadrovka va unumdorlikni optimallashtirishni osonlashtiradi.

Amaliy misollar va keyslar

Keling, ushbu optimallashtirish usullarini qanday qoʻllash mumkinligi haqida bir nechta real misollarni koʻrib chiqaylik:

• Elektron tijorat mahsulotlari roʻyxati: Elektron tijorat ilovasida mahsulot roʻyxati komponenti mahsulot nomi, rasmi, narxi va mavjudligi kabi maʼlumotlarni koʻrsatishi mumkin. Selektor namunasidan va React.memo dan foydalanish bitta mahsulot uchun faqat mavjudlik holati oʻzgarganda butun roʻyxatning qayta renderlanishining oldini oladi.
• Boshqaruv paneli ilovasi: Boshqaruv paneli ilovasi diagrammalar, jadvallar va yangiliklar lentalari kabi turli vidjetlarni koʻrsatishi mumkin. Kontekstni kichikroq, aniqroq kontekstlarga boʻlish bir vidjetdagi oʻzgarishlar boshqa bogʻliq boʻlmagan vidjetlarda qayta renderlarni keltirib chiqarmasligini taʼminlaydi.
• Real vaqt rejimida savdo platformasi: Real vaqt rejimida savdo platformasi doimiy ravishda yangilanib turadigan aksiya narxlari va buyurtmalar kitobi maʼlumotlarini koʻrsatishi mumkin. Mayda donador obuna modellariga ega boʻlgan holatni boshqarish kutubxonasidan foydalanish qayta renderlarni minimallashtirishga va sezgir foydalanuvchi interfeysini saqlashga yordam beradi.

Unumdorlik yaxshilanishlarini oʻlchash

Ushbu optimallashtirish usullarini qoʻllashdan oldin va keyin, sizning harakatlaringiz haqiqatan ham oʻzgarishlarga olib kelayotganiga ishonch hosil qilish uchun unumdorlik yaxshilanishlarini oʻlchash muhimdir. React DevTools'dagi React Profiler kabi vositalar sizga unumdorlikdagi toʻsiqlarni aniqlashga va ilovangizdagi qayta renderlar sonini kuzatishga yordam beradi.

React Profiler'dan foydalanish: React Profiler ilovangiz bilan ishlash paytida unumdorlik maʼlumotlarini yozib olish imkonini beradi. U tez-tez qayta renderlanadigan komponentlarni ajratib koʻrsatishi va ushbu qayta renderlarning sabablarini aniqlashi mumkin.

Kuzatiladigan metrikalar:

• Qayta renderlar soni: Komponentning necha marta qayta renderlanishi.
• Render davomiyligi: Komponentning renderlanishi uchun ketadigan vaqt.
• Protsessor (CPU) dan foydalanish: Ilova tomonidan isteʼmol qilingan CPU resurslari miqdori.
• Kadrlar chastotasi (FPS): Bir soniyada renderlangan kadrlar soni.

Oldini olish kerak boʻlgan keng tarqalgan xatolar va kamchiliklar

• Haddan tashqari optimallashtirish: Erta optimallashtirmang. Ilovangizning haqiqatan ham unumdorlik muammolarini keltirib chiqaradigan qismlariga eʼtibor qarating.
• Prop oʻzgarishlarini eʼtiborsiz qoldirish: React.memo dan foydalanganda barcha prop oʻzgarishlarini hisobga olganingizga ishonch hosil qiling. Yuzaki taqqoslash murakkab obyektlar uchun yetarli boʻlmasligi mumkin.
• Renderda yangi obyektlar yaratish: Render funksiyasida toʻgʻridan-toʻgʻri yangi obyektlar yoki massivlar yaratishdan saqlaning, chunki bu har doim qayta renderlarni keltirib chiqaradi. Bu qiymatlarni memoizatsiya qilish uchun useMemo dan foydalaning.
• Notoʻgʻri bogʻliqliklar: useMemo va useCallback hooklaringiz toʻgʻri bogʻliqliklarga ega ekanligiga ishonch hosil qiling. Yoʻqolgan bogʻliqliklar kutilmagan xatti-harakatlarga va unumdorlik muammolariga olib kelishi mumkin.

Xulosa

React Contextni optimallashtirish yuqori unumdorlikka ega va sezgir ilovalarni yaratish uchun juda muhimdir. Keraksiz qayta renderlarning asosiy sabablarini tushunish va ushbu maqolada muhokama qilingan usullarni qoʻllash orqali siz foydalanuvchi tajribasini sezilarli darajada yaxshilashingiz va ilovangizning samarali kengayishini taʼminlashingiz mumkin.

Kontekst qiymatini memoizatsiya qilish, selektor namunasi, maxsus hooklar va komponentlarni memoizatsiya qilishga ustunlik berishni unutmang. Agar kontekst qiymatingiz bogʻliq boʻlmagan maʼlumotlarni oʻz ichiga olsa, kontekstlarni boʻlishni oʻylab koʻring. Va optimallashtirish harakatlaringiz samara berayotganiga ishonch hosil qilish uchun unumdorlik yaxshilanishlarini oʻlchashni unutmang.

Ushbu eng yaxshi amaliyotlarga rioya qilish orqali siz notoʻgʻri foydalanish natijasida yuzaga kelishi mumkin boʻlgan unumdorlik muammolaridan qochib, React Context kuchidan foydalanishingiz mumkin. Bu butun dunyo boʻylab foydalanuvchilar uchun yaxshiroq tajriba taqdim etadigan samaraliroq va qoʻllab-quvvatlanadigan ilovalarga olib keladi.

Natijada, React'ning renderlash xatti-harakatini chuqur tushunish, ushbu optimallashtirish strategiyalarini ehtiyotkorlik bilan qoʻllash bilan birgalikda, sizga global auditoriya uchun ajoyib unumdorlikni taʼminlaydigan mustahkam va kengaytiriladigan React ilovalarini yaratish imkoniyatini beradi.