Tổng quan và so sánh ReactJS với VueJS

Giới thiệu tổng quan về React

1. React là gì?

Chúng ta có thể hiểu đơn giản, React là một thư viện Javascript (không phải framework) được phát triển bởi Facebook (2013) giúp hỗ trợ xây dựng giao diện người dùng cho cả web và mobile một cách linh hoạt, đơn giản, nhanh chóng và hiệu quả. Nó cho phép xây dựng các giao diện phức tạp bằng việc kết hợp các "component" nhỏ, độc lập và có khả năng tái sử dụng lại với nhau.

React hiện là một trong những thư viện JavaScript phổ biến nhất, có nền tảng vững chắc cùng với cộng đồng phát triển mạnh mẽ.

2. React có gì hay so với các framework khác?

• React sử dụng toàn bộ đều là Component chứ không phải template:

  • Về mặt khái niệm, các component giống như các hàm của JavaScript, có input data tùy ý (được gọi là “props” - properties) và trả về các React elements HTML mô tả những gì sẽ hiển thị trên view thông qua hàm render().
  • Một component là một thành phần độc lập tạo thành UI, có thuộc tính, trạng thái riêng biệt. Với các trạng thái/thuộc tính khác nhau, trong một component có thể chứa các component khác.
  • Và mỗi khi dữ liệu được thay đổi, React sẽ tự động cập nhật và re-render lại Component.
  • React khuyến khích việc tạo ra các component có thể tái sử dụng, những thành phần này dùng để hiển thị dữ liệu thay đổi theo thời gian.
  • Có hai cách để định nghĩa một component trong React: như một function hoặc một Class.
    • Stateful component: chỉ là một function và không trực tiếp quản lý các state bên trong.
    • Stateless component: có state là một Class và thực hiện quản lý các state trong các thuộc tính riêng của nó.
  • Sử dụng component giúp dễ dàng maintain khi quy mô dự án phát triển hơn.

• React chỉ thay đổi những gì thực sự cần thay đổi. Nó so sánh sự thay đổi giữa lần render này với lần render trước và tìm ra những thay đổi đã được thực hiện và chỉ cập nhật những gì thực sự thay đổi.

• React loại bỏ DOM, cung cấp một mô hình đơn giản với hiệu suất tốt hơn.

  • Thay vì thao tác trực tiếp với DOM của trình duyệt, React tạo một Virtual DOM trong memory, nơi thực hiện tất cả các thao tác cần thiết trước khi thực hiện các thay đổi trong DOM của trình duyệt.
  • 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 (Document Object Model). Khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và real tree giúp tối ưu hoá việc re-render real DOM. Nói đơn giản, Virtual DOM "nhanh" hơn DOM thông thường.

• React có thể render trên client và render trên cả server bằng Nodejs, có thể xây dựng native apps bằng cách sử dụng thư viện React Native.

• React triển khai luồng dữ liệu một chiều, được truyền từ cha đến con thông qua props, điều này giúp chúng ta dễ dàng suy luận và kiểm soát luồng logic hơn so với kiểu ràng buộc dữ liệu truyền thống.

  • Props (read-only): là đầu vào của các component, có giá trị không thay đổi, giúp các component tương tác với nhau.
  • State: là nơi bắt đầu của dữ liệu và thể hiện trạng thái của ứng dụng, khi state thay đổi thì component đồng thời cũng render lại để cập nhật view.
  • State nên càng đơn giản càng tốt và nên giảm thiểu số lượng các stateful components.

• React sử dụng JSX để tạo template thay vì JavaScript thông thường.

  • JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript, tương tác với đối tượng JavaScript.
  • JSX nhanh hơn do thực hiện tối ưu hóa trong khi biên dịch mã sang JavaScript, các lỗi được phát hiện ngay trong quá trình biên dịch.
  • An toàn và dễ sử dụng hơn do cú pháp khá giống với HTML thông thường.
  • JSX có khá nhiều ưu điểm, nhưng không nhất thiết phải sử dụng trong React.

• Cuối cùng, React khá "thân thiện" với SEO vì React có thể tăng tốc ứng dụng, thời gian tải trang. Các ứng dụng React cũng dễ dàng bảo trì và sửa lỗi.

3. Khi nào nên sử dụng React?

• React thường được sử dụng để giải quyết bài toán cho các ứng dụng quy mô lớn mà dữ liệu của chúng thường thay đổi liên tục theo thời gian hay các ứng dụng có giao diện phức tạp.
• React cũng thường được dùng làm phần "V" trong mô hình MVC, tuy nhiên tích hợp React với các framework MVC truyền thống khác yêu cầu cần phải cấu hình lại khá phức tạp.

4. Nhược điểm

Bên cạnh nhiều ưu điểm so với các framework khác thì React cũng tồn tại những hạn chế nhất định:

• Do chỉ dùng để xây dựng view UI, và chỉ là một library (kích thước ~116KB) nên chúng ta vẫn cần kết hợp React với các công nghệ khác để xây dựng một ứng dụng hoàn chỉnh.
• React chỉ triển khai luồng dữ liệu một chiều, không có Ajax hay ràng buộc dữ liệu hai chiều.
• Học cơ bản mới bắt đầu với React khá dễ dàng, tuy nhiên khi học nâng cao hơn (Redux, Hook, ...) sẽ khó khăn hơn. Ngoài ra, một số nhà phát triển sẽ khá lúng túng khi mới bắt đầu làm quen với JSX hay inline template trong React.
• Do cộng đồng phát triển khá mạnh mẽ nên nguồn tài liệu học tập khá nhiều, hỗn tạp nên dễ gây hoang mang cho người mới bắt đầu.
• Nhiều thư viện "mỳ ăn liền" :v

React vs Vue

1. Tổng quan và độ phổ biến

2. Đặc điểm khác

3. Cộng đồng

4. Cơ hội nghề nghiệp

5. Tổng kết

Tham khảo

React vs Vue