Perbandingan Bereaksi dan Vue pada contoh praktis

Penulis bahan, terjemahan yang kami terbitkan hari ini, mengatakan bahwa ia harus menggunakan Vue di tempat kerja dan ia telah mempelajari kerangka kerja ini dengan baik. Namun, dia selalu penasaran untuk mencari tahu bagaimana keadaan di dunia lain, yaitu, di React universe.

Dia membaca dokumentasi, menonton beberapa video pelatihan, dan meskipun semua ini tampak sangat berguna baginya, dia ingin benar-benar memahami apa perbedaan antara React dan Vue. Baginya, pencarian perbedaan antara kerangka kerja tidak untuk mengetahui apakah mereka mendukung model objek virtual dokumen, atau bagaimana tepatnya mereka membuat halaman. Dia ingin seseorang menjelaskan fitur kode kepadanya, untuk menunjukkan apa yang terjadi di dalamnya. Dia berharap menemukan artikel yang didedikasikan untuk menemukan perbedaan seperti itu, setelah membaca bahwa seseorang yang hanya tahu Vue atau React (atau orang yang sama sekali baru dalam pengembangan web) dapat lebih memahami perbedaan antara kerangka kerja ini.



Namun, dia tidak dapat menemukan artikel seperti itu. Fakta ini membuatnya mengerti bahwa ia sendiri harus mengambil artikel seperti itu dan menulis sepanjang jalan, memahami persamaan dan perbedaan antara Bereaksi dan Vue. Faktanya, berikut ini adalah deskripsi dari eksperimennya yang membandingkan kedua kerangka kerja ini.

Ketentuan Umum

Vue atau Bereaksi?

Untuk percobaan, saya memutuskan untuk membuat beberapa aplikasi Agenda yang cukup standar yang memungkinkan pengguna untuk menambahkan item ke daftar agenda dan menghapusnya dari itu. Kedua aplikasi dikembangkan menggunakan create-react-app standar ( create-react-app untuk Bereaksi dan vue-cli untuk Vue). CLI adalah, jika ada yang tidak tahu, singkatan yang merupakan singkatan dari Command Line Interface, yaitu antarmuka baris perintah.

Sekarang saya mengusulkan untuk melihat tampilan aplikasi yang dimaksud di sini.


Aplikasi yang dibuat oleh Vue dan React

Berikut adalah repositori dengan kode untuk aplikasi ini: Vue ToDo , React ToDo .

Kedua kode CSS yang sama digunakan di sana dan di sana, satu-satunya perbedaan adalah di mana tepatnya file yang sesuai berada. Dengan ini, mari kita lihat struktur proyek.


Struktur Proyek Menggunakan Vue dan React

Seperti yang Anda lihat, struktur kedua proyek ini hampir identik. Satu-satunya perbedaan utama adalah bahwa aplikasi Bereaksi memiliki tiga file CSS, sedangkan aplikasi Vue tidak memilikinya sama sekali. Alasan untuk ini adalah karena, ketika menggunakan create-react-app , komponen Bereaksi dilengkapi dengan file CSS yang menyertainya, dan Vue CLI mengambil pendekatan yang berbeda ketika gaya dinyatakan di dalam file komponen tertentu.

Akibatnya, baik pendekatan satu dan yang lain memungkinkan kita untuk mencapai tujuan yang sama, sementara, jika diinginkan, tidak ada yang menghalangi kita untuk mengatur gaya secara berbeda dari Vue atau React. Faktanya, semuanya bermuara pada preferensi pribadi dari orang yang membuat proyek web. Misalnya, topik penataan CSS terus dibahas di komunitas pengembang. Sekarang kita hanya mengikuti pendekatan CSS standar yang ditetapkan dalam CLI dari kerangka kerja yang dimaksud.

Namun, sebelum kita melangkah lebih jauh, mari kita lihat seperti apa komponen Vue dan React yang khas.

Berikut adalah kode komponen Vue (dalam proyek kami, itu ada di file ToDoItem.vue ).

 <template>   <div class="ToDoItem">       <p class="ToDoItem-Text">{{todo.text}}</p>       <div class="ToDoItem-Delete"            @click="deleteItem(todo)">-       </div>   </div> </template> <script>   export default {       name: "to-do-item",       props: ['todo'],       methods: {           deleteItem(todo) {               this.$emit('delete', todo)           }       }   } </script> <style>   .ToDoItem {       display: flex;       justify-content: center;       align-items: center;   }   .ToDoItem-Text {       width: 90%;       background-color: white;       border: 1px solid lightgrey;       box-shadow: 1px 1px 1px lightgrey;       padding: 12px;       margin-right: 10px;   }   .ToDoItem-Delete {       width: 20px;       padding: 5px;       height: 20px;       cursor: pointer;       background: #ff7373;       border-radius: 10px;       box-shadow: 1px 1px 1px #c70202;       color: white;       font-size: 18px;       margin-right: 5px;   }   .ToDoItem-Delete:hover {       box-shadow: none;       margin-top: 1px;       margin-left: 1px;   } </style> 

Berikut adalah kode untuk komponen Bereaksi (file ToDoItem.js ).

 import React, {Component} from 'react'; import './ToDoItem.css'; class ToDoItem extends Component {   render() {       return (           <div className="ToDoItem">               <p className="ToDoItem-Text">{this.props.item}</p>               <div className="ToDoItem-Delete" onClick={this.props.deleteItem}>-</div>           </div>       );   } } export default ToDoItem; 

Sekarang saatnya untuk menyelami rinciannya.

Bagaimana modifikasi data dilakukan?

Mengubah data juga disebut "mutasi data." Kita berbicara tentang perubahan yang dilakukan pada data yang disimpan aplikasi kita. Jadi, jika kita perlu mengubah nama orang tertentu dari "John" menjadi "Mark", maka kita berbicara tentang "mutasi data". Dalam pendekatan perubahan data inilah perbedaan utama antara React dan Vue. Yaitu, Vue membuat objek data di mana data berada, dan konten yang dapat diubah secara bebas. Bereaksi menciptakan objek state di mana keadaan aplikasi disimpan, dan ketika bekerja dengannya, beberapa upaya tambahan diperlukan untuk mengubah data. Namun, dalam Bereaksi semuanya diatur dengan cara ini karena suatu alasan, kita akan membicarakannya di bawah ini, dan untuk permulaan kita akan mempertimbangkan objek yang disebutkan di atas.

Ini adalah objek data digunakan oleh Vue.

 data() {     return {         list: [             {               todo: 'clean the house'             },             {               todo: 'buy milk'             }         ],     } }, 

Beginilah bentuk objek yang digunakan dalam React:

 constructor(props) {       super(props);       this.state = {           list: [               {                   'todo': 'clean the house'               },               {                   'todo': 'buy milk'               }           ],       };   }; 

Seperti yang Anda lihat, dalam kedua kasus kami menggambarkan data yang sama, keduanya hanya dirancang secara berbeda. Sebagai hasilnya, kita dapat mengatakan bahwa transfer data awal ke komponen dalam Vue dan React terlihat sangat, sangat mirip. Tetapi, seperti yang telah disebutkan, pendekatan untuk mengubah data yang ada dalam kerangka kerja ini berbeda.

Misalkan kita memiliki elemen data seperti name: 'Sunil' . Lalu saya menugaskan properti name saya sendiri.

Di Vue, Anda dapat mengakses data ini menggunakan konstruk this.name . Dan inilah cara mengubahnya: this.name = 'John' . Saya tidak tahu persis bagaimana perasaan saya jika nama saya benar-benar berubah, tetapi di Vue berfungsi seperti itu.

Di Bereaksi, Anda dapat mengakses data yang sama menggunakan konstruk this.state.name . Tetapi mengubah mereka dengan menulis sesuatu seperti this.state.name = 'John' tidak mungkin, karena Bereaksi memiliki batasan yang mencegah perubahan data tersebut. Karenanya, di Bereaksi, Anda harus menggunakan sesuatu seperti this.setState({name: 'John'}) .

Hasil dari operasi semacam itu sama dengan yang diperoleh setelah melakukan operasi yang lebih sederhana di Vue. Anda harus menulis lebih banyak kode dalam Bereaksi, tetapi dalam Vue ada sesuatu seperti versi khusus dari fungsi setState , yang disebut ketika, tampaknya, perubahan data sederhana. Oleh karena itu, untuk meringkas, Bereaksi membutuhkan penggunaan setState dengan deskripsi data yang perlu diubah, dan Vue bekerja dengan asumsi bahwa pengembang ingin menggunakan sesuatu yang serupa dengan mengubah data di dalam objek data .

Sekarang mari kita bertanya pada diri sendiri mengapa React setState dan mengapa fungsi setState diperlukan sama sekali. Anda dapat menemukan jawaban untuk pertanyaan-pertanyaan ini dari Revant Kumar : “Ini karena React berusaha untuk mengeksekusi kembali, setelah perubahan keadaan, kait siklus hidup tertentu, seperti componentWillReceiveProps , shouldComponentUpdate , componentWillUpdate , render , componentDidUpdate . Itu belajar bahwa negara telah berubah ketika Anda memanggil fungsi setState . Jika Anda mengubah keadaan secara langsung, Bereaksi harus melakukan lebih banyak pekerjaan untuk melacak perubahan, untuk menentukan kait siklus hidup mana yang harus dijalankan, dan sebagainya. Akibatnya, Bereaksi menggunakan setState untuk membuat hidup setState . "

Sekarang kita telah mengetahui perubahan data, mari kita bicara tentang bagaimana, di kedua versi aplikasi kita, untuk menambahkan item baru ke daftar yang harus dilakukan.

Tambahkan item baru ke daftar agenda

▍Bereaksi

Berikut cara melakukannya di Bereaksi.

 createNewToDoItem = () => {   this.setState( ({ list, todo }) => ({     list: [         ...list,       {         todo       }     ],     todo: ''   }) ); }; 

Di sini bidang yang digunakan untuk input data ( input ), memiliki nilai atribut. Atribut ini diperbarui secara otomatis melalui penggunaan sepasang fungsi yang saling berhubungan yang membentuk apa yang disebut pengikatan data dua arah (jika Anda belum pernah mendengar ini sebelumnya - tunggu sebentar, kita akan membicarakan ini di bagian tentang menambahkan elemen ke aplikasi Vue). Kami membuat komunikasi dua arah semacam ini karena kehadiran onChange acara onChange tambahan yang dilampirkan pada bidang input . Mari kita lihat kode untuk bidang ini sehingga Anda dapat memahami apa yang terjadi di sini.

 <input type="text"      value={this.state.todo}      onChange={this.handleInput}/> 

Fungsi handleInput dipanggil ketika nilai bidang input berubah. Ini mengarah ke memperbarui elemen todo , yang ada di dalam objek state , dengan mengaturnya ke nilai yang ada di bidang input . Ini adalah bagaimana fungsi handleInput terlihat.

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

Sekarang, ketika pengguna mengklik tombol + pada halaman aplikasi untuk menambahkan catatan baru ke daftar, fungsi createNewToDoItem memanggil metode this.setState dan meneruskannya fungsi. Fungsi ini membutuhkan dua parameter. Yang pertama adalah seluruh list array dari objek state , dan yang kedua adalah elemen todo yang diperbarui oleh fungsi handleInput . Fungsi kemudian mengembalikan objek baru yang berisi array list lama, dan menambahkan elemen todo baru ke akhir array ini. Pekerjaan dengan daftar diatur menggunakan operator spread (jika Anda belum pernah bertemu sebelumnya, ketahuilah bahwa ini adalah salah satu fitur baru ES6 dan cari detailnya).

Akhirnya, string kosong ditulis dalam todo , yang secara otomatis memperbarui value di bidang input .

UeVue

Konstruk berikut digunakan untuk menambahkan item baru ke daftar tugas di Vue.

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

Dalam Vue, bidang input memiliki arahan v-model . Ini memungkinkan Anda untuk mengatur pengikatan data dua arah. Lihatlah kode untuk bidang ini dan bicarakan tentang apa yang terjadi di sini.

 <input type="text" v-model="todo"/> 

Arahan v-model mengikat bidang ke kunci yang ada di objek data yang disebut toDoItem . Ketika halaman dimuat, baris kosong ditulis dalam toDoItem , sepertinya todo: '' .

Jika sudah ada beberapa data, seperti todo: 'add some text here' , maka teks yang sama akan masuk ke bidang input, yaitu - 'add some text here' . Bagaimanapun, jika kita kembali ke contoh dengan string kosong, teks yang kita masukkan di bidang akan jatuh, karena pengikatan data, ke properti todo . Ini adalah pengikatan data dua arah, yaitu, memasukkan data baru di bidang mengarah untuk menulis data ini ke objek data , dan memperbarui data di objek mengarah ke tampilan data ini di lapangan.

Sekarang ingat fungsi createNewToDoItem() , yang telah kita bicarakan di atas. Seperti yang Anda lihat, kami meletakkan konten todo di array list , dan kemudian menulis string kosong ke todo .

Menghapus item dari daftar

▍Bereaksi

Dalam Bereaksi, operasi ini dilakukan seperti ini.

 deleteItem = indexToDelete => {   this.setState(({ list }) => ({     list: list.filter((toDo, index) => index !== indexToDelete)   })); }; 

Saat fungsi ToDo.js file ToDo.js , Anda dapat mengaksesnya tanpa masalah dari ToDoItem.js , pertama-tama meneruskan fungsi ini sebagai properti ke <ToDoItem/> . Begini tampilannya:

 <ToDoItem deleteItem={this.deleteItem.bind(this, key)}/> 

Di sini kita pertama melewati fungsi, yang membuatnya tersedia untuk komponen anak. Selain itu, kami mengikat this dan meneruskan parameter key . Parameter ini digunakan oleh fungsi untuk membedakan elemen ToDoItem yang akan dihapus dari elemen lain. Kemudian, di dalam komponen ToDoItem , kami melakukan hal berikut.

 <div className="ToDoItem-Delete" onClick={this.props.deleteItem}>-</div> 

Semua yang perlu dilakukan untuk mengakses fungsi yang terletak di komponen induk adalah dengan menggunakan konstruksi this.props.deleteItem .

UeVue

Menghapus item daftar di Vue dilakukan seperti ini.

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

Vue membutuhkan pendekatan yang sedikit berbeda untuk menghilangkan elemen dari yang kita gunakan dalam Bereaksi. Yaitu, ada tiga langkah yang harus diambil.

Pertama, inilah yang perlu Anda lakukan pada elemen yang Anda perlu memanggil fungsi untuk menghapusnya.

 <div class="ToDoItem-Delete" @click="deleteItem(todo)">-</div> 

Maka Anda perlu membuat fungsi ToDoItem.vue sebagai metode di komponen ToDoItem.vue (dalam hal ini, di ToDoItem.vue ), yang terlihat seperti ini.

 deleteItem(todo) {   this.$emit('delete', todo) } 

Selanjutnya, Anda mungkin memperhatikan bahwa kami menambahkan ToDoItem.vue di dalam ToDo.vue .

 <ToDoItem v-for="todo in list"         :todo="todo"         @delete="onDeleteItem" // <-- this :)         :key="todo.id" /> 

Inilah yang disebut pendengar acara khusus. Itu menanggapi untuk emit panggilan dengan garis delete . Jika menangkap kejadian serupa, ia memanggil fungsi onDeleteItem . Itu terletak di dalam ToDo.vue , dan bukan di ToDoItem.vue . Fungsi ini, seperti yang disebutkan di atas, cukup memfilter todo array yang terletak di objek data untuk menghapus elemen yang diklik di atasnya.

Selain itu, perlu dicatat bahwa dalam contoh menggunakan Vue, orang bisa menulis kode yang terkait dengan fungsi @click . Ini mungkin terlihat seperti ini.

 <div class="ToDoItem-Delete" @click="$emit('delete', todo)">-</div> 

Ini akan mengurangi jumlah langkah yang diperlukan untuk menghapus item daftar dari tiga menjadi dua. Cara melanjutkan adalah masalah preferensi pengembang.

Untuk meringkas bagian ini, kita dapat mengatakan bahwa dalam Bereaksi, akses ke fungsi yang dijelaskan dalam komponen induk diatur melalui this.props (mengingat bahwa props diteruskan ke komponen anak, yang merupakan teknik standar yang dapat ditemukan secara harfiah di mana-mana). Dalam Vue, komponen anak harus memicu peristiwa menggunakan fungsi emit , dan peristiwa ini sudah ditangani oleh komponen induk.

Bekerja dengan pendengar acara

▍Bereaksi

Di Bereaksi, pendengar acara untuk sesuatu yang sederhana, seperti acara klik, cukup sederhana. Berikut adalah contoh membuat pengendali acara click untuk tombol yang membuat item tugas baru.

 <div className="ToDo-Add" onClick={this.createNewToDoItem}>+</div> 

Semuanya diatur dengan cukup sederhana di sini, sangat mirip dengan pemrosesan acara semacam itu menggunakan JavaScript murni.

Perlu dicatat bahwa di sini, menyiapkan pendengar acara untuk menekan tombol, misalnya, untuk Enter , membutuhkan waktu sedikit lebih lama daripada di Vue. Di sini Anda memerlukan acara onKeyPress untuk ditangani sebagai berikut. Berikut adalah kode untuk bidang input.

 <input type="text" onKeyPress={this.handleKeyPress}/> 

Fungsi handleKeyPress memanggil fungsi createNewToDoItem ketika mengenali createNewToDoItem pada Enter . Ini terlihat seperti ini.

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

UeVue

Penangan acara di Vue sangat mudah dikonfigurasi. Cukup menggunakan simbol @ , lalu tentukan jenis pendengar yang ingin kita gunakan.

Misalnya, untuk menambahkan pendengar acara klik, Anda dapat menggunakan kode berikut.

 <div class="ToDo-Add" @click="createNewToDoItem()">+</div> 

Harap dicatat bahwa @click adalah kependekan dari v-on:click . Pendengar acara Vue pandai dikendalikan dengan sangat halus. Misalnya, melampirkan konstruk .once ke pendengar akan menyebabkan pendengar hanya sekali api.

Ada banyak singkatan yang menyederhanakan penulisan pendengar yang menanggapi penekanan tombol pada keyboard. Dalam Bereaksi, seperti yang telah kami katakan, ini membutuhkan waktu lebih lama daripada di Vue. Ini dilakukan dengan sangat sederhana.

 <input type="text" v-on:keyup.enter="createNewToDoItem"/> 

Mengirimkan data ke komponen anak

▍Bereaksi

Di Bereaksi, properti diteruskan ke komponen anak ketika dibuat. Misalnya, seperti ini:

 <ToDoItem key={key} item={todo} /> 

Di sini Anda dapat melihat dua properti diteruskan ke komponen ToDoItem . Mulai sekarang, mereka dapat diakses di komponen this.props melalui this.props .

Misalnya, untuk mengakses properti item.todo , cukup gunakan konstruk this.props.item .

UeVue

Di Vue, properti juga diteruskan ke komponen anak ketika mereka dibuat.

 <ToDoItem v-for="todo in list"           :todo="todo"           :key="todo.id"           @delete="onDeleteItem" /> 

Setelah itu, mereka diteruskan ke array props dari komponen anak, misalnya, menggunakan props: [ 'todo' ] construct. Anda dapat mengakses properti ini dalam komponen anak dengan nama, dalam kasus kami itu adalah nama 'todo' .

Mengirimkan data ke komponen induk

▍Bereaksi

Dalam Bereaksi, fungsi pertama kali dilewatkan ke komponen anak sebagai properti di mana komponen anak dipanggil. Kemudian direncanakan untuk memanggil fungsi ini, misalnya, dengan menambahkannya sebagai penangan onClick , atau dengan memanggilnya dengan memanggil this.props.whateverTheFunctionIsCalled . Ini mengarah ke panggilan ke fungsi yang terletak di komponen induk. Proses ini dijelaskan pada bagian tentang menghapus item dari daftar.

UeVue

Saat menggunakan Vue, dalam komponen anak, cukup menulis fungsi yang meneruskan data ke fungsi induk. Fungsi ditulis dalam komponen induk yang mendengarkan acara transfer nilai. Ketika peristiwa serupa terjadi, fungsi seperti itu disebut. Seperti Bereaksi, deskripsi proses ini dapat ditemukan di bagian tentang menghapus item dari daftar.

Ringkasan

Kami berbicara tentang cara menambah, menghapus, dan memodifikasi data dalam aplikasi berbasis Vue dan React, cara mentransfer data, dalam bentuk properti, dari komponen induk ke anak-anak, dan cara mengirim data dari komponen anak ke orang tua. Kami percaya bahwa setelah menganalisis contoh persamaan dan perbedaan, Vue dan Bereaksi terlihat, seperti kata mereka, dengan mata telanjang.

Tentu saja ada banyak perbedaan kecil antara React dan Vue, tetapi saya berharap apa yang kita bahas di sini akan berfungsi sebagai dasar yang baik untuk memahami bagaimana kerangka kerja ini bekerja. Kerangka kerja sering dianalisis ketika memilih platform yang tepat untuk proyek baru. Kami berharap materi ini akan membantu membuat pilihan semacam itu.

Pembaca yang budiman! Apa perbedaan antara React dan Vue, menurut Anda, yang paling penting yang mempengaruhi pilihan kerangka kerja tertentu, misalnya, sebagai dasar untuk proyek tertentu?