Giới thiệu chung về React JS

Mình sẽ bắt đầu chuỗi các bài viết về React JS với cách tiếp cận của một người chưa biết gì về React JS, chính vì thế các bạn có thể thấy có sự thay đổi cách nhìn nhận cũng như quan điểm không nhất quán xuyên suốt các bài viết của mình. Mình chọn cách trình bày này hy vọng sẽ gần gũi hơn với các bạn bắt đầu muốn tìm hiểu về React JS. Mong nhận được sự góp ý của các bạn.

Tại sao lại chọn React JS?

Lý do mình chọn React JS rất đơn giản nó được viết bởi Facebook, nó sinh ra để phục vụ các bài toán, dự án của Facebook, như thế cũng đủ để nói “Không phải dạng vừa đâu”.

Ở Septeni Technology (SepTech) rất nhiều các dự án đang sử dụng Angular JS để phát triển Web Application. Ban đầu trong đầu mình đặt ra câu hỏi là React JS và Angular JS cái nào mạnh hơn? Nhưng rồi mình nhận ra rằng cách so sánh này là không phù hợp, bởi React JS sinh ra để phục vụ tầng View như khái niệm trên website chính thức: “A JavaScript library for building user interface”  trong khi Angular JS, Ember JS  hay Backbone JS lại là các Framework hoàn chỉnh, với mô hình, phân tầng rõ ràng (sẽ khó để có sự so sánh giữa một JS library và một JS Framework). Vậy liệu React JS có thể kết hợp với các JS Framework như Angular JS, Ember hày Backbone JS? (Chúng ta sẽ cùng nhau làm rõ vấn đề này nhé.)

Đặc tính của React JS

Tiêp theo chúng ta sẽ đi tìm hiểu về đặc tính của React JS. Tư tưởng React JS là xây dựng lên các components có tính tái sử dụng, dễ dàng cho việc chia nhỏ vấn đề, testing. Nó giúp chúng ta dễ dàng quản lý, mở rộng hệ thống, điều này nếu là Angular JS thì đòi hỏi cấu trúc, cách viết code phải thật tối ưu. Cũng vì thế mình nghĩ với bài toán có quy mô nhỏ với nghiệp vụ đơn giản (CRUD) thì áp dụng React JS không hiệu quả. (?!)
Đặc tính của React JS là luôn giữ các components ở trạng thái stateless (nhiều nhất có thể) khiến ta dễ dàng quản lý bởi nó chẳng khác gì một trang static HTML. Bản thân các components này không có trạng thái (state) nó nhận đầu vào từ bên ngoài (ví dụ là component trên cùng hay chung ta gọi là mama component ^^) và chỉ hiện thị ra dựa vào các đầu vào đó, điêu này lý giải tại sao nó lại mang tính tái sử dụng (reuse) và dễ dàng cho việc test.

Virtual DOM

Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý (?!). React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.
Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật(quá tuyệt!).

Tổng kết
OKAY, Có lẽ là đủ cho một người muốn tìm hiểu về React JS. Là thư viện Javascript được xây dựng bởi các kỹ sư của Facebook, đang được rất nhiều công ty nổi tiếng sử dụng để phát triển các sản phẩm của họ như Yahoo, Airbnb và tất nhiên là trong nội tại Facebook, Instagram. Nó phù hợp với các dự án lớn có tính mở rộng hơn là các dự án nhỏ.

Happy New Year 2016! Chúc các bạn một năm mới với nhiều sự đổi thay! Chúng ta sẽ cùng nhau nắm bắt, làm chủ React JS!

Tham khảo
https://facebook.github.io/react/docs/why-react.html