Tại sao chúng tôi xây dựng React?

Có rất nhiều thư viện JavaScript MVC. Tại sao chúng tôi xây dựng React và tại sao bạn muốn sử dụng nó?

React không phải là một MVC framework.

React là một thư viện để xây dựng giao diện người dùng. Nó khuyến khích việc tạo ra các thành phần giao diện người dùng có thể tái sử dụng, hiển thị dữ liệu thay đổi theo thời gian.

React doesn’t use templates.

Theo truyền thống, giao diện người dùng ứng dụng web được xây dựng bằng cách sử dụng các templates hoặc HTML. Các templates này quy định tập hợp đầy đủ các phần tóm tắt mà bạn được phép sử dụng để xây dựng giao diện người dùng của mình.

React tiếp cận việc xây dựng các giao diện người dùng theo cách chia nhỏ chúng thành các components. Điều này có nghĩa là React sử dụng một ngôn ngữ lập trình, đầy đủ tính năng để hiển thị các chế độ xem, mà chúng tôi coi là một lợi thế hơn so với các templates vì một số lý do:

• JavaScript là một ngôn ngữ lập trình linh hoạt, mạnh mẽ với khả năng xây dựng sự trừu tượng. Điều này cực kỳ quan trọng trong các ứng dụng lớn.
• Bằng cách thống nhất đánh dấu của bạn với logic chế độ xem tương ứng của nó, React thực sự có thể tạo các chế độ xem dễ dàng mở rộng và bảo trì hơn.
• Bằng cách đưa hiểu biết về markup và content vào JavaScript, không có quá trình nối chuỗi thủ công và do đó ít diện tích bề mặt hơn cho các lỗ hổng XSS.

Chúng tôi cũng đã tạo JSX, một phần mở rộng cú pháp tùy chọn, trong trường hợp bạn thích khả năng đọc của HTML hơn JavaScript thô.

Cập nhật phản ứng rất đơn giản

React thực sự nổi bật khi dữ liệu của bạn thay đổi theo thời gian.

Trong một ứng dụng JavaScript truyền thống, bạn cần xem dữ liệu nào đã thay đổi và thực hiện các thay đổi theo thứ bậc đối với DOM để luôn cập nhật. Ngay cả AngularJS, cung cấp giao diện khai báo thông qua các chỉ thị và liên kết dữ liệu yêu cầu một chức năng liên kết để cập nhật các nút DOM theo cách thủ công..

React có một cách tiếp cận khác.

Khi component của bạn được khởi tạo lần đầu tiên, phương thức render được gọi, nó tạo ra 1 phiên bản UI rất nhỏ. Từ phiên bản này, nó sẽ tạo thành 1 chuỗi html(markup) và cập nhật(replace?) document hiện tại. Mỗi khi dữ liệu(prop, …) của app thay đổi, phương thức render lại được gọi lại. Để quá trình re-render và update lại dom hiệu quả nhất, chúng tôi check sự thay đổi giữa lần thay đổi trước và sau render, và chỉ lấy ra đoạn code đã thay đổi và cập nhật lại DOM (không cập nhật lại toàn bộ)

Dữ liệu sinh ra sau quá trình render không hẳn là 1 chuỗi hay là 1 DOM node cụ thể, nó là 1 dạng tập hợp các mô tả về DOM.

Chúng tôi gọi quá trình này là reconciliation. Tham khảo this jsFiddle này để xem ví dụ về reconciliation trong thực tế.

Vì quá trình kết xuất này quá nhanh (khoảng 1ms đối với TodoMVC), nhà phát triển không cần chỉ định rõ ràng các ràng buộc dữ liệu. Chúng tôi nhận thấy cách tiếp cận này giúp tạo ứng dụng dễ dàng hơn.

HTML chỉ là sự khởi đầu

Bởi vì React có bản trình bày tài liệu gọn nhẹ của riêng nó, chúng ta có thể thực hiện một số điều khá thú vị với nó:

• Facebook có các biểu đồ động hiển thị dưới dạng <canvas> thay vì HTML.
• Instagram là một ứng dụng web “một trang” được xây dựng hoàn toàn bằng React và Backbone.Router. Các nhà thiết kế thường xuyên đóng góp mã React với JSX.
• Chúng tôi đã xây dựng internal prototypes để chạy các ứng dụng React trong web worker và sử dụng React để thúc đẩy native iOS views qua một Objective-C
• Bạn có thể chạy React trên máy chủ để SEO, hiệu suất, chia sẻ mã và tính linh hoạt tổng thể.
• Các sự kiện hoạt động theo cách nhất quán, tuân thủ tiêu chuẩn trong tất cả các trình duyệt (bao gồm cả IE8) và tự động sử dụng event delegation.

Truy cập https://reactjs.org để kiểm tra những gì chúng tôi đã xây dựng. Tài liệu của chúng tôi hướng tới việc xây dựng ứng dụng với framework, nhưng nếu bạn quan tâm đến những chi tiết cần thiết liên hệ với chúng tôi!

Cảm ơn vì đã đọc!