Class Componentlar
Class Componentlar — React ning 16.8 versiyasiga qadar state va lifecycle ni kuzatush uchun yagona usul bo'lgan.
state — componentning malumotini saqlash uchun ishlatiladigan object.
lifecycle — componentlarni ishlash jarayoni. Har bir component da 3 ta asosiy narsa bor. Mounting , Updating , va Unmounting.
Mounting — componentlarni yaratish va DOM ga joylashtirish jarayoni.
DOM — document object modle
Updating — bu state yoki props ni o'zgarganidan sodir bo'ladi. state va props o'zgardan component qayta yasaladi.
Unmounting — componentni DOM dan olib tashlash jarayoni.
@abs_reactjs
Class Componentlar — React ning 16.8 versiyasiga qadar state va lifecycle ni kuzatush uchun yagona usul bo'lgan.
state — componentning malumotini saqlash uchun ishlatiladigan object.
lifecycle — componentlarni ishlash jarayoni. Har bir component da 3 ta asosiy narsa bor. Mounting , Updating , va Unmounting.
Mounting — componentlarni yaratish va DOM ga joylashtirish jarayoni.
DOM — document object modle
Updating — bu state yoki props ni o'zgarganidan sodir bo'ladi. state va props o'zgardan component qayta yasaladi.
Unmounting — componentni DOM dan olib tashlash jarayoni.
@abs_reactjs
👍9🔥3⚡1
Buttoni bosdik va state orqali 1 sonini 2 ga o'zgartirdik. — React js da shu payt nimalar sodir bo'ladi.
1. State Update ( State yangilanadi ): setState() method i yordamida state yangilanadi.
2. State o'zgarganda — component qayta render qilinadi. Bu componentning render() method i yana bir marta chaqirilishini anglatadi.
3. Reconciliation: State yangilanganda, React reconciliation jarayonini boshlaydi. Bu jarayon yangi va oldingi virtual DOM versiyalarini solishtiradi.
4. Diffing algaritimi — yangi va oldingi virtual DOM versiyasini solishtiradi va ular orasidagi farqlarni aniqlaydi.
5. DOM Update ( DOM yangilanishi ) — Farqlar anqlangandan so'ng , o'zgarishlarni haqiqiy DOM ga qo'llaydi. Bu jarayon orqali faqat kerak bo'lgan o'zgarishlar amalga oshiriladi.
// Atamalar
Virtual DOM — Virtual DOM web applicationlarni ishlashi va samaradorligini oshiruvchi vositadur. Bu xotiradagi asl DOMning “yengil” varianti. Real DOM va Virtual DOM ning asosiy farqi updatingdagi protsesdadur. Real DOM updatelari sekin va samarasiz, ayniqsa katta ilovalar yoki tez-tez o’zgarishlar bilan ishlash bilan bo’lgan holatlarda katta muammolar olib keladi.
—————- - ————
Bu jarayon insonni 1 marotaba nafas olishiga o'xshab ketadi.
Agar 1 marotaba nafas oladigan bo'lsak nimalar bo'ladi ?
1. Burun va burun teshigi — Nafas oldishda havo avvalo burun orqali kiradi va havoni tozalaydi.
2. Sinuslar — Sinuslar havoning haroratini va namligini nazorat qiladi.
3. Pharynx — havoni tracheaga yo’naltiradi.
4. Larynx — havoni o’g’izdan tracheaga yo’naltiradi.
5. Trachea (windpipe) — havoni o’g’izdan o’pka va bronxial tubelarga yo’naltiradi.
6. Diafragma — nafas oldish va chiqarish jarayonlarini boshqaradi.
7. O’pka (lungs): — havoni alveol larga yo’naltiradi.
8. Bronxial tubelar/bronxi — Bronxial tubelar havoni alveollarga yo’naltiradi.
9. Alveoli — havodan kislorodni qon tomirlariga o’tkazadi va qon tomirlaridan karbondioksidi oladi.
10. Qon tomirlari (capillaries): Qon tomirlari kislorodni alveol lardan qon tomirlariga o’tkazadi va karbondioksidi qon tomirlaridan alveol larga o’tkazadi.
Agar post yoqgan bo'lsa: 🔥
@abs_reactjs
1. State Update ( State yangilanadi ): setState() method i yordamida state yangilanadi.
2. State o'zgarganda — component qayta render qilinadi. Bu componentning render() method i yana bir marta chaqirilishini anglatadi.
3. Reconciliation: State yangilanganda, React reconciliation jarayonini boshlaydi. Bu jarayon yangi va oldingi virtual DOM versiyalarini solishtiradi.
4. Diffing algaritimi — yangi va oldingi virtual DOM versiyasini solishtiradi va ular orasidagi farqlarni aniqlaydi.
5. DOM Update ( DOM yangilanishi ) — Farqlar anqlangandan so'ng , o'zgarishlarni haqiqiy DOM ga qo'llaydi. Bu jarayon orqali faqat kerak bo'lgan o'zgarishlar amalga oshiriladi.
// Atamalar
Virtual DOM — Virtual DOM web applicationlarni ishlashi va samaradorligini oshiruvchi vositadur. Bu xotiradagi asl DOMning “yengil” varianti. Real DOM va Virtual DOM ning asosiy farqi updatingdagi protsesdadur. Real DOM updatelari sekin va samarasiz, ayniqsa katta ilovalar yoki tez-tez o’zgarishlar bilan ishlash bilan bo’lgan holatlarda katta muammolar olib keladi.
—————- - ————
Bu jarayon insonni 1 marotaba nafas olishiga o'xshab ketadi.
Agar 1 marotaba nafas oladigan bo'lsak nimalar bo'ladi ?
1. Burun va burun teshigi — Nafas oldishda havo avvalo burun orqali kiradi va havoni tozalaydi.
2. Sinuslar — Sinuslar havoning haroratini va namligini nazorat qiladi.
3. Pharynx — havoni tracheaga yo’naltiradi.
4. Larynx — havoni o’g’izdan tracheaga yo’naltiradi.
5. Trachea (windpipe) — havoni o’g’izdan o’pka va bronxial tubelarga yo’naltiradi.
6. Diafragma — nafas oldish va chiqarish jarayonlarini boshqaradi.
7. O’pka (lungs): — havoni alveol larga yo’naltiradi.
8. Bronxial tubelar/bronxi — Bronxial tubelar havoni alveollarga yo’naltiradi.
9. Alveoli — havodan kislorodni qon tomirlariga o’tkazadi va qon tomirlaridan karbondioksidi oladi.
10. Qon tomirlari (capillaries): Qon tomirlari kislorodni alveol lardan qon tomirlariga o’tkazadi va karbondioksidi qon tomirlaridan alveol larga o’tkazadi.
Agar post yoqgan bo'lsa: 🔥
@abs_reactjs
🔥16😁2👍1
Components
Component — qayta ishlatish mumkin bo'lgan , mustaqil kod bo'lagi.
Componentlar 2 turga bo'linadi. Class componentlar va Function componentla.
Har bir componentda render() method i bor. render() method i foydalanuvchi interface ini yaratish uchun ishlatiladi. Bu method JSX formatdagi component tuzilmasini qaytaradi.
@abs_reactjs
Component — qayta ishlatish mumkin bo'lgan , mustaqil kod bo'lagi.
Componentlar 2 turga bo'linadi. Class componentlar va Function componentla.
Har bir componentda render() method i bor. render() method i foydalanuvchi interface ini yaratish uchun ishlatiladi. Bu method JSX formatdagi component tuzilmasini qaytaradi.
@abs_reactjs
👍7🔥2
Bazi atamalar bilan tanishib chiqamiz.
Rendering — Function component call bo'lish holati.
call — Function yoki method ni ishga tushirish jarayoni.
Reconciliation: State yangilanganda, React reconciliation jarayonini boshlaydi. Bu jarayon yangi va oldingi virtual DOM versiyalarini solishtiradi.
Diffing algaritimi — yangi va oldingi virtual DOM versiyasini solishtiradi va ular orasidagi farqlarni aniqlaydi.
@abs_reactjs
Rendering — Function component call bo'lish holati.
call — Function yoki method ni ishga tushirish jarayoni.
Reconciliation: State yangilanganda, React reconciliation jarayonini boshlaydi. Bu jarayon yangi va oldingi virtual DOM versiyalarini solishtiradi.
Diffing algaritimi — yangi va oldingi virtual DOM versiyasini solishtiradi va ular orasidagi farqlarni aniqlaydi.
@abs_reactjs
👍7
Props o'zgaradimi ?
Component lar ichida props o'zgarmaydi lekin yuqoridan o'zgargan holda kelishi mumkin.
State ni component ichida o'zgartirishimiz mumkin.
@abs_reactjs
Component lar ichida props o'zgarmaydi lekin yuqoridan o'zgargan holda kelishi mumkin.
State ni component ichida o'zgartirishimiz mumkin.
@abs_reactjs
👍8⚡2❤1
useState nima ?
useState() — Hooklarning biridir. Function componentlarda holat o'zgaruvchilarini qo'shish imkonini beradi.
O'zgaruvchi va holat o'zgaruvchilarini farqi nimada ?
Holat o'zgaruvchilar ( state variable ) — komponentning holatini saqlaydigan o’zgaruvchidir. Holat o’zgaruvchisi komponentning o’zida saqlanadi va uni yangilash uchun set function bilan ishlatiladi.
O’zgaruvchi (Local Variable): — Faqat komponentning ichida mavjud bo’lgan o’zgaruvchidir. Uni faqat o’sha komponentning ishlash davomida ishlatish mumkin. O’zgaruvchi komponentdan tashqari saqlanmaydi va uni yangilash uchun set funksiyasi mavjud emas.
——————
useState nima uchun ishlatiladi ? menga qisqa javob ber deydiganlar uchun.
useState — malumotlarni saqlash uchun ishlatiladi.
useState o'zgargan paytda component qayta render bo'ladi.
@abs_reactjs
useState() — Hooklarning biridir. Function componentlarda holat o'zgaruvchilarini qo'shish imkonini beradi.
O'zgaruvchi va holat o'zgaruvchilarini farqi nimada ?
Holat o'zgaruvchilar ( state variable ) — komponentning holatini saqlaydigan o’zgaruvchidir. Holat o’zgaruvchisi komponentning o’zida saqlanadi va uni yangilash uchun set function bilan ishlatiladi.
const [name, setName] = useState('abs');
// setName --- set functionO’zgaruvchi (Local Variable): — Faqat komponentning ichida mavjud bo’lgan o’zgaruvchidir. Uni faqat o’sha komponentning ishlash davomida ishlatish mumkin. O’zgaruvchi komponentdan tashqari saqlanmaydi va uni yangilash uchun set funksiyasi mavjud emas.
——————
useState nima uchun ishlatiladi ? menga qisqa javob ber deydiganlar uchun.
useState — malumotlarni saqlash uchun ishlatiladi.
useState o'zgargan paytda component qayta render bo'ladi.
@abs_reactjs
👍10❤1
👍4⚡1
State va props o’rtasidagi asosiy farq nima?
Anonymous Quiz
44%
state o’zgaruvchan, props o’zgarmas
36%
state komponent ichida, props tashqarida yaratiladi
16%
state faqat Function komponentlarda ishlatiladi, props esa Class komponentlarida
3%
state va props bir xil, faqat nomlari farq qiladi
👍4⚡2
React’da Component nima?
Anonymous Quiz
30%
HTML elementlarini yaratish uchun funksiya
11%
Ma’lumotlarni boshqarish uchun kutubxona
55%
Interfeys ning qayta ishlatiladigan qismi
3%
Serverga so’rov yuborish uchun metod
⚡3👍2
“key” prop ining asosiy maqsadi nima?
Anonymous Quiz
16%
Komponentlarni tezroq render qilish
24%
Komponentlarni tartiblash
49%
Ro’yxat elementlarini noyob qilish
11%
Ma’lumotlarni saqlash
⚡5👍2
👍1
StrictMode
StrictMode ning vazifasi nima ?
StrictMode — loyihangizdagi hatoliklarni aniqlashda yordam beradi.
— Impure rendering tufayli xatoliklarni topish uchun component ni qayta render qiladi.
— Component dagi eskirgan API larni ishlashini tekshiriladi.
@abs_reactjs
StrictMode ning vazifasi nima ?
StrictMode — loyihangizdagi hatoliklarni aniqlashda yordam beradi.
— Impure rendering tufayli xatoliklarni topish uchun component ni qayta render qiladi.
— Component dagi eskirgan API larni ishlashini tekshiriladi.
@abs_reactjs
👍5⚡2🔥1
KEY
key nima ?
key ni qachon ishlatish kerak ?
key ni qachon ishlatmaslik kerak ?
key — Array ( to'plam ) elementlarni bir biridan farqlash uchun ishlatiladigan atribut.🧑🎓
key har bir ro'yxat elementiga alohida key ( nom yoki raqam ) beradi. Bu ro'yxatdagi elmentlar o'zgargan , qo'shilgan yoki olib tashlanganligini aniqlashda ishlatiladi. 🔥
map funksiyasi orqali ro’yxat elementlarini yaratyotganda , har bir elementga key berilishi kerak.
Chunki key lar orqali React o’zgarishlarni tezroq aniqlaydi va faqat kerakli qismlarni qayta yaratadi. 🆕
Agar siz ro’yxatni faqat bir marta yaratib, keyin uni o’zgartirmasdan foydalanasiz, unda key larni berish shart emas.📕
Royxat elementlarining key lari turlixil bo'lishligi kerak. Lekin turli royxat lardagi JSX lar uchun bir xil kalitlardan ( key ) foydalanish mumkin . 🔐
Berilgan key lar o'zgarmas bo'lishligi kerak , Component render bo'lganda eski key saqlanishi kerak. Shuni uchun map ning index sidan key sifatida foydalanish mumkin emas.🫠
——————
Bir oilada 2 ta bir xil ism qo'yilmaydi
— Bir Array ( rayxat ) elementlarigaham 2 ta bir xil nom qoya olmaymiz.
Oilada har bir insonning alohida alohida o'rni bo'ladi
— Key orqali har bir Array ( royxat ) elementi bir biridan ajirab turadi.
@abs_reactjs
key nima ?
key ni qachon ishlatish kerak ?
key ni qachon ishlatmaslik kerak ?
key — Array ( to'plam ) elementlarni bir biridan farqlash uchun ishlatiladigan atribut.
key har bir ro'yxat elementiga alohida key ( nom yoki raqam ) beradi. Bu ro'yxatdagi elmentlar o'zgargan , qo'shilgan yoki olib tashlanganligini aniqlashda ishlatiladi. 🔥
map funksiyasi orqali ro’yxat elementlarini yaratyotganda , har bir elementga key berilishi kerak.
Chunki key lar orqali React o’zgarishlarni tezroq aniqlaydi va faqat kerakli qismlarni qayta yaratadi. 🆕
Agar siz ro’yxatni faqat bir marta yaratib, keyin uni o’zgartirmasdan foydalanasiz, unda key larni berish shart emas.
Royxat elementlarining key lari turlixil bo'lishligi kerak. Lekin turli royxat lardagi JSX lar uchun bir xil kalitlardan ( key ) foydalanish mumkin . 🔐
Berilgan key lar o'zgarmas bo'lishligi kerak , Component render bo'lganda eski key saqlanishi kerak. Shuni uchun map ning index sidan key sifatida foydalanish mumkin emas.
——————
Bir oilada 2 ta bir xil ism qo'yilmaydi
— Bir Array ( rayxat ) elementlarigaham 2 ta bir xil nom qoya olmaymiz.
Oilada har bir insonning alohida alohida o'rni bo'ladi
— Key orqali har bir Array ( royxat ) elementi bir biridan ajirab turadi.
@abs_reactjs
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥3⚡1
React js da hech qachon o'zgaruvchini to'g'ridan tog'ri o'zgartirib bo'lmaydi .
#qisqa
@abs_reactjs
Andijon
#qisqa
@abs_reactjs
Andijon
👍15⚡3❤1
React JSda mutable va immutable tushunchalari.
Mutable — ma’lumot turlari yaratilgandan so’ng o’zgartirilishi mumkin bo’lgan obyektlardir.
Immutable — ma’lumot turlari esa yaratilgandan so’ng o’zgartirilmasdan qoladigan obyektlardir.
React JS o'zgaruvchilarni tog'ridan to'g'ri o'zgartirishni iloji yo'qligi uchun React JS ham immutable holda ishlaydi.
Obyect ni qiymatlarini o'zgartirish uchun , o'zgartirilgan yangi object yaratish kerak bo'ladi.
@abs_reactjs
Mutable — ma’lumot turlari yaratilgandan so’ng o’zgartirilishi mumkin bo’lgan obyektlardir.
Immutable — ma’lumot turlari esa yaratilgandan so’ng o’zgartirilmasdan qoladigan obyektlardir.
React JS o'zgaruvchilarni tog'ridan to'g'ri o'zgartirishni iloji yo'qligi uchun React JS ham immutable holda ishlaydi.
Obyect ni qiymatlarini o'zgartirish uchun , o'zgartirilgan yangi object yaratish kerak bo'ladi.
@abs_reactjs
👍7❤🔥2⚡2