Perbedaan antara deklaratif dan imperatif di React.js?

Baru-baru ini saya telah mempelajari banyak hal tentang fungsionalitas dan cara menggunakan perpustakaan JavaScript Facebook React.js. Ketika berbicara tentang perbedaan nya ke seluruh dunia JavaScript sering dua gaya pemrograman declarativedan imperativeyang mentionned.

Apa perbedaan keduanya?

Gaya deklaratif, seperti yang dimiliki react, memungkinkan Anda mengontrol aliran dan status dalam aplikasi Anda dengan mengatakan "Seharusnya terlihat seperti ini". Gaya imperatif membalikkan keadaan itu dan memungkinkan Anda mengontrol aplikasi dengan mengatakan "Inilah yang harus Anda lakukan".

Manfaat dari deklaratif adalah Anda tidak terjebak dalam detail implementasi yang mewakili negara bagian. Anda mendelegasikan komponen organisasi untuk menjaga agar tampilan aplikasi Anda tetap konsisten sehingga Anda hanya perlu mengkhawatirkan status.

Bayangkan Anda memiliki kepala pelayan, yang semacam metafora untuk kerangka kerja. Dan Anda ingin membuat makan malam. Di dunia penting, Anda akan memberi tahu mereka langkah demi langkah cara membuat makan malam. Anda harus memberikan instruksi ini:

Go to the kitchen
Open fridge
Remove chicken from fridge
...
Bring food to the table

Dalam dunia deklaratif, Anda cukup mendeskripsikan apa yang Anda inginkan

I want dinner with chicken.

Jika kepala pelayan Anda tidak tahu cara membuat ayam, maka Anda tidak dapat mengoperasikannya dengan gaya deklaratif. Sama seperti jika Backbone tidak tahu cara bermutasi sendiri untuk melakukan tugas tertentu, Anda tidak bisa begitu saja menyuruhnya melakukan tugas itu. React bisa menjadi deklaratif karena "tahu cara membuat ayam", misalnya. Dibandingkan Backbone, yang hanya tahu cara berinteraksi dengan dapur.

Mampu menggambarkan keadaan mengurangi luas permukaan untuk serangga secara dramatis, yang merupakan keuntungan. Di sisi lain, Anda mungkin memiliki lebih sedikit fleksibilitas dalam bagaimana hal-hal terjadi karena Anda sedang mendelegasikan atau abstrak pergi bagaimana Anda menerapkan negara.

Bayangkan komponen UI sederhana, seperti tombol "Suka". Saat Anda mengetuknya, berubah menjadi biru jika sebelumnya abu-abu, dan abu-abu jika sebelumnya biru.

Cara penting untuk melakukan ini adalah:

if( user.likes() ) {
    if( hasBlue() ) {
        removeBlue();
        addGrey();
    } else {
        removeGrey();
        addBlue();
    }
}

Pada dasarnya, Anda harus memeriksa apa yang saat ini ada di layar dan menangani semua perubahan yang diperlukan untuk menggambar ulang dengan keadaan saat ini, termasuk membatalkan perubahan dari keadaan sebelumnya. Anda dapat membayangkan betapa rumitnya hal ini dalam skenario dunia nyata.

Sebaliknya, pendekatan deklaratifnya adalah:

if( this.state.liked ) {
    return <blueLike />;
} else {
    return <greyLike />;
}

Karena pendekatan deklaratif memisahkan masalah, bagian ini hanya perlu menangani tampilan UI dalam status tertentu, dan karena itu lebih mudah dipahami.

Ini adalah analogi yang bagus:

* Tanggapan penting : Keluar dari pintu keluar utara tempat parkir dan belok kiri. Naik I-15 selatan sampai Anda tiba di pintu keluar Bangerter Highway. Ambil kanan dari pintu keluar seperti Anda akan pergi ke Ikea. Jalan lurus dan belok kanan pada cahaya pertama. Lanjutkan melalui cahaya berikutnya lalu belok kiri berikutnya. Rumah saya # 298.

Tanggapan deklaratif : Alamat saya adalah 298 West Immutable Alley, Draper Utah 84020 *

https://tylermcginnis.com/imperative-vs-declarative-programming/

Cara terbaik adalah membandingkan React (deklaratif) dan JQuery (imperatif) untuk menunjukkan perbedaannya.

Di React, Anda hanya perlu mendeskripsikan status akhir UI Anda dalam render()metode, tanpa mengkhawatirkan cara beralih dari status UI sebelumnya ke status UI baru. Misalnya,

render() {
  const { price, volume } = this.state;
  const totalPrice = price * volume;

  return (
    <div>
      <Label value={price} className={price > 100 ? 'expensive' : 'cheap'} ... />
      <Label value={volume} className={volume > 1000 ? 'high' : 'low'} ... />
      <Label value={totalPrice} ... />
      ...
    </div>
  )
}

Di sisi lain, JQuery mengharuskan Anda untuk mentransisikan status UI Anda secara imperatif, misalnya, memilih elemen label dan memperbarui teks dan CSS-nya:

updatePrice(price) {
  $("#price-label").val(price);
  $("#price-label").toggleClass('expansive', price > 100);
  $("#price-label").toggleClass('cheap', price < 100);

  // also remember to update UI depending on price 
  updateTotalPrice();
  ... 
}

updateVolume(volume) {
  $("#volume-label").val(volume);
  $("#volume-label").toggleClass('high', volume > 1000);
  $("#volume-label").toggleClass('low', volume < 1000);
  
  // also remember to update UI depending on volume
  updateTotalPrice();
  ... 
}

updateTotalPrice() {
  const totalPrice = price * volume;
  $("#total-price-label").val(totalPrice);
  ...
}

Dalam skenario dunia nyata, akan ada lebih banyak elemen UI yang akan diperbarui, ditambah atributnya (misalnya, gaya CSS, dan pendengar acara), dll. Jika Anda melakukan ini secara imperatif dengan menggunakan JQuery, ini akan menjadi rumit dan membosankan; mudah untuk lupa memperbarui beberapa bagian UI, atau lupa menghapus penangan kejadian lama (menyebabkan kebocoran memori atau penangan aktif beberapa kali), dll. Di sinilah bug terjadi, yaitu, status UI dan status model tidak aktif sinkronisasi.

Status tidak sinkron tidak akan pernah terjadi pada pendekatan deklaratif React, karena kita hanya perlu mengupdate status model, dan React bertanggung jawab untuk menjaga agar UI dan status model tetap sinkron.

• Di bawah kendali, React akan memperbarui semua elemen DOM yang diubah menggunakan kode imperatif.

Anda juga dapat membaca jawaban saya untuk Apa perbedaan antara pemrograman deklaratif dan imperatif? .

PS: dari contoh jQuery di atas, Anda mungkin berpikir bagaimana jika kita meletakkan semua manipulasi DOM dalam sebuah updateAll()metode, dan memanggilnya setiap kali ketika salah satu status model kita berubah, dan UI tidak akan pernah tidak sinkron. Anda benar, dan inilah yang secara efektif dilakukan React, satu-satunya perbedaan adalah bahwa jQuery updateAll()akan menyebabkan banyak manipulasi DOM yang tidak perlu, tetapi React hanya akan memperbarui elemen DOM yang diubah menggunakan Virtual DOM Diffing Algorithm .

Kode imperatif menginstruksikan JavaScript tentang bagaimana seharusnya melakukan setiap langkah. Dengan kode deklaratif, kami memberi tahu JavaScript apa yang ingin kami lakukan, dan membiarkan JavaScript menangani langkah-langkahnya.

React bersifat deklaratif karena kita menulis kode yang kita inginkan dan React bertanggung jawab untuk mengambil kode yang kita deklarasikan dan melakukan semua langkah JavaScript / DOM untuk membawa kita ke hasil yang diinginkan.

Paralel kehidupan nyata di dunia imperatif akan memasuki bar untuk minum bir, dan memberikan instruksi berikut kepada bartender:

--Ambil gelas dari rak

- Letakkan gelas di depan konsep

--Tarik gagang sampai gelas penuh

- Berikan aku gelasnya.

Di dunia deklaratif, sebaliknya, Anda hanya akan berkata: "Bir, tolong."

Pendekatan deklaratif meminta bir mengasumsikan bahwa bartender tahu cara menyajikannya, dan itu merupakan aspek penting dari cara kerja pemrograman deklaratif.

Dalam pemrograman deklaratif, pengembang hanya mendeskripsikan apa yang ingin mereka capai dan tidak perlu mencantumkan semua langkah untuk membuatnya berfungsi.

Fakta bahwa React menawarkan pendekatan deklaratif membuatnya mudah digunakan, dan akibatnya, kode yang dihasilkan menjadi sederhana, yang seringkali menyebabkan lebih sedikit bug dan lebih banyak pemeliharaan.

Karena React mengikuti paradigma deklaratif, dan tidak perlu memberitahunya bagaimana berinteraksi dengan DOM; Anda cukup MENYATAKAN apa yang ingin Anda lihat di layar dan React melakukan pekerjaan itu untuk Anda.

Pemrograman deklaratif adalah paradigma pemrograman… yang mengekspresikan logika komputasi tanpa menjelaskan aliran kontrolnya.

Pemrograman imperatif adalah paradigma pemrograman yang menggunakan pernyataan yang mengubah status program.

tautan ref: - https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2

Saya akan mulai dengan analogi: Saya punya dua mobil, di dua mobil saya, saya ingin suhu di dalam mobil saya menjadi suhu kamar normal ~ 72 ° F. Pada mobil pertama (yang lebih tua), terdapat dua kenop untuk mengontrol suhu (1 kenop untuk mengontrol suhu dan 1 kenop untuk mengontrol aliran udara). Jika terlalu panas, saya harus mengatur kenop pertama untuk menurunkan suhu dan mungkin mengubah aliran udara) dan sebaliknya jika terlalu dingin. Ini adalah pekerjaan wajib! Saya harus mengatur kenopnya sendiri. Di mobil kedua saya (lebih baru), saya bisa mengatur / menyatakan suhunya. Yang berarti saya tidak perlu mengutak-atik kenop untuk menyesuaikan suhu mobil saya tahu saya nyatakan / setel ke 72 ° F dan mobil saya akan melakukan pekerjaan penting untuk mencapai keadaan itu.

React sama, Anda mendeklarasikan markup / template dan stat kemudian React melakukan pekerjaan penting untuk menjaga agar DOM tetap sinkron dengan aplikasi Anda.

<button onClick={activateTeleporter}>Activate Teleporter</button>

Alih-alih menggunakan .addEventListener()untuk menyiapkan penanganan acara, kami mendeklarasikan apa yang kami inginkan. Saat tombol diklik, itu akan menjalankan activateTeleporterfungsinya.

• Deklaratif memungkinkan Anda untuk mengontrol semua tampilan. (seperti sebagai manajemen negara)
• Imperatif memungkinkan Anda mengontrol tampilan. (seperti $ (ini))