Nên hay không nên dùng ReactJS?

Dạo gần đây, trong việc xây dựng Front End cho ứng dụng web, cộng đồng thường đem so sánh giữa Angular, ReactJS và VueJS. Tuy nhiên, trong bài viết này, mình chỉ tập trung làm rõ những điểm mạnh và yếu của ReactJS còn việc so sánh thì có thể trong một bài viết khác.

ReactJS là gì ?

ReactJS là một thư viện Javascript được Faceboook tạo ra để phát triển front end cho ứng dụng web.

Đề cập đến mô hình MVC, thì ReactJS được xây dựng dưới dạng một thư viện cho View mà không phải là một framework như AngularJS (đầy đủ đồ nghề cho phát triển View-Model-Controller) . Do đó, nhiều người nói rằng so sánh giữa ReactJS và AngularJS là một so sánh khặp khiễng. Nhưng người ta vẫn thích đem ra so sánh đấy thôi. Bởi vậy, mọi sự so sánh đều mang tính tương đối.?

Quay lại vấn đề, mục đích thiết kể của ReactJS chỉ hỗ trợ phát triển View nên dẫn đến sự ra đời của Relay, GraphQL. Bộ 3 React - GraphQL- Relay ra đời tạo nên mô hình RGR được "quảng cáo" là sẽ thay thế mô hình MVC và RESTful trong tương lai.

ReactJS có những cái gì hay?

Component:

Các component trong ReactJS cho phép bạn tách UI thành các thành phần độc lập với nhau.

Sử dụng component mang lại nhiều lợi ích.

Đầu tiên đó là khả năng reusable (tái sử dụng). Ta có thể hoàn toàn sử dụng lại các component nếu cần. Ví dụ, giả sử bạn cần làm một ứng dụng hiện thị news feed giống như facebook, thay vì phải viết đi viết lại đoạn code để hiện thị một newsfeed, bạn có thể tạo ra 1 component NewsFeed.

Thứ hai, component mang tính encapsulation (đóng gói). Mỗi component đều độc lập với nhau và giao tiếp thông qua các thông số đầu vào được định nghĩa trước (property). Do đó, khi debug, ta dễ dàng dự đoán được sai ở phần nào để fux bug. Giả dụ, một ngày đẹp trời, designer bảo phải chuyển avatar từ hình vuông sang hình tròn của mỗi news feed. Thay gì phải mò mẫm xem đoạn code hiện thị avatar ở đâu trong hàng tỉ dòng code, bạn dễ dàng phát hiện rằng: Avatar của news feed thì vào component News Feed mà sửa lại.

Ngoài ra, việc sử component sẽ giúp code ngắn gọn và dễ đọc hơn. Component là một khái niệm không mới, trong AngularJS ta có directive tương tự như component của ReactJS. Tuy nhiên, trong AngularJS, bạn có thể viết directive hoặc không, nhưng ReactJS là bắt buộc phải viết component. Mindset của ReactJS là "khổ trước sướng sau" ?

So với Angular (phiên bản nâng cấp của AngularJS) thì việc khai báo component của ReactJS là cực kì đơn giản. Đối với Angular chúng ta cần phải khai báo module, component và nhiều thứ lằng nhằng như providers, selector,... ?

Viết HTML với Javascript:

Đối với AngularJS, mỗi module nhỏ sẽ có thể bao gồm file HTML, CSS và Javascript. Còn đối với ReactJS, mọi thứ đều là Javascript. Điều này có nghĩa là bạn dùng javascript để sinh ra HTML. Để tạo web động, ta cần xử lí dữ liệu gì đó để sinh ra HTML tương ứng. Ví dụ: để thay đổi số dòng hiểu thị từ 10 sang 20 của một bảng dữ liệu, ta phải xử lí một số bước gì đó với dữ liệu (gọi API, lấy thêm thông tin), sau đó sinh ra 20 dòng dữ liệu tương ứng:

Việc sinh HTML động là điều kiện bắt buộc của một trong web động và nó chả có gì mới cả, từ rất lâu rồi người ta dùng JSP, PHP ở phía server để làm chuyện này. AngularJS thì two way binding để mapping dữ liệu từ View (html files) sang Model (javascript files) và ngược lại. ReactJS sử dụng một thứ gọi là JSX. JSX có cấu trúc giống HTML được sử dụng bởi React để tạo ra các đoạn text HTML tồn tại trong JavaScript code.

Việc viết HTML trong Javascript thì có người thích, cũng có người không thích nó. Không bàn đến vấn đề kĩ thuật, câu hỏi được đặt ra tại sao ta có HTML, Javascript riêng nhưng bây giờ phải viết chung mọi thứ vào Javascript hết vậy? Trong Angular thì chúng ta có thể tách biệt HTML và Javascript nhưng đối với ReactJS thì không thể. ? Một người mới bắt chuyển đổi sang viết HTML trong Javascript sẽ có thể gặp không ít khó khăn.

Hiệu suất render với DOM ảo:

DOM là gì?

DOM là viết tắt của Document Object Model, tạm dịch là Mô hình Đối tượng Tài liệu. Cấu trúc của một file HTML sẽ có phân cấp cha - con lồng vào nhau. Mỗi thẻ HTML sẽ có thuộc tính như màu sắc, kích thước, ... và khi thuộc tính thay đổi, ta cần render lại HTML để hiện thị thay đổi đó cho người dùng thấy.

Việc viết HTML trong Javascript của React hình thành nên một cấu trúc là DOM ảo (Virtual DOM). Điều này tạo nên hiệu suất trong việc render lại giao diện. Đầu tiên, React render lại các view trên bộ nhớ, sau đó tính toán chính xác cái gì đã thay đổi và chỉ cập nhật cho những gì đã thay đổi vào DOM của trình duyệt. Do đó, React không cần phải cập nhật lại toàn bộ DOM khi có thay đổi.

Kết:

Nhìn chung, ReactJS thích hợp cho những dự án web phát triển lâu dài: tuy khó viết nhưng dễ mở rộng về sau. Nếu bạn muốn xây dựng một sản phẩm đòi hỏi phải cập nhật, bổ sung tính năng suốt đời thì ReactJS là một sự lựa chọn tốt.

Categories: