Ha, React birinchi darajali ishlab chiqishni o'z zimmasiga oladi. Nima uchun savol tug'iladi.

Ushbu maqolaning asosiy yo'nalishi React-ning mashhurligi va boshqa ramkalar yoki kutubxonalar bilan taqqoslanmasligi haqida
Yangilanish: Ushbu maqola endi mening "React.js asoslaridan tashqari" kitobimning bir qismi.
Ushbu tarkibning yangilangan versiyasini va reaksiya haqida ko'proq ma'lumotni jscomplete.com/react-beyond-basics saytida o'qing.

React shunchalik tez mashhur bo'lishining bir necha sabablari:

  • DOM API bilan ishlash qiyin. Reaktsiya asosan ishlab chiquvchilarga haqiqiy brauzerga qaraganda do'stona bo'lgan virtual brauzer bilan ishlash imkoniyatini beradi. React virtual brauzeri dasturchi va haqiqiy brauzer o'rtasida agent kabi ishlaydi.
  • React dasturchilarga foydalanuvchi interfeyslarini deklarativ ravishda tasvirlashga va ushbu interfeyslarning holatini modellashtirishga imkon beradi. Buning ma'nosi shundaki, ishlab chiquvchilar interfeyslardagi tranzaksiyalarni tavsiflash uchun qadamlar qo'yishning o'rniga, interfeyslarni yakuniy holat (funksiya kabi) nuqtai nazaridan tavsiflaydilar. Operatsiyalar ushbu holat bilan sodir bo'lganda, React foydalanuvchi interfeyslarini yangilashga e'tibor beradi.
  • Reaktsiya - bu shunchaki JavaScript, o'rganish uchun juda kichik API mavjud, bir nechta funktsiyalar va ulardan qanday foydalanish kerak. Shundan so'ng, sizning JavaScript qobiliyatingiz sizga React dasturchisini yaxshilashga yordam beradi. Kirish uchun hech qanday to'siqlar yo'q. JavaScript dasturchisi bir necha soat ichida samarali reaktsiya dasturchisiga aylanishi mumkin.

Ammo buning uchun shunchaki ko'p narsa bor. Keling, React ommaviylashuvining barcha sabablarini yoritishga harakat qilaylik. Buning sabablaridan biri bu Virtual DOM (Reactning yarashish algoritmi). Sizning buyrug'ingiz bilan bunday algoritmga ega bo'lishning amaliy amaliy qiymatini ko'rsatish uchun misol orqali ishlaymiz.

Reaktning rasmiy ta'rifida aytilishicha, bu foydalanuvchi interfeyslarini yaratish uchun JavaScript kutubxonasi. Ushbu ta'rifning ikki xil qismini tushunish muhimdir:

  1. Javob - bu JavaScript kutubxonasi. Bu ramka emas. Bu to'liq echim emas va biz har doim yechimni shakllantirish uchun React yordamida ko'proq kutubxonalardan foydalanishimiz kerak bo'ladi. Reaktsiya biron bir to'liq echimning boshqa qismlari haqida hech qanday ma'lumotga ega bo'lmaydi. U faqat bitta narsaga va bu ishni juda yaxshi bajarishga qaratilgan.
  2. React haqiqatan ham yaxshi bajaradigan narsa - bu ta'rifning ikkinchi qismi: foydalanuvchi interfeyslarini yaratish. Foydalanuvchi interfeysi - bu biz foydalanuvchilarning oldiga qo'ygan narsamiz bo'lib, ularni mashina bilan o'zaro bog'lash. Foydalanuvchi interfeysi hamma joyda, mikroto'lqinli tugmachadan tortib kosmik kemaning boshqaruv paneliga qadar mavjud. Agar biz interfeys qilmoqchi bo'lgan qurilma JavaScript-ni tushunsa, u holda foydalanuvchi interfeysini tasvirlash uchun React-dan foydalanishimiz mumkin.

Veb-brauzerlar JavaScript-ni tushunganligi sababli, biz Veb-foydalanuvchi interfeyslarini tasvirlash uchun React-dan foydalanishimiz mumkin. Men bu erda tasvirlash so'zini ishlatishni yaxshi ko'raman, chunki biz asosan React bilan nima qilamiz, shunchaki biz xohlagan narsani aytamiz va React haqiqiy foydalanuvchi interfeyslarini bizning nomimizdan veb-brauzerda quradi. React yoki shunga o'xshash kutubxonalarsiz, biz foydalanuvchi veb-interfeyslarini tabiiy veb-API va JavaScript-lar bilan qo'lda tuzishimiz kerak edi.

"Reaksiya deklarativ" degan gapni eshitganingizda, aynan shu ma'noni anglatadi, biz foydalanuvchi interfeyslarini React bilan tavsiflaymiz va xohlagan narsamizni aytamiz (buni qanday qilish kerak emas). React "qanday" haqida g'amxo'rlik qiladi va deklarativ tavsiflarimizni (biz ularni reaktsiya tilida yozamiz) brauzerdagi haqiqiy interfeyslarga tarjima qiladi. React bu oddiy deklarativ kuchni HTML-ning o'zi bilan taqsimlaydi, lekin React bilan biz shunchaki statik ma'lumotlarni emas, balki dinamik ma'lumotlarni aks ettiruvchi HTML interfeyslari uchun deklarativ bo'lamiz.

React o'zining mashhurligini qo'zg'atadigan uchta asosiy dizayn tushunchalariga ega:

1 - qayta ishlatiladigan, kompozitsion va holati tarkibiy qismlardan foydalanish

React-da, biz komponentlar yordamida foydalanuvchi interfeyslarini tasvirlaymiz. Siz tarkibiy qismlarni oddiy funktsiyalar deb hisoblashingiz mumkin (har qanday dasturlash tilida). Biz ba'zi kirish bilan funktsiyalarni chaqiramiz va ular bizga bir oz natija beradi. Biz kerak bo'lganda funktsiyalardan qayta foydalanishimiz va kichiklardan kattaroq funktsiyalarni tuzishimiz mumkin.

Komponentlar aynan bir xil; biz ularning kirishlarini "xususiyatlar" va "holatlar" deb ataymiz va komponentlarning chiqishi bu foydalanuvchi interfeysining tavsifi (brauzerlar uchun HTML ga o'xshash). Biz bir nechta foydalanuvchi interfeyslarida bitta komponentdan foydalanishimiz mumkin va tarkibiy qismlar boshqa tarkibiy qismlarga ega bo'lishi mumkin.

Ammo toza funktsiyalardan farqli o'laroq, React to'liq tarkibiy qismi vaqt o'tishi bilan o'zgarishi mumkin bo'lgan ma'lumotlarni saqlash uchun xususiy holatga ega bo'lishi mumkin.

2 - reaktiv yangilanishlar tabiati

Reaktning nomi - bu kontseptsiya uchun oddiy tushuntirish. Komponentning holati (kirish) o'zgarganda, u foydalanuvchi interfeysi (chiqishi) ham o'zgaradi. Foydalanuvchi interfeysi tavsifidagi bu o'zgarish biz bilan ishlayotgan qurilmada aks ettirilishi kerak.

Brauzerda Document Object Model (DOM) da HTML ko'rinishini tiklashimiz kerak. React yordamida biz ushbu o'zgarishlarni qanday aks ettirish haqida tashvishlanishga hojat yo'q yoki brauzerga qachon o'zgartirishlar kiritishni boshqaramiz; Reaktsiya shunchaki holat o'zgarishiga reaktsiya beradi va kerak bo'lganda DOM-ni avtomatik ravishda yangilaydi.

3 - xotirada virtual ko'rinishni namoyish qilish

React yordamida HTML-ni JavaScript-dan foydalanib yozamiz. HTML-ni ushbu ma'lumotlar bilan ishlashini yaxshilash uchun emas, balki ba'zi ma'lumotlarga bog'liq bo'lgan HTML-ni yaratish uchun biz JavaScript-ning kuchiga ishonamiz. JavaScript-ni yaxshilash boshqa HTML-freymlar odatda HTMLni takomillashtirish. Masalan, Angular HTML-ni uzuk, shartli va boshqalar kabi xususiyatlarga ega.

Biz faqat serverdan ma'lumotlarni olsak (orqa fonda, AJAX bilan), biz bu ma'lumotlar bilan ishlash uchun HTML-dan ko'proq narsani talab qilamiz. Bu yo kengaytirilgan HTML-dan foydalanadi, yoki HTML-ni yaratish uchun JavaScript-ning kuchidan foydalanadi. Ikkala yondashuvning ham afzalliklari va kamchiliklari bor. Reaktsiya, afzalliklar kamchiliklardan kuchliroq degan fikr bilan, ikkinchisini quchoqlaydi.

Aslida, ushbu yondashuvni o'zi hal qilishi mumkin bo'lgan bitta muhim afzallik bor; HTML-ni ko'rsatish uchun JavaScript-dan foydalanish React-ga HTML-ning virtual tasvirini xotirada saqlashni osonlashtiradi (odatda Virtual DOM deb nomlanadi). React birinchi navbatda HTML daraxtini ko'rsatish uchun Virtual DOM-dan foydalanadi va keyin har safar holat o'zgarganda va biz yangi daraxtni olamiz, brauzer DOM-ga olinadi, buning o'rniga yangi daraxtni yozamiz React faqat yozadi. yangi daraxt va oldingi daraxt o'rtasidagi farq (chunki React ikkala daraxtni ham xotirada saqlaydi). Ushbu jarayon daraxtlarni yarashtirish deb nomlanadi va menimcha, bu AJAX-dan beri Web Development-da yuz bergan eng yaxshi narsa!

Quyidagi misolda biz ushbu so'nggi tushunchaga e'tibor qaratamiz va daraxtlarni yarashtirish jarayonining oddiy amaliy misolini va uning katta farqini ko'rib chiqamiz. Xuddi shu HTML misolini ikki marta, avval Web API va vanil JavaScript-dan foydalanib yozamiz va keyin HTML-daraxtni React yordamida qanday tasvirlashni ko'ramiz.

Ushbu oxirgi kontseptsiyaga to'liq e'tibor qaratish uchun biz tarkibiy qismlardan foydalanmaymiz va JavaScript o'zgartirish taymeridan foydalangan holda holatni o'zgartirish amaliyotini masxara qilamiz. Biz, shuningdek, JSX-dan foydalanmoqchi emasmiz, garchi JSX-dan foydalanish ancha sodda kodni yaratsa. Men React-ni yozganda doim JSX-ni ishlataman, lekin to'g'ridan-to'g'ri ushbu misolda React API bilan ishlash bu kontseptsiyani yaxshiroq tushunishga yordam beradi.

Reaktsiyani yarashtirish algoritmiga misol

Ushbu misolga amal qilish uchun sizga brauzer va kod muharriri kerak bo'ladi. Siz aslida onlayn kodlash maydonchasidan foydalanishingiz mumkin, ammo men mahalliy fayllardan foydalanaman va ularni to'g'ridan-to'g'ri brauzerda sinab ko'raman (bizga veb-server kerak emas):

Ushbu misolni noldan boshlaymiz. Yangi katalog yarating va o'zingizning sevimli muharriringizni ishga tushiring:

mkdir reaksiya-demo
CD reaktsiyasi-demo
atom.

Ushbu katalogda index.html faylini yarating va u erda standart HTML shablonini qo'ying. Ushbu shablonga skript.js faylini qo'shing va shu skriptda console.log bayonotini qo'ying, bunda ishlarning mavjudligini sinab ko'ring:



  
    
     Demo reaktsiyasi 
  
  
    
  

Sizning brauzeringizda index.html faylini oching va bo'sh shablonni muammosiz ko'rishingiz va Console dev-tools yorlig'ida, siz script.js-ga qo'ygan console.log test xabarini ko'rishingiz mumkinligiga ishonch hosil qiling:

open index.html # Mac-da
explorer index.html # Windows-da

Endi Reactjs veb-saytidan olishimiz mumkin bo'lgan reaktiv kutubxonasini olib kelaylik. Reaksiya va reaksiya domeni skriptlaridan nusxa oling va ularni index.html ichiga kiriting:

 

Biz ikkita muhim skriptni shu erda muhim sababga ko'ra o'z ichiga olamiz: React kutubxonasining o'zi brauzersiz ishlatilishi mumkin. React-ni brauzer bilan ishlatish uchun bizga ReactDOM kutubxonasi kerak.

Hozir brauzerni yangilaganimizda, biz global miqyosda mavjud bo'lgan React va ReactDOM ni ko'rishimiz kerak:

Rasm Chrome-da saqlandi

Ushbu sodda sozlash yordamida biz endi React va ReactDOM API-lariga kirishimiz mumkin va, albatta, biz avval foydalanmoqchi bo'lgan veb-API va JavaScript-ga kirishimiz mumkin.

HTML-ni brauzerga dinamik ravishda kiritish uchun biz oddiy JavaScript-ni va DOM Web API-ni ishlatishimiz mumkin. JavaScript HTML tarkibimizga ega bo'lish uchun va "js" idini berish uchun div elementini yarataylik. Skript yorlig'idan oldin index.html tana elementiga quyidagini qo'shing:

Endi skript.jsda bu yangi div elementni id bo'yicha olib, doimiy tomonga joylashtiramiz. Bu doimiy jsContainer nomini olaylik. HTML-dan divni olish uchun biz document.getElementById dan foydalanishimiz mumkin:

const jsContainer = document.getElementById ("js");

Ushbu div tarkibini boshqarish uchun biz divH elementiga ichkiHTML sozlash qo'ng'irog'idan foydalanishimiz mumkin. Biz DOM-ga kiritmoqchi bo'lgan HTML-shablonni etkazib berish uchun ushbu qo'ng'iroqdan foydalanishimiz mumkin. Div elementini "demo" klassi va "Hello JS" qatorini tarkibiga kiritamiz:

jsContainer.innerHTML = `
  
    Salom JS   
`;

Buning brauzerda ishlashiga ishonch hosil qiling. Endi ekranda "Hello JS" qatorini ko'rishingiz kerak.

Ushbu demo div bizning foydalanuvchilar interfeysi. Bu juda oddiy. Biz shunchaki foydalanuvchi ko'rishi uchun matn chiqazdik.

Ikkala document.getElementById va element.innerHTML aslida DOM Web API-ning qismidir. Biz bu erda veb-platformaning qo'llab-quvvatlanadigan API-laridan foydalangan holda to'g'ridan-to'g'ri brauzer bilan aloqa o'rnatmoqdamiz. Ammo biz React kodini yozganimizda, uning o'rniga React API-ni ishlatamiz va DOM Web API-dan foydalanib, React brauzeri bilan aloqa o'rnatishga imkon beramiz.

Brauzer uchun bizning agentimiz kabi harakat qiling va biz asosan brauzerning o'zi bilan emas, balki bizning agentimiz bilan faqat React bilan bog'lanishimiz kerak. Men asosan aytaman, chunki biz hali ham brauzer bilan bog'lanishimiz kerak bo'lgan holatlar mavjud, ammo ular kam.

Bizda hozircha mavjud bo'lgan, ammo hozirda React API bilan bir xil foydalanuvchi interfeysini yaratish uchun yana bir div elementini yarataylik va unga "reaktsiya qilish" idini bering. Index.html-da, div # js elementi ostiga, quyidagini qo'shing:

Endi, script.js-da, yangi div uchun yangi konteyner doimiyini yarating:

const responseContainer = document.getElementById ("reaktsiya");

Ushbu konteyner mahalliy veb-API uchun qilingan yagona qo'ng'iroq bo'ladi. ReactDOM bizning dasturimizni DOM-da qayerda joylashganligini bilish uchun ushbu idishga muhtoj.

Reaktsiya qilingan konteyner aniqlanganda, endi ReactDOM kutubxonasidan HTML shablonining HTML shablonini ushbu konteynerga ko'rsatish uchun foydalanishimiz mumkin:

ReactDOM.render (
  / * TODO: HTML shablonining reaktsiyasi * /,
  reaktsiyaContainer
)

Keyingi harakatlar Reaktsiya kutubxonasini tushunishdagi birinchi qadamingizdir. Sizga React yordamida HTML-ni JavaScript-dan foydalangan holda yozamiz deb aytganimda esingizdami? Keyingi ishlarimiz aynan mana shu.

Oddiy HTML foydalanuvchi interfeysini yozish uchun biz React API-ga JavaScript qo'ng'iroqlaridan foydalanamiz va misol oxirida siz buning sababini yaxshiroq bilib olasiz.

React-da biz satrlar bilan ishlashning o'rniga (yuqoridagi asl JavaScript misolida bo'lgani kabi), biz ob'ektlar bilan ishlaymiz. Har qanday HTML satri React.createElement qo'ng'irog'idan foydalangan holda ob'ekt sifatida taqdim etiladi (bu React API-ning asosiy vazifasi).

Mana biz hozircha React bilan tenglashtirilgan HTML foydalanuvchi interfeysi:

ReactDOM.render (
    React.createElement (
      "div",
      {className: "demo"},
      "Salom reaktsiya"
    ),
    reaktsiyaContainer
  );

React.createElement ko'plab dalillarga ega:

  • Birinchi argument bu bizning HTML misolidagi div yorlig'i.
  • Ikkinchi argument bu teg biz xohlagan har qanday atributlarni aks ettiruvchi ob'ektdir. JS misoliga mos kelish uchun biz class = "demo" ga tarjima qilingan {className: "demo"} ishlatdik. Atributlarda sinf o'rniga className-dan qanday foydalandikimizga e'tibor bering, chunki HTML-ga emas, balki Web-reaktsiyaga reaktsiya bilan JavaScript-ning barchasi JavaScript-ga mos keladi.
  • Uchinchi dalil - bu elementning tarkibi. Biz "Hello React" qatorini joylashtirdik.

Endi buni sinab ko'rishimiz mumkin. Brauzer ikkalasini ham "Hello JS" va "Hello React" ko'rsatishi kerak. Keling, ekranni vizual ravishda ajratishimiz uchun ushbu CSS-dan foydalanib, demo-divlarni quti sifatida yarataylik. Index.html da:

Rasm Chrome-da saqlandi

Endi bizda ikkita tugun bor, ulardan biri DOM Web API orqali to'g'ridan-to'g'ri boshqariladi va boshqasi React API bilan boshqariladi (o'z navbatida DOM Web API-ni ishlatadi). Brauzerda ushbu ikkita tugunni qurishimiz o'rtasidagi yagona katta farq shundaki, JS versiyasida tarkibni aks ettirish uchun satrdan foydalandik, React versiyasida esa toza JavaScript qo'ng'iroqlarini ishlatdik va ularning o'rniga ob'ekt bilan tarkibni taqdim etdik. tor.

HTML foydalanuvchi interfeysi qanchalik murakkab bo'lmasin, React-dan foydalanganda, har bir HTML elementi React.createElement chaqiruvidan foydalanib JavaScript ob'ekti bilan ta'minlanadi.

Endi oddiy interfeysimizga yana bir nechta xususiyatlarni qo'shib qo'yaylik. Foydalanuvchi kiritgan ma'lumotni o'qish uchun matn oynasini qo'shamiz.

HTML shablonimizga elementlarni qo'shish uchun JS versiyasida oldinga siljiting, chunki bu shunchaki HTML. Masalan, demo div elementini ko'rsatish uchun biz uni tarkibga shunchaki qo'shamiz:

jsContainer.innerHTML = `
  
    Salom JS        
`;

React.createElement uchun 3-chi argumentdan keyin qo'shimcha dalillar qo'shish orqali biz buni React-da qilishimiz mumkin. O'zingizning JS misolida bajargan amallarimizga mos kelish uchun biz 4-chi argumentni qo'shishimiz mumkin, bu kirish elementini chaqiradigan yana bir React.createElement (esda tuting, har bir HTML element ob'ekt hisoblanadi):

ReactDOM.render (
  React.createElement (
    "div",
    {className: "demo"},
    "Salom Reakt",
    React.createElement ("kiritish")
  ),
  reaktsiyaContainer
);

Ayni paytda, agar siz nima qilayotganimiz haqida savol berayotgan bo'lsangiz va "bu oddiy jarayonni murakkablashtirmoqda" deb o'ylasangiz, siz mutlaqo haqsiz! Ammo biz nima qilayotganimiz uchun juda yaxshi sabab bor. O'qishni davom eting.

Ikkala versiyada ham vaqt belgisini ko'rsataylik. JS versiyasida vaqt belgisini paragraf elementiga qo'yamiz. Oddiy vaqt belgisini ko'rsatish uchun biz yangi Sana () ga qo'ng'iroq qilishimiz mumkin:

jsContainer.innerHTML = `
  
    Salom JS          

$ {yangi sana ()}

  
`;

React-da xuddi shunday qilish uchun biz yuqori darajadagi div elementiga 5-chi dalilni qo'shamiz. Bu 5-chi yangi argument yana bir React.createElement-da bo'lib, bu safar p-tegidan foydalangan holda, atributlarsiz va tarkib uchun yangi Sana () qatori:

ReactDOM.render (
  React.createElement (
    "div",
    {className: "demo"},
    "Salom Reakt",
    React.createElement ("kiritish"),
    React.createElement (
      "p",
      null,
      yangi sana (). toString ()
    )
  ),
  reaktsiyaContainer
);

Ikkala JS va React versiyalari hali ham brauzerda aniq bir xil HTML-ni namoyish etmoqda.

Rasm Chrome-da saqlandi

Ko'rinib turibdiki, hozirga qadar React-dan foydalanish oddiy va tanish mahalliy usulga qaraganda ancha qiyin. React shunchalik yaxshi bajaradiki, tanish HTMLdan voz keching va shunchaki HTML-da yozilishi mumkin bo'lgan narsalarni yozish uchun yangi API-ni o'rganishingiz kerakmi? Javob birinchi HTML ko'rinishini yaratish bilan bog'liq emas, DOM-dagi mavjud ko'rinishni yangilash uchun nima qilishimiz kerakligi haqida.

Shunday qilib, biz hozirgacha mavjud bo'lgan DOM-da yangilash operatsiyasini qilaylik. Vaqt belgisini har soniyada belgilang.

JavaScript funktsiyasi qo'ng'irog'ini setInterval Web timer API yordamida brauzerda osongina takrorlashimiz mumkin. Shunday qilib, keling, ikkala DOM manipulyatsiyalarimizni ikkala JS va React versiyalari uchun funktsiyaga joylashtiramiz, uni chaqiramiz va setInterval chaqiruvida har soniyada takrorlash uchun foydalanamiz.

Mana to'liq script.js-ning to'liq kodi:

const jsContainer = document.getElementById ("js");
const responseContainer = document.getElementById ("reaktsiya");
const render = () => {
  jsContainer.innerHTML = `
    
      Salom JS              

$ {yangi sana ()}

    
  `;
  ReactDOM.render (
    React.createElement (
      "div",
      {className: "demo"},
      "Salom Reakt",
      React.createElement ("kiritish"),
      React.createElement (
        "p",
        null,
        yangi sana (). toString ()
      )
    ),
    reaktsiyaContainer
  );
}
setInterval (render, 1000);

Endi brauzerni yangilaganimizda, ikkala versiyada vaqt belgisi satri har soniyada belgilanishi kerak. Endi biz DOM-dagi foydalanuvchi interfeysini yangilayapmiz.

Reaktsiya sizning ongingizga ta'sir qilishi mumkin bo'lgan payt. Agar siz JS versiyasining matn maydoniga biror narsani kiritishga harakat qilsangiz, buni amalga oshirolmaysiz. Bu juda kutilgan narsa, chunki biz har bir malumotga DOM tugunini tashlaymiz va uni yangilaymiz. Ammo, agar siz React bilan ta'minlangan matn maydoniga biror narsani kiritishga harakat qilsangiz, buni albatta qilishingiz mumkin!

Reactni ko'rsatishning butun kodi bizning belgilaydigan taymerimizga tegishli bo'lsa-da, React faqat DOM tugunini emas, faqat vaqt belgilari paragrafini o'zgartirmoqda. Shuning uchun matn kiritish oynasi qayta tiklanmadi va biz uni kirita oldik.

Agar siz DOM asboblarini elementlar panelida ikkita DOM tugunini tekshirib ko'rsangiz, DOMni vizual ravishda yangilaymiz. Chrome div vositalari yangilanadigan barcha HTML elementlarini ta'kidlaydi. Biz har bir belgi bo'yicha "js" divni qanday yangilayotganimizni ko'rasiz, React esa faqat vaqtni belgisi bilan xatboshini yangilaydi.

Rasm Chrome-da saqlandi

React aqlli farq qiluvchi algoritmga ega bo'lib, u faqat DOM tugunida yangilanish uchun foydalanadi, aslida esa uni yangilash kerak, qolgan har qanday holatda bo'lgani kabi. Ushbu farqli jarayon React virtual DOM va bizda foydalanuvchi interfeysi xotirada aks ettirilganligi sababli mumkin (chunki biz JavaScript-da yozgan edik).

Virtual DOM-dan foydalanib, React oxirgi DOM versiyasini xotirada saqlaydi va brauzerga olish uchun yangi DOM versiyasi bo'lsa, yangi DOM versiyasi ham xotirada qoladi, shuning uchun React yangi va eski versiyalar o'rtasidagi farqni hisoblashi mumkin (bizning holatda, farq vaqt belgisi paragrafidir).

React shundan so'ng brauzer faqat DOM tugunini emas, balki faqat hisoblangan diffni yangilashni buyuradi. Interfeysni necha marta yaratmasligimizdan qat'i nazar, React brauzerga faqat yangi "qisman" yangilanishlarni oladi.

Bu usul nafaqat samaraliroq, balki foydalanuvchi interfeyslarini yangilash haqida o'ylaganimiz uchun katta murakkablikni ham yo'q qiladi. DOM-ni yangilashimiz kerakmi yoki yo'qligi haqida barcha hisob-kitoblarni bajaring, bizning ma'lumotimiz (holati) va buning uchun interfeysni tasvirlash usuli haqida o'ylashga imkon beradi.

Keyin biz yangilanishlarni brauzerda haqiqiy foydalanuvchi interfeysida aks ettirish uchun zarur bo'lgan qadamlar haqida xavotirlanmasdan ma'lumotlarimizdagi yangilanishlarni boshqaramiz (chunki biz React aynan shunday qilishini bilamiz va u buni samarali bajaradi!)

O'qiganingiz uchun rahmat! Siz demo-dasturimning dastlabki kodini bu erda ko'rishingiz mumkin va demo shu erda ishlayotganini ko'rishingiz mumkin.

Ta'lim reaktsiyasi yoki tugunmi? Mening kitoblarimni tekshiring:

  • React.js-ni qurilish o'yinlari orqali bilib oling
  • Node.js Asoslardan tashqari