Saya ingin mengajukan pertanyaan tentang event handler ketika digunakan dalam HTML dan React.

Dalam buku Javascript dan Jquery yang ditulis oleh Jon Duckett, penulis menyebutkan bahwa menggunakan atribut event handler HTML dianggap praktik yang buruk, misalnya seperti berikut ini:

<button onClick="hide()">click me</button>

Tetapi baru-baru ini saya mulai belajar React dan ketika sebuah komponen didefinisikan, ada banyak contoh event handler yang digunakan sebagai atribut dan tampaknya umum untuk melakukannya, tidak mendapat kritik karena melakukannya,

<button onClick={doSomething}>
  xxxyyyzzz
</button>

Apakah ada alasan untuk ini? apakah karena ini adalah satu-satunya cara untuk mengikat event handler di React?, dari cara saya melihatnya, React pada dasarnya membangun elemen komponen melalui HTML tetapi menggunakan atribut event handler untuk menetapkan event ke dalamnya, jadi mengapa React membawa kembali konsep yang dianggap praktik buruk?

6
securenova 17 Agustus 2017, 11:47

2 jawaban

Jawaban Terbaik

Mengapa pendengar acara inline praktik buruk?

HTML menggambarkan isi dan struktur dokumen, CSS menggambarkan tampilan dan JavaScript adalah tentang logika atau perilaku. Hal-hal ini harus disimpan secara terpisah. Kode HTML dan JavaScript tidak boleh dicampur. Contoh Anda untuk itu adalah:

<button onClick="hide()">click me</button>

Namun, ini tidak berlaku untuk React: kami tidak memiliki satu file HTML. Sebagai gantinya, kami memiliki komponen termodulasi, yang memiliki struktur, gaya, dan perilakunya sendiri.

Di React, kami tidak menginginkan pemisahan presentasi dan logika, tetapi komponen yang berdiri sendiri. Itulah yang membedakannya dari aplikasi yang hanya menggunakan "Vanilla JavaScript" / DOM API.

5
PeterMader 17 Agustus 2017, 09:09

Di era Javascript sebelumnya, ini dianggap sebagai praktik yang buruk karena kami ingin memisahkan HTML dan JS sebanyak mungkin untuk pengelolaan kode yang lebih baik. Anda tidak dapat dengan cepat menavigasi ke onClick Anda dalam halaman HTML dengan sekumpulan button lainnya.

Dan di sini, di React, Anda mengelola kode aplikasi Anda melalui pohon komponen. Saya pikir kekuatan React adalah:

  • Modularitas
  • Komposisi
  • KERING (jangan ulangi sendiri)

Kembali ke contoh sederhana Anda, handler onClick akan dengan mudah dikelola di dalam komponen Anda. Mungkin dengan beberapa penangan lain juga tetapi masih nyaman dalam lingkup 1 komponen. Tergantung pada tingkat hierarki komponen Anda, semua yang ingin Anda lakukan terletak pada halaman yang sama, kelas yang sama, fungsi yang sama.

4
An Nguyen 17 Agustus 2017, 08:59