useEffect va useLayoutEffect

-React render vaqtini tushunish - ekran sifatini yaxshilash uchun

1. Ish jarayonida aniqlangan muammo: ekranning tebranishi

Joriy yil loyiha uchun frontend operatsiyalarini olib borishda avvalgi murakkab tarkib tuzilmasini o'qish oson bo'lgan shaklda tartibga keltirdim va takrorlanuvchi holatni boshqarish va uslub hisoblash logikasini yaxshilash ustida ish olib bordim. Ko'pchilik takomillashtirish ishlari funksiya o'zgarishidan ko'ra texnik xizmat ko'rsatishni oshiruvchi refaktoringga yaqin bo'lsa-da, kodlarni ko'rib chiqish jarayonida foydalanuvchilar birlamchi his etishi mumkin bo'lgan UI sifat muammolarini ham aniqladim.

Eng ko'rsatadigan muammo bu ma'lum bir komponent ekranda birinchi marta paydo bo'lganida juda qisqa vaqtda tabiiy bo'lmagan tarzda miltillashi edi. Funktsional jihatdan u normal ishladi, lekin ekran bir marta noto'g'ri o'lchovda chizilganidan so'ng, darhol to'g'ri o'lchamga qaytarilganligi sababli foydalanuvchi uchun foydalanish tartibi qizg'in ko'rinardi. Bunday hodisani ko'pincha Miltillash yoki O'lcham O'zgarishi deb atash mumkin.

Muammoli komponent brauzer kengligiga mos ravishda o'z kengligini hisoblash kerak edi. Masalan, brauzer kengligining yarmi komponent kengligi sifatida ishlatilishi yoki ota elementning haqiqiy o'lchami asosida ichki elementlarni qayta joylashtirish kerak edi. Ammo mavjud amalga oshirilishida bu hisoblash useEffect ichida amalga oshirilgenligi sababli brauzer avval ekranni chizgan va keyin kenglikni tuzatish mantig'i bajarilgan.

Natijada foydalanuvchi dastlabki rendering vaqtida noto'g'ri kenglik va tuzatishdan keyingi kenglikni ko'rdi. Juda qisqa vaqt ichida, lekin vizual jihatdan qaltislik kabi tuyuldi va ayniqsa, ekran o'lchamlari tez-tez o'zgaradigan yoki moslashuvchan maket muhim bo'lgan joylarda sifatning pasayishiga olib kelishi mumkin edi.

2. useEffect va useLayoutEffectning asosiy farqlari

React'da useEffect va useLayoutEffect ikkisi ham renderingdan so'ng ma'lum yon ta'sirlarni bajarish uchun hooklardir. Ularni ishlatish usuli juda o'xshash bo'lganligi sababli, dastlab ikkita hook o'rtasidagi farqni sezish qiyin bo'lishi mumkin. Ammo ijro vaqti bo'yicha aniq farq bor va bu farq ekranning qaltirashida muhim mezon hisoblanadi.

useEffect brauzer haqiqatan ham ekranini chizishidan keyin asinxron ravishda bajariladi. Ya'ni, React Virtual DOM o'zgarishlarini haqiqiy DOMga aks ettiradi va brauzer bo'yoqni (Paint) tugatgandan so'ng bajariladi. Shuning uchun, ma'lumotlarni olish, loglarni jo'natish, obuna olish, voqealar tinglovchilarini ro'yxatga olish kabi ekranning birinchi bo'yoq tugashini to'xtatishni talab qilmaydigan ishlar uchun mos keladi.

Biroq useLayoutEffect DOM o'zgarishlari tugagandan so'ng, brauzer ekranini chizishdan oldin sinxron ravishda bajariladi. Bu, useLayoutEffect ichida DOM ning o'lchovi yoki joylashuvini o'lchash va natijalarga ko'ra holatni o'zgartirish demakdir, foydalanuvchilar tuzatishdan oldin ekranni ko'rmaydilar va faqat oxirgi tuzatilgan ekranni ko'radilar.

Shuning uchun DOM elementlarining o'lchovlari, aylantirish joyining tuzatilishi, asbob yaxlitining joylashuvi, modallar yoki tushadigan ro'yxatlarning joylashuvi kabi ekran ko'rsatishdan oldin to'g'ri bo'lishi kerak bo'lgan ishlar uchun useLayoutEffect ko'proq mos keladi. Aks holda, ushbu ishlarni useEffect orqali bajarish foydalanuvchilarni dastlabki ekran va tuzatishdan keyingi ekran o'rtasidagi farqni qisqacha ko'rishlariga olib keladi va bu paytda tebranishga o'xshash hodisa yuzaga kelishi mumkin.

3. Mavjud kodning muammolari

Mavjud kod komponentlar joylashtirilgandan so'ng, useEffect yordamida brauzer kengligini asos qilib olib holatni qayta o'rnatish usulida edi. Kodga qaraganda oddiy va muammosiz ko‘rinadi, ammo asl renderlanish tartibiga qaraganda, chaqinishlar yuzaga kelishi mumkin bo‘lgan tuzilma edi.

Boshida renderlashda useState ning dastlabki qiymati sifatida bir marta ekran chiziladi. Shundan so'ng, brauzer bo'yoqlari tugallangandan so'ng useEffect ishga tushadi va setWidth chaqiriladi. Holat o'zgarganda, React yana renderlashni amalga oshiradi va shunda oxirgi kenglik aks ettiriladi. Ya'ni, foydalanuvchi tuzatishdan oldin va keyin ekranlarni ko'radi.

Shuningdek, mavjud kod brauzerning o'lchamlarini o'zgartirish hodisalariga etarlicha javob bermadi. Birinchi render vaqtida kenglik hisoblanadi, lekin foydalanuvchi brauzer o'lchamini o'zgartirganda, komponent kengligini qayta hisoblash jarayoni mavjud bo'lmasa, responsiv UI sifatida izchillik yo'qoladi. Shuning uchun, hook o'zgarishi bilan o'lcham o'zgarishi hodisalarini qo'shish va ekran o'lchami o'zgarishlariga javob berishga aylantirish kerak edi.

Mavjud kod misoli quyidagilardir.

export const ExampleComponent = () => {  
  const [width, setWidth] = useState(window.innerWidth / 2);  

useEffect(() => {    
  setWidth(window.innerWidth / 2);  
}, []);  

return <div style={{ width: width, height: 100 }} />;
};

4. useLayoutEffectni qo'llashga doir yaxshilangan kod

Yaxshilanish yo'nalishi aniq edi. Ekranga chizilishidan oldin kenglikni hisoblashni tugatish kerak edi, shuning uchun useEffectni useLayoutEffectga o'zgartirdim. useLayoutEffect DOM o'zgarishidan keyin, brauzer haqiqiy ekranni chizishidan oldin amalga oshiriladi, shuning uchun dastlabki ekranning noto'g'ri o'lchamlarda ko'rsatilishining oldini olish mumkin.

Bundan tashqari, brauzer kengligi o'zgarganda komponent kengligini qayta hisoblash uchun resize hodisasini ro'yxatdan o'tkazish uchun tuzilgan. Ushbu vaqtda komponent unmount qilinganida hodisa eslatmalarini albatta olib tashlash kerak. Aks holda, ortiqcha hodisa yordamchilari davom etadi, bu esa xotira oqishi yoki takroriy bajarilish muammolariga olib kelishi mumkin.

Shuning uchun yaxshilangan kodda addEventListener va removeEventListener ni birgalikda ishlatib, ro'yxatdan o'tkazish va olib tashlashni aniq hal qildik.

O'zgartirilgan kod quyidagicha.

import { useLayoutEffect, useState } from 'react';
  
export const ExampleComponent = () => {  
  const [width, setWidth] = useState(() => window.innerWidth / 2);
  
  useLayoutEffect(() => {    
    const handleResize = () => {      
      setWidth(window.innerWidth / 2);
    }; 
  
    handleResize();
    window.addEventListener('resize', handleResize);
  
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);
  
  return l&tdiv style={{ width: width, height: 100 }} />;
;};

Ushbu kodda komponent o'rnatilgandan so'ng darhol handleResize bir marta bajariladi va hozirgi brauzer kengligi asosida holatni tuzatadi. Keyinchalik, resize hodisasi yuz berishi bilan har safar shu hisob-kitobni takrorlaydi. cleanup funktsiyasida ro'yhatga olingan hodisa tinglovchilari olib tashlanadi, bu esa komponent hayot tsikliga mos xavfsiz ishni ta'minlaydi.

Boshlang'ich qiymatini useState(() => window.innerWidth / 2) kabi funktsiya shaklida uzatish ham kichik yaxshilanishdir. useState'ga funksiya uzatish usuli kechiktirilgan boshlash (Lazy Initialization) deb ataladi, bunday amalga oshirish esa boshlang'ich rendering paytida bir marta hisoblanishi sababli keraksiz hisoblashlarni kamaytirishga yordam beradi. Biroq, server tomoni rendering muhitida window ob'ekti mavjud bo'lmasligi mumkin, shuning uchun alohida himoya mantiqini ta'minlash zarur.

5. Qachon useLayoutEffect'dan foydalanish kerak?

useLayoutEffect ekranning tebranishini kamaytirishga samarali, ammo har qanday vaziyatda useEffect o'rniga foydalanish kerak bo'lgan xook emas. useLayoutEffect brauzerning bo'yashini kechiktirishi mumkin, shuning uchun haddan tashqari foydalanilganda, aksincha, dastlabki renderlash samaradorligini pasaytirishi mumkin.

Shuning uchun mezonlarni aniq belgilash yaxshidir. Agar ekran chizilganidan keyin ishlash foydalanuvchi tajribasiga muammo tug'dirmasa, useEffect'dan foydalanish ma'qul. Aksincha, ekran chizilishidan oldin DOMni o'lchash yoki joylashuvni to'g'rilash kerak bo'lsa va to'g'rilashdan oldin ekran foydalanuvchiga ko'rsatib bo'lmaydigan bo'lsa, useLayoutEffectni ko'rib chiqish mumkin.

6. Qo‘llashdan keyin erishilgan ta'sirlar va qayta ko‘rib chiqish

useLayoutEffectni qo‘llaganimizdan so‘ng dastlabki renderlash paytidagi g‘alati miltillash yo‘qoldi va brauzer o‘lchamini o‘zgartirganda komponent kengligi tabiiy ravishda sinxronlandi. Funksiya o‘z-o‘zicha kichik o‘zgarish edi, lekin foydalanuvchiga ko‘rinadigan ekran sifati aniq yaxshilandi.

Bu tajribadan kelib chiqib, useEffect kabi tez-tez ishlatiladigan xoklarni tanlashda yanada ehtiyotkor bo‘lish kerakligini yana bir bor his qildim. Tanish kod har doim mos kelaverishi shart emas va React-ning render jarayoni va brauzerning bo‘yoq vaqtini tushunmasdan yaxshiroq UI yaratish mumkin emasligini ham his qildim.

Xususan, operatsion ishlar yangi funksiyalar yaratishdan tashqari, mavjud koddagi foydalanuvchilar tomonidan hiss qilingan kichik noqulayliklarni aniqlash va yaxshilash muhimdir. Ekran qaltirashi kabi kichik masalalar takroran ko‘rinadigan bo‘lsa, bu xizmatning mukammallik darajasini pasaytiruvchi omil bo‘ladi.

Natijada, ushbu yaxshilanish useEffect va useLayoutEffect farqini faqatgina grammatik jihatdan tushunishdan iborat bo'lib qolmasdan, haqiqiy foydalanuvchi tajribasi bilan bog'liq ravishda baholash imkoniyatini berdi. Kelajakda bo'laklar ishlatilganda, 'qachon ishlaydi', 'ekranda qanday ta'sir ko'rsatadi', 'foydalanuvchiga tuzatishdan oldingi holat ko'rsatilishi mumkinmi' kabi masalalarni hisobga olish zarurligini his qildim.

7. Amaliy qo'llashda hisobga olingan nuqtalar

useLayoutEffect ni qo'llashdan oldin, bu faqat mijoz muhitida ishlaydigan kod ekanligini ham tekshirish kerak. Agar siz to'g'ridan-to'g'ri brauzerga oid ob'ektlar - window, document, ResizeObserver kabi narsalarni ishlatsangiz, server tomonida rendering muhitida xatoliklar yuzaga kelishi mumkin.

Shuningdek, oddiygina brauzerning umumiy kengligini hisoblashdan ko'ra, haqiqiy komponent joylashtirilgan ota konteynerining o'lchovlari asosida hisoblash ko'proq to'g'ri bo'lishi mumkin. Bu holatda, window resize hodisasi yetarli bo'lmasligi mumkin va ResizeObserver dan foydalanish, ma'lum DOM elementi o'lchovining o'zgarishlarini yanada aniqroq kuzatishga imkon berishi mumkin. Masalan, yon panelning ochilishi/yopilishi, tablarni o'tkazish, ota joylashuvni o'zgartirish kabi holatlarda brauzerning o'lchami o'zgarmasa ham, komponent maydoni o'zgaradigan vaziyatlarda javob berishi mumkin.

Biroq ResizeObserver ham juda ko'p elementlarga beparvo tarzda qo'llanilsa, ishlash yukini keltirib chiqarishi mumkin. Shuning uchun haqiqatda o'lchov qilish zarur bo'lgan asosiy elementlarga qo'llash va hisoblangan natija oldingi qiymat bilan bir xil bo'lsa, setState'ni chaqirmaslik orqali keraksiz qayta randerlashni kamaytirish yaxshidir. Kichik farq bo'lib tuyulishi mumkin, lekin ishchi ekranlarda bunday kichik optimallashtirishlar to'planib, umumiy foydalanuvchi tajribasiga ta'sir qiladi.

8. Xulosa: Hook tanlash mezonlarini aniq belgilash

Ushbu misolni tugatganda, useEffect va useLayoutEffect tanlash mezoni oddiygina qaysi hook ko'proq ishlatilishini emas, balki ushbu ish uchun brauzerning bo'yash vaqtidan kelib chiqadi. Agar ekraningizda dastlabki ko'rinadigan qiymat bilan muammo bo'lmasa va keyinchalik asinxron ravishda ishlash yaxshi bo'lsa, useEffect mos keladi. Aksincha, noto'g'ri joylashuv foydalanuvchilarga ko'rsatilishi mumkin bo'lmasa, useLayoutEffectni ko'rib chiqish kerak. Ekran silkinishi yoki qaltirashlari funksional nuqtai nazardan kamchilik emas, ammo foydalanuvchilar buni beqaror ekran sifatida qabul qilishi mumkin. Shu sababli, frontend dasturlashda ma'lumot oqimi bilan bir qatorda, rasmiylashtirish tartibi, brauzerning bo'yash vaqti va DOM o'lchov vaqtilarini tushunish muhimdir.

Oxir-oqibat, ushbu taklif oddiygina useEffectni useLayoutEffectga almashtirish emas, balki React komponentining haqiqiy brauzerda qanday tartibda rasmiylashtirilishi va foydalanuvchilarga qanday ko'rinishi haqida yana bir marta ko'rib chiqish ishini amalga oshirganidir.

Kelajakda xush kelibsiz, hulq atamasi ishlatilganda uni tanlashda odat tusiga olmaslik kerak, buning o'rniga kodning bajarilish vaqti va foydalanuvchi ekranga ta'sirini hisobga olib, aniqroq qaror qabul qilish zarur.

9. Qayta paydo bo'lishining oldini olish uchun tekshirish mezonlari

Shunday muammolar takrorlanmasligi uchun keyingi refaktoring jarayonida bir nechta mezonlar belgilab komponentlarni tekshirdim.

Birinchisi, holat o'zgarishi aslida ekran o'lchami yoki joylashuvini o'zgartiradimi-yo'qmi, tekshirishdir. Oddiy ma'lumotlarni saqlash yoki tashqi aloqa uchun useEffect etarli, lekin holat o'zgarishi natijalari to'g'ridan-to'g'ri maketga ta'sir qilsa, bajarish vaqti qayta ko'rib chiqilishi kerak.

Ikkinchisi, dastlabki render qiymati foydalanuvchiga ko'rsatilishi mumkinligini aniqlashdir. Noto'g'ri joylashuvdagi Tooltip, ochilmagan Accordion, ekrandan tashqariga chiqib ketgan Dropdown kabi tuzatishdan oldin holat foydalanuvchiga g'alati ko'rinadigan bo'lsa, useLayoutEffect yoki CSS asosidagi oldindan nazorat zarur bo'ladi.

Uchinchisi, JavaScript orqali hisoblash kerak bo'lgan qiymatmi yoki faqat CSS bilan hal qilinishi mumkinligini aniqlashdir. JavaScript hisoblashlar faqat zarur hollarda foydalaniladi va o'zgaruvchan orqali mumkin bo'lganicha CSS boshqarishi uchun loyihalashtirilgan bo'lishi ma'qulroqdir.

To'rtinchisi, hodisa tinglovchisi va tozalashni birga yozishdir. resize, scroll, mousemove kabi hodisalar tez-tez sodir bo'lganligi sababli, komponent unmount qilinganidan so'ng tinglovchilar qolsa, bu ishlash muammolariga va kutilmagan holat yangilanishlariga olib kelishi mumkin. Shuning uchun, hook ichida tashqi resurslarni ro'yxatdan o'tkazgan bo'lsangiz, tozalash funktsiyasida ozod etish andozasini o'zlashtirishingiz kerak.

10. Xulosa

useEffect va useLayoutEffect grammatik jihatdan juda o'xshash, lekin brauzer rendering jarayoni ichida mutlaqo turlicha vaqtda amalga oshiriladi. Ushbu misoldagi kabi, avval sahna chizilib, keyin tuzatiladigan tuzilmada useEffect tabiiy bir tanlovga o'xshasa-da, haqiqiy foydalanuvchi tajribasiga pariltir yaratishi mumkin.

useLayoutEffect bunday muammolarni hal qilish uchun vosita, lekin renderingni to'xtatishi mumkinligi sababli faqat zarur joylarda cheklangan holda ishlatish ma'qul. Nihoyat, muhim narsa ma'lum bir hookni doimo afzal ko'rish emas, balki ushbu logic sahnada ko'rinishidan oldin tugallanishi kerakligini aniqlashdir.

Ushbu tajriba orqali kichik UI hodisalari ham Reactning rendere qilish tartibi, brauzerning bo'yash vaqti va DOMni o'lchash usuli bilan bog'liqligini his qildim.

Kelajakda faqat ishlaydigan kod yozish bilan cheklanmasdan, foydalanuvchilar haqiqatan ham ko'radigan ekran oqimini hisobga olgan holda frontend kodini takomillashtirishni maqsad qilaman.

May