React.js cung cấp JSX như một cú pháp giống XHTML để xây dựng một cây các thành phần và thành phần. JSX biên dịch thành Javascript và thay vì cung cấp các vòng lặp hoặc các điều kiện trong JSX thích hợp, bạn sử dụng Javascript trực tiếp:
<ul>
{list.map((item) =>
<li>{item}</li>
)}
</ul>
Điều mà tôi chưa thể giải thích được là tại sao điều này được coi là tốt nếu các cấu trúc tương tự được coi là xấu trong JSP?
Một cái gì đó như thế này trong JSP
<ul>
<% for (item in list) { %>
<li>${item}</li>
<% } %>
</ul>
được coi là một vấn đề dễ đọc được giải quyết với các thẻ như <c:forEach>. Lý do đằng sau các thẻ JSTL cũng có vẻ như chúng có thể áp dụng cho JSX:
- nó dễ đọc hơn một chút khi bạn không chuyển đổi giữa cú pháp giống XHTML (dấu ngoặc góc, lồng nhau) và Java / Javascript (curlies, dấu phẩy, parens)
- khi bạn có sẵn ngôn ngữ và nền tảng đầy đủ để sử dụng bên trong chức năng kết xuất, sẽ ít khiến bạn nản lòng khi đưa logic vào đó không thuộc về nơi đó.
Những lý do duy nhất tôi có thể nghĩ về lý do tại sao JSX khác biệt là:
trong Java, bạn đã có động cơ để làm điều sai trái - JSP sẽ được tải lại nóng, do đó, việc đưa mã vào các tệp JSP để tránh chu kỳ xây dựng lại / khởi động lại là rất hấp dẫn. Bảo trì đã được hy sinh cho năng suất ngay lập tức. Xua đuổi các tập lệnh và giới hạn trong một tập hợp các cấu trúc mẫu cố định thực sự là một cách để thực thi khả năng bảo trì. Không có sự biến dạng như vậy tồn tại trong thế giới JS.
Cú pháp của Java và Java rất khó hiểu khi có thêm
<% ... %>phân biệt mã Java với việc tạo phần tử và với cú pháp gốc của Java thiếu mộtforeachkhái niệm hoặc các hàm hạng nhất (cho đến gần đây). Hình phạt cú pháp của việc sử dụng Javascript gốc cho các vòng lặp và các điều kiện trong JSX là khác không (theo ý kiến của tôi) nhưng không tệ như JSP và được cho là không đủ tệ để đảm bảo giới thiệu các phần tử đặc thù của JSX cho các vòng lặp và điều kiện.
Có cái gì khác tôi đang thiếu?