Men aynan bir xil ilovani React va Vue-da yaratdim. Mana farqlar.

Ishda Vue-dan foydalangan holda, men bu haqda aniq tushunchaga ega bo'ldim. Biroq, men panjara narigi tomonidagi maysa qanday ekanligini bilishga qiziqib qoldim - bu stsenariydagi o'tlar reaktsiya ekanligini.

Men React hujjatlarini o'qib chiqardim va bir nechta darslik videolarini tomosha qilardim va ular juda zo'r bo'lsa ham, Reaning Vue-dan qanchalik farq qilganini bilishni xohlardim. "Turli xil" deganda, men ikkalasi ham virtual DOMSga ega bo'lganmi yoki sahifalarni qanday ko'rsatganliklari kabi narsalarni anglatmasdim. Kimdir kodni tushuntirishga vaqt ajratishini xohlardim! Men buni Vue yoki React (yoki umuman veb-ishlab chiqish) uchun yangi bo'lganlar ikkalasi o'rtasidagi farqni yaxshiroq bilib olishlari uchun tushuntirishga vaqt sarflaydigan maqola topishni xohladim.

Afsuski, men buni hal qiladigan hech narsa topolmadim. Shunday qilib, men o'xshashliklar va farqlarni ko'rish uchun buni o'zim qurishim kerakligini angladim. Shunday qilib, men bu haqda maqola paydo bo'lishi uchun butun jarayonni hujjatlashtiraman deb o'yladim.

Kim uni yaxshiroq kiygan?

Men foydalanuvchilarga ro'yxatdan narsalarni qo'shish va o'chirishga imkon beradigan juda oddiy standart "Do" ilovasini sinab ko'rishga qaror qildim. Ikkala dastur ham standart CLI-lar yordamida qurilgan (React uchun reaksiya-app yaratish va Vue-ga vue-cli). CLI Aytgancha, Buyruqlar interfeysi interfeysi.

Qanday bo'lmasin, bu kirishish men kutganimdan ancha uzoq. Shunday qilib, ikkala dastur qanday ko'rinishini ko'rib chiqaylik.

Vue vs React: Chekib bo'lmaydigan Kuchlar Ko'chmas ob'ektga mos keladi

Ikkala dastur uchun ham CSS kodi bir xil, ammo ular joylashgan joyda farqlar mavjud. Shuni hisobga olib, keling, ikkala ilovaning fayl tuzilishini ko'rib chiqaylik:

Kim uni yaxshiroq kiygan?

Ularning tuzilishlari deyarli bir xil ekanligini ko'rasiz. Bu erda yagona farq shundaki, React ilovasida uchta CSS fayl mavjud, Vue ilovasida esa umuman yo'q. Buning sababi shundaki, create-reaktiv-ilova dasturida React komponentasi o'z uslublarini ushlab turish uchun qo'shimcha faylga ega bo'ladi, Vue CLI esa to'liq tarkibiy yondashuvni qo'llaydi, bunda uslublar haqiqiy komponent faylida e'lon qilinadi.

Oxir-oqibat, ikkalasi ham bir xil narsaga erishmoqdalar va React yoki Vue-da CSS-ni boshqacha tuzib bo'lmaydi degan gaplar yo'q. Bu haqiqatan ham shaxsiy xohish-istak bilan bog'liq - siz CSS-ni qanday tuzish kerakligi haqida dev jamoasidan ko'plab munozaralarni eshitasiz. Hozircha, biz har ikkala CLI da keltirilgan tuzilmani ko'rib chiqamiz.

Ammo biz bundan oldin biron bir yo'l tutishdan oldin, Vue va React komponentlarining qanday ko'rinishini ko'rib chiqamiz:

Chap tomonda. O'ng tomonda harakat qiling

Endi bu ishning iloji yo'q, mitti tafsilotlarni ko'rib chiqaylik!

Ma'lumotni qanday o'zgartiramiz?

Birinchidan, "mutatsion ma'lumotlar" degani nimani anglatadi? Bir oz texnik emasmi, shunday emasmi? Bu asosan biz saqlagan ma'lumotlarni o'zgartirishni anglatadi. Shunday qilib, agar biz bir kishining ismining qiymatini Yuhannodan Markga o'zgartirmoqchi bo'lsak, biz "ma'lumotlar mutatsiyasini" qilgan bo'lar edik. Shunday qilib, bu erda React va Vue o'rtasidagi asosiy farq mavjud. Vue asosan ma'lumotlar ob'ekti yaratadi, unda ma'lumotlar erkin yangilanishi mumkin, React esa yangilanishlarni amalga oshirish uchun biroz ko'proq ish talab qilinadigan davlat ob'ektini yaratadi. Endi React qo'shimcha sabablarni asosli ravishda amalga oshiradi va biz birozdan keyin bunga kirishamiz. Birinchidan, Vue-dagi ma'lumotlar ob'ekti va React-dan davlat ob'ektini ko'rib chiqaylik:

Chapdagi Vue ma'lumotlar ob'ekti. Davlat ob'ektini o'ng tomonga harakat qiling.

Shunday qilib, biz ikkalamizga bir xil ma'lumotlarni uzatganimizni ko'rishingiz mumkin, ammo ular boshqacha tarzda belgilanadi. Shunday qilib, dastlabki ma'lumotlarni tarkibiy qismimizga o'tkazish juda o'xshash. Ammo aytib o'tganimizdek, ushbu ma'lumotlarni qanday o'zgartirish haqida biz ikkala ramka o'rtasida farq qilamiz.

Aytaylik, bizda ma'lumotlar nomi mavjud: 'Sunil'.

Vue-da, biz buni this.name-ni chaqirib murojaat qilamiz. Buni yangilashni this.name = 'John' deb nomlash orqali ham davom ettirishimiz mumkin. Bu mening ismimni Jonga o'zgartiradi. Jon deb atalganimdan o'zimni qanday his qilayotganimni bilmayman, lekin ho-h, bo'lyapti!

React-da, biz ushbu ma'lumotlarga murojaat qilamiz: this.state.name. Endi bu erda asosiy farq shundan iboratki, biz buni shunchaki yoza olmaymiz.state.name = 'John', chunki Reaktsiyada mutatsiyaning bunday oson, oldini olish uchun cheklovlar mavjud. Shunday qilib, React-da biz this.setState ({name: 'John'}) satrlari bo'yicha biror narsa yozgan bo'lar edik.

Bu biz Vue-da erishganimiz kabi bir xil narsani amalga oshirsa-da, qo'shimcha yozuv mavjud, chunki Vue ma'lum bir ma'lumot yangilanganda har doim standart setState-ning o'z versiyasini birlashtiradi. Muxtasar qilib aytganda, React setState va undan keyin yangilangan ma'lumotlarni talab qiladi, Vue esa agar siz ma'lumotlar ob'ekti ichidagi qiymatlarni yangilagan bo'lsangiz, buni qilishni xohlaysiz degan taxminni bildiradi. Xo'sh, nega React bu bilan bezovta qiladi va nega setState hatto kerak? Buni tushuntirish uchun Revanth Kumarga topshiramiz:

"Buning sababi React, hayot o'zgarishi har doim ma'lum bir hayotiy kancalarni (masalan,] komponentWillReceiveProps, mustComponentUpdate, komponentWillUpdate, render, komponentDidUpdate) qayta ishga tushirishni xohlaydi. Siz setState funktsiyasini chaqirganingizda holat o'zgarganligini biladi. Agar siz to'g'ridan-to'g'ri mutatsiyaga uchragan bo'lsangiz, React o'zgarishlarni va hayotiy tsikllarning ishlashini kuzatib borish uchun ko'p ishlarni bajarishi kerak va hokazo. Oddiy React setState-dan foydalanadi. "
Fasol eng yaxshi bilardi

Endi bizda mutatsiyalar yo'q edi, endi ikkalamizning "Do" dasturimizga qanday yangi narsalar qo'shishni ko'rib chiqamiz.

Yangi "Do Items" mavzusini qanday yaratamiz?

Javob:

createNewToDoItem = () => {
    this.setState (({ro'yxat, todo}) => ({
      ro'yxati: [
          ... ro'yxati,
        {
          qilmoq
        }
      ],
      qilmoq: ''
    })
  );
};

Buni qanday amalga oshirdi?

React-da, bizning kirish maydonimiz qiymat deb ataladigan atributga ega. Ushbu qiymat Vue-ning ikki tomonlama bog'lanishni qanday bajarishini o'xshatadigan narsani yaratish uchun bir-biriga bog'lab turadigan funktsiyalar yordamida avtomatik ravishda yangilanadi (agar siz bu haqda oldin hech qachon eshitmagan bo'lsangiz) "Bu erda batafsil tushuntirish mavjud. shundan keyin Vue buni amalga oshirdi). Buni kiritish maydoniga qo'shimcha onChange voqea tinglovchisini qo'shish orqali yaratamiz. Keling, kirish maydonini tezda ko'rib chiqaylik, shunda nima bo'layotganini ko'rishingiz mumkin:

Kiritish maydonining qiymati o'zgarganda, tutqichni kiritish funktsiyasi ishlaydi. U kirish maydonidagi hamma narsaga o'rnatib, davlat ob'ektining ichida joylashgan todo-ni yangilaydi. Ushbu funktsiya quyidagicha ko'rinadi:

handleInput = e => {
  this.setState ({
    todo: e.target.value
  });
};

Endi, foydalanuvchi yangi element qo'shish uchun sahifadagi + tugmachasini bosganda, createNewToDoItem funktsiyasi aslida this.setState-ni ishga tushiradi va unga funktsiyani o'tkazadi. Ushbu funktsiya ikkita parametrni oladi, birinchisi davlat ob'ektidagi butun ro'yxat qatori, ikkinchisi todo (bu handInput funktsiyasi bilan yangilanadi). Keyin funktsiya yangi ob'ektni qaytaradi, unda avvalgisiga butun ro'yxat mavjud va so'ngiga todo qo'shiladi. Barcha ro'yxat tarqalish operatori yordamida qo'shiladi (Google buni oldin ko'rmagan bo'lsangiz - bu ES6 sintaksisi).

Va nihoyat, biz bo'sh satrga o'tdik, bu esa kiritish maydonidagi qiymatni avtomatik ravishda yangilaydi.

Vaqt:

createNewToDoItem () {
    this.list.push (
        {
            'todo': this.todo
        }
    );
    this.todo = '';
}

Vue buni qanday amalga oshirdi?

Vue-da bizning kirish maydonimiz v-model deb nomlangan dastagiga ega. Bu bizga ikki tomonlama bog'lash deb nomlanadigan narsani qilishimizga imkon beradi. Keling, kirish maydonimizni bir zumda ko'rib chiqamiz va keyin nima sodir bo'lganligini tushuntirib beramiz:

V-Model ushbu maydonning kirishini bizda ob'ektga toDoItem deb nomlangan kalit bilan bog'laydi. Sahifa yuklanganda, biz toDoItemni bo'sh satrga o'rnatamiz, masalan: todo: ''. Agar bu erda allaqachon ma'lumotlar mavjud bo'lsa, masalan: todo: 'bu erga bir oz matn qo'shing', kirish maydonchamizga allaqachon ba'zi matn qo'shib kiritish maydoni kiritiladi. Qanday bo'lmasin, bo'sh satr sifatida mavjud bo'lgan narsalarga qaytish uchun, kirish maydoniga kiritgan har qanday matnimiz todo qiymatiga bog'liq bo'ladi. Bu samarali ikki tomonlama bog'laydi (kirish maydoni ma'lumotlar ob'ektini yangilashi mumkin va ma'lumotlar ob'ekti kirish maydonini yangilashi mumkin).

Ilgari yaratilgan createNewToDoItem () kod blokiga qarasak, todo tarkibini ro'yxat qatoriga o'tkazamiz va todo-ni bo'sh satrga yangilaymiz.

Qanday qilib biz ro'yxatdan o'chiramiz?

Javob:

deleteItem = indexToDelete => {
    this.setState (({list}) => ({
      ro'yxat: list.filter ((toDo, indeks) => indeks! == indexToDelete)
    }));
};

Buni qanday amalga oshirdi?

Shunday qilib, DeleteItem funktsiyasi ToDo.js ichida joylashgan bo'lsa, avvalo ToDoItem.js ichida unga murojaat qilishim mumkin edi, avvalambor, -ga propiska sifatida deleteItem () funktsiyasini berib:

Bu birinchi navbatda bolaga kirish uchun funktsiyani pastga o'tkazadi. Bu erda biz asosiy parametrni uzatish bilan bir qatorda buni ham bog'lab turganimizni ko'rasiz, chunki tugmachani bosganda ToDoItem-ni o'chirishga urinayotganini farqlash uchun funktsiyadan foydalanish kerak. Keyin, ToDoItem komponentasida biz quyidagilarni bajaramiz:

-

Men ona komponentasida o'tirgan funktsiyaga murojaat qilishim kerak bo'lgan narsa bu this.props.deleteItemga murojaat qilish edi.

Vaqt:

onDeleteItem (todo) {
  this.list = this.list.filter (element => element! == todo);
}

Vue buni qanday amalga oshirdi?

Vue-da biroz boshqacha yondashuv talab qilinadi. Biz bu erda uchta narsani qilishimiz kerak:

Birinchidan, biz funktsiyani chaqirmoqchi bo'lgan elementda:

-

Keyin biz bolalar komponenti ichidagi usul sifatida emissiya funktsiyasini yaratishimiz kerak (bu holda, ToDoItem.vue), bu quyidagicha:

deleteItem (todo) {
    $ emit ('o'chirish', todo)
}

Shu bilan birga, ToDo.vue ichiga ToDoItem.vue qo'shganda biz biron bir funktsiyaga murojaat qilganimizni sezasiz.

Bu odatiy voqealarni tinglovchi sifatida tanilgan narsa. U 'o'chirish' qatori bilan chiqadigan har qanday holatlarga e'tibor beradi. Agar u buni eshitsa, onDeleteItem deb nomlangan funktsiyani ishga tushiradi. Ushbu funktsiya ToDoItem.vue emas, balki ToDo.vue ichida joylashgan. Ushbu funktsiya, oldin aytib o'tilganidek, bosilgan elementni olib tashlash uchun ma'lumotlar ob'ekti ichidagi todo massivini shunchaki filtrlaydi.

Shuni ham ta'kidlash kerakki, Vue misolida men $ chertish tinglovchisiga $ emitatsiya qismini shunchaki yozishim mumkin edi:

 
+
.

Bu erda juda oson va biz on-layn on-layn rejimida vanilya JS bilan qanday ish tutishimizga o'xshaydi. Vue qismida aytib o'tilganidek, kirish tugmachasi bosilganda har qanday ishlov berish uchun tadbir tinglovchisini sozlash biroz ko'proq vaqt talab qildi. Aslida bu onKeyPress hodisasini kirish yorlig'i bilan boshqarishni talab qiladi, masalan:

KeyPress = {this.handleKeyPress} /> da 

Ushbu funktsiya, asosan, "kiritish" tugmachasi bosilganligini tan olganda, createNewToDoItem funktsiyasini ishga tushirdi:

handleKeyPress = (e) => {
if (e.key === 'Kirish') {
this.createNewToDoItem ();
}
};

Vaqt:

Vue-da bu juda to'g'ri. Biz shunchaki @ belgisini ishlatamiz va keyin biz qilishni istagan voqea-tinglovchilar turini tanlang. Masalan, klik voqealari tinglovchisini qo'shish uchun biz quyidagilarni yozishimiz mumkin:

 + 

Eslatma: @ klik aslida v-onni yozish uchun stsenariy hisoblanadi: cherting. Vue tadbirining tinglovchilariga yoqadigan narsa shundaki, siz ularga ulanishingiz mumkin bo'lgan bir nechta narsalar mavjud. Masalan, bu tadbirni tinglovchilarni bir necha marotaba ishga tushirishiga to'sqinlik qiladi. Tugmachalar bilan ishlov berish uchun aniq tadbirlarni tinglovchilarni yozish haqida gap ketganda, bir nechta yorliqlar mavjud. Kirish tugmachasi bosilganda yangi ToDo elementlarini yaratish uchun React-da voqea tinglovchilarini yaratish biroz ko'proq vaqt talab qilinishini aniqladim. Vue-da, men shunchaki yoza oldim:

Ma'lumotni bolalar komponentiga qanday o'tkazamiz?

Javob:

Bunga javoban, biz bola komponentini u yaratilgan nuqtada uzatamiz. Kabi:

Bu erda biz toDoItem komponentiga o'tkaziladigan ikkita rekvizitni ko'rmoqdamiz. Shu paytdan boshlab, biz ularni ushbu komponentda bolalar komponentida this.props orqali havola qilishimiz mumkin. Shunday qilib, item.todo prop-ga kirish uchun biz shunchaki this.props.item deb nomlaymiz.

Vaqt:

Vue-da, biz uni yaratgan nuqtada bolalar komponentiga uzatamiz. Kabi:

Bu amalga oshirilgandan so'ng, biz ularni bolalar tarkibiy qismiga o'tkazamiz, masalan: rekvizitlar: ['todo']. Keyin ularni bolada ularning ismi bilan atash mumkin - bizning holatimizda "todo".

Qanday qilib ma'lumotlarni ota-ona tarkibiy qismiga qaytaramiz?

Javob:

Birinchidan, biz funktsiyani bola komponentasi deb nomlagan joyda uni tepaga yo'naltirish orqali funktsiyani bolalar komponentiga o'tkazamiz. Keyin onklick kabi har qanday usulda bolaga funktsiyani bajarish uchun qo'ng'iroqni this.props.whothingTheFunctionIsCalled ga murojaat qilib qo'shamiz. Bu keyin ona komponentasida joylashgan funktsiyani ishga tushiradi. Biz ushbu jarayonning misolini 'Qanday qilib biz ro'yxatdan o'chiramiz' bo'limida ko'rishimiz mumkin.

Vaqt:

Bizning bola komponentamizda shunchaki ota funktsiyasiga qaytadigan funktsiyani yozamiz. Ota-ona komponentamizda ushbu qiymat chiqqanda tinglaydigan funktsiyani yozamiz va keyinchalik u funktsiyani chaqirishi mumkin. Biz ushbu jarayonning misolini 'Qanday qilib biz ro'yxatdan o'chiramiz' bo'limida ko'rishimiz mumkin.

Va u erda bizda bor!

Ma'lumotni qanday qo'shish, olib tashlash va o'zgartirish, ota-onadan bolaga rekvizitlar ko'rinishidagi ma'lumotlarni uzatish, shuningdek, voqeani tinglovchilar shaklida boladan ota-onaga yuborish. Albatta, React va Vue o'rtasida juda ko'p farqlar va savol-javoblar mavjud, ammo umid qilamanki, ushbu maqolaning mazmuni ikkala ramkaning qanday ishlashini tushunish uchun asos bo'lib xizmat qildi.

Agar siz buni foydali deb bilsangiz, juda ko'p va ko'p marta chapak chalishni unutmang. Maslahat, siz 50 tagacha qoldirishingiz mumkin!

Tarjimalar

Xitoy

Yaponcha

Koreys

Forsiy

Polyakcha

Portugalcha

Rus

Ispan

Tayvan

Agar siz ushbu maqolani boshqa tilga tarjima qilish orqali yanada qulayroq qilishni xohlasangiz, iltimos, buni bajaring - menga ushbu sahifada havolani qo'sha olishim uchun xabar bering.

Angular haqida nima deyish mumkin?

Siz so'raganingizdan xursandman! Chunki Sem Borick ushbu maqolaning 2-qismini yozgan.

Va React Hook-lardan nima foydalanmayapsiz?

Aslida ushbu maqolaning ilgaklar ishlatadigan yangilangan versiyasi mavjud! Eng so'nggi nashrni bu erda o'qing! Ammo havolani bosishdan oldin, ushbu maqolani o'qiganingiz ma'qul bo'lsa, ba'zi bir fikrlarni qoldirishingizga ishonch hosil qiling, chunki ular bizning qilayotgan ishimizni qo'llab-quvvatlaydi.

Va [ramka / kutubxonani qo'shish] haqida nima deyish mumkin?

HyperApp

AppRun

Sud hujjatlari

Hyperstack

Agar siz ushbu maqolada ishlatilgan uslublarni qiziqtirmoqchi bo'lsangiz va o'zingizning teng qismingizni yaratmoqchi bo'lsangiz, iltimos, buni bajaring! Va sizning maqolangizga havolani qo'shishim uchun menga xabar berishga ishonch hosil qiling

Github ikkala dasturga havolalar:

ToDo-ga o'tish: https://github.com/sunil-sandhu/vue-todo

ToDo-ga harakat qiling: https://github.com/sunil-sandhu/react-todo

Ayni paytda bizning guruhimizga JavaScript In Plain English-da yangi yozuvchilarni qidirmoqdamiz. Agar sizda xabar yubormoqchi bo'lgan maqolangiz bo'lsa, Twitter-da bizga xabar yuboring va biz sizni yozuvchi sifatida qo'shamiz.