React.js menyediakan JSX sebagai sintaks seperti XHTML untuk membangun pohon komponen dan elemen. JSX mengkompilasi ke Javascript, dan bukannya memberikan loop atau kondisional di JSX yang tepat, Anda menggunakan Javascript secara langsung:
<ul>
{list.map((item) =>
<li>{item}</li>
)}
</ul>
Apa yang saya belum bisa jelaskan adalah, mengapa ini dianggap baik jika konstruksi analog dianggap buruk di JSP?
Sesuatu seperti ini di JSP
<ul>
<% for (item in list) { %>
<li>${item}</li>
<% } %>
</ul>
dianggap masalah keterbacaan yang harus diselesaikan dengan tag seperti <c:forEach>
. Alasan di balik tag JSTL juga sepertinya bisa diterapkan ke JSX:
- itu sedikit lebih mudah dibaca ketika Anda tidak beralih antara sintaks seperti XHTML (kurung sudut, bersarang) dan Java / Javascript (curlies, koma, parens)
- ketika Anda memiliki bahasa lengkap dan platform yang tersedia untuk digunakan di dalam fungsi rendering, ada sedikit untuk mencegah Anda memasukkan logika yang tidak termasuk di sana.
Satu-satunya alasan saya dapat memikirkan mengapa JSX berbeda adalah:
di Jawa, Anda memiliki insentif untuk melakukan hal yang salah - JSP akan di-hot-load, jadi tergoda untuk memasukkan kode ke dalam JSP untuk menghindari siklus membangun kembali / memulai kembali. Pemeliharaan dikorbankan untuk produktivitas langsung. Melucuti skrip dan membatasi kumpulan template yang sudah diperbaiki secara efektif merupakan cara untuk menegakkan kemampuan pemeliharaan. Tidak ada distorsi semacam itu di dunia JS.
Sintaks JSP dan Java kikuk dengan tambahan
<% ... %>
untuk membedakan kode Java dari pembuatan elemen, dan dengan sintaksis asli Java yang kurangforeach
konsep atau fungsi kelas satu (hingga saat ini). Hukuman sintaksis menggunakan Javascript asli untuk loop dan conditional di JSX adalah tidak-nol (menurut saya) tetapi tidak seburuk JSP, dan bisa dibilang tidak cukup buruk untuk menjamin memperkenalkan elemen JSX-spesifik untuk loop dan conditional.
Apakah ada hal lain yang saya lewatkan?