Telegram Group & Telegram Channel
React state'ni DOM boshqarganda

O'zi TransitionEvent haqida yozganimning sababi, uni noto‘g‘ri usulda ishlatib qo'yganimni aytish edi. Hozir shu haqida aytib beraman.

Bu API haqida o'qiganimdan keyin, transitionstart va transitionend bilan komponent state'ni boshqarmoqchi bo'ldim.

Kursor komponent ustida borganda, ya'ni "mouseover" bo'lganida, u animatsiya bilan ochilishi kerak. Komponent ichidagi tugma bosilganda esa komponent yopilishi kerak edi.


// pseudo kod
<Component
ref={compRef}
onMouseOver={() => {
if (disabled) return;

startTimer({ disabled: true });
setOpen(true);
}}
onButtonClick={() => {
if (disabled) return;

startTimer({ disabled: true });
setOpen(false);
}}
style={{ transition: "1s" }}
/>


Ochilish va yopilish animatsiyasi vaqtida event listener'lar ishlamasligi kerak, ya'ni "disabled" bo'lishi kerak. Chunki unday qilmasangiz "mouseover" ishga tushib komponent yana ochilib, animatsiya ishga tushib ketishi mumkin. "disabled" bu yerda React state.

Buning uchun men setTimeout'da foydalanyotgandim. Transition boshlanganda disabled===true bo'lib, taymerni ishlatib, tugaganda disabled===false bo'lishi kerak edi.


// pseudo kod
function startTimer({ disabled }) {
setDisabled(true);
setTimeout(() => setDisabled(false), 1000);
}


Shu yerda taymerni butunlay o'chirib tashlab, o'rniga transitionstart va transitionend dan foydalanib ko'rdim. Chunki taymer bilan ishlash murakkab va ko'pincha "bug"larga sabab bo'ladi.


// pseudo kod
<Component
onMouseOver={() => {
if (!disabled) setOpen(true);
}}
onButtonClick={() => {
if (!disabled) setOpen(false);
}}
onTransitionStart={() => setDisabled(true)}
onTransitionEnd={() => setDisabled(false)}
style={{ transition: "1s" }}
/>


Refaktor qilganimdan so'ng, kod ancha soddalashdi va endi "transitionstart"da disabled===true, "transitionend"da esa disabled===false bo'lishi kerak edi. Lekin endi komponent "lipirlay" boshladi. 🤔

Nega? Axir "transitionstart"da event listener'lar "disabled===true" bo'lishi kerak edi-ku?

Biroz mulohazadan keyin tushundimki, "React falsafasi"ga qarshi ish qilib qo'yibman. 😕

Komponent tugmasi bosilganda "transition" ishga tushadi. Bu payda kursor hali komponent ustida turgan bo'ladi-ku, to'g'rimi? Shuning uchun "mouseover" ishga tushib komponentni yana ochib yuboradi (yani ochilish animatsiyasi ishlab ketadi).
Undan KEYINGINA "disabled===true" bo'ladi --- deb o'ylasangiz yanglishasiz. 😄
Chunki endi "transitionend" ishlab "disabled===false" bo'lib qoladi!

Mana sizga chigallik!

React har bir (sinxron) state'lar zanjiri to'liq o'zgarib, virtual DOM "pishgandan" keyin haqiqiy DOM ga o'zgarishlarni kiritadi.
Ya'ni event loop bir marta aylanishiga bitta render bo'ladi!!! (Har holda shunga harakat qiladi. Xato aytgan bo'lsam to'g'irlanglar)

Sichqoncha bilan bog'liq har bir event/hodisa event loop'gai bitta aylanish vazifasini yuklaydi. Komponentimizdagi "onButtonClick" listeneri "disabled" state'ini o'zgartirmaydi. "Disabled" o'zgarishi keyingi event loop'da sodir bo'ladi. Shuning uchun orada undan oldin "mouseenter" tiqilib olishga ulguradi.

Xullas kalom, bu yerdagi eng katta xato shuki, men state'ni DOM dan o'qiganim bo'ladi. Chunki "transitionstart" bu DOM o'zgarishi orqali sodir bo'luvchi event!
React'da state DOM'ni boshqaradi, DOM state'ni emas!!!
Buni React'ni endi o'rganayotgan paytimda o'qiganman.

Shuning uchun e'tiborli bo'linglar. 🙂
👍2



tg-me.com/brogrammist/188
Create:
Last Update:

React state'ni DOM boshqarganda

O'zi TransitionEvent haqida yozganimning sababi, uni noto‘g‘ri usulda ishlatib qo'yganimni aytish edi. Hozir shu haqida aytib beraman.

Bu API haqida o'qiganimdan keyin, transitionstart va transitionend bilan komponent state'ni boshqarmoqchi bo'ldim.

Kursor komponent ustida borganda, ya'ni "mouseover" bo'lganida, u animatsiya bilan ochilishi kerak. Komponent ichidagi tugma bosilganda esa komponent yopilishi kerak edi.


// pseudo kod
<Component
ref={compRef}
onMouseOver={() => {
if (disabled) return;

startTimer({ disabled: true });
setOpen(true);
}}
onButtonClick={() => {
if (disabled) return;

startTimer({ disabled: true });
setOpen(false);
}}
style={{ transition: "1s" }}
/>


Ochilish va yopilish animatsiyasi vaqtida event listener'lar ishlamasligi kerak, ya'ni "disabled" bo'lishi kerak. Chunki unday qilmasangiz "mouseover" ishga tushib komponent yana ochilib, animatsiya ishga tushib ketishi mumkin. "disabled" bu yerda React state.

Buning uchun men setTimeout'da foydalanyotgandim. Transition boshlanganda disabled===true bo'lib, taymerni ishlatib, tugaganda disabled===false bo'lishi kerak edi.


// pseudo kod
function startTimer({ disabled }) {
setDisabled(true);
setTimeout(() => setDisabled(false), 1000);
}


Shu yerda taymerni butunlay o'chirib tashlab, o'rniga transitionstart va transitionend dan foydalanib ko'rdim. Chunki taymer bilan ishlash murakkab va ko'pincha "bug"larga sabab bo'ladi.


// pseudo kod
<Component
onMouseOver={() => {
if (!disabled) setOpen(true);
}}
onButtonClick={() => {
if (!disabled) setOpen(false);
}}
onTransitionStart={() => setDisabled(true)}
onTransitionEnd={() => setDisabled(false)}
style={{ transition: "1s" }}
/>


Refaktor qilganimdan so'ng, kod ancha soddalashdi va endi "transitionstart"da disabled===true, "transitionend"da esa disabled===false bo'lishi kerak edi. Lekin endi komponent "lipirlay" boshladi. 🤔

Nega? Axir "transitionstart"da event listener'lar "disabled===true" bo'lishi kerak edi-ku?

Biroz mulohazadan keyin tushundimki, "React falsafasi"ga qarshi ish qilib qo'yibman. 😕

Komponent tugmasi bosilganda "transition" ishga tushadi. Bu payda kursor hali komponent ustida turgan bo'ladi-ku, to'g'rimi? Shuning uchun "mouseover" ishga tushib komponentni yana ochib yuboradi (yani ochilish animatsiyasi ishlab ketadi).
Undan KEYINGINA "disabled===true" bo'ladi --- deb o'ylasangiz yanglishasiz. 😄
Chunki endi "transitionend" ishlab "disabled===false" bo'lib qoladi!

Mana sizga chigallik!

React har bir (sinxron) state'lar zanjiri to'liq o'zgarib, virtual DOM "pishgandan" keyin haqiqiy DOM ga o'zgarishlarni kiritadi.
Ya'ni event loop bir marta aylanishiga bitta render bo'ladi!!! (Har holda shunga harakat qiladi. Xato aytgan bo'lsam to'g'irlanglar)

Sichqoncha bilan bog'liq har bir event/hodisa event loop'gai bitta aylanish vazifasini yuklaydi. Komponentimizdagi "onButtonClick" listeneri "disabled" state'ini o'zgartirmaydi. "Disabled" o'zgarishi keyingi event loop'da sodir bo'ladi. Shuning uchun orada undan oldin "mouseenter" tiqilib olishga ulguradi.

Xullas kalom, bu yerdagi eng katta xato shuki, men state'ni DOM dan o'qiganim bo'ladi. Chunki "transitionstart" bu DOM o'zgarishi orqali sodir bo'luvchi event!
React'da state DOM'ni boshqaradi, DOM state'ni emas!!!
Buni React'ni endi o'rganayotgan paytimda o'qiganman.

Shuning uchun e'tiborli bo'linglar. 🙂

BY Brogrammist


Warning: Undefined variable $i in /var/www/tg-me/post.php on line 283

Share with your friend now:
tg-me.com/brogrammist/188

View MORE
Open in Telegram


telegram Telegram | DID YOU KNOW?

Date: |

Look for Channels Online

You guessed it – the internet is your friend. A good place to start looking for Telegram channels is Reddit. This is one of the biggest sites on the internet, with millions of communities, including those from Telegram.Then, you can search one of the many dedicated websites for Telegram channel searching. One of them is telegram-group.com. This website has many categories and a really simple user interface. Another great site is telegram channels.me. It has even more channels than the previous one, and an even better user experience.These are just some of the many available websites. You can look them up online if you’re not satisfied with these two. All of these sites list only public channels. If you want to join a private channel, you’ll have to ask one of its members to invite you.

What Is Bitcoin?

Bitcoin is a decentralized digital currency that you can buy, sell and exchange directly, without an intermediary like a bank. Bitcoin’s creator, Satoshi Nakamoto, originally described the need for “an electronic payment system based on cryptographic proof instead of trust.” Each and every Bitcoin transaction that’s ever been made exists on a public ledger accessible to everyone, making transactions hard to reverse and difficult to fake. That’s by design: Core to their decentralized nature, Bitcoins aren’t backed by the government or any issuing institution, and there’s nothing to guarantee their value besides the proof baked in the heart of the system. “The reason why it’s worth money is simply because we, as people, decided it has value—same as gold,” says Anton Mozgovoy, co-founder & CEO of digital financial service company Holyheld.

telegram from us


Telegram Brogrammist
FROM USA