ReactJS - Ưu điểm và nhược điểm

Bài đăng này đã không được cập nhật trong 7 năm

Mở đầu.

React mở ra cho chúng ta những khả năng mới như: render dữ liệu ở tầng server, cập nhật dữ liệu thời gian thực, hiển thị dữ liệu đa nền tảng… Vậy React là gì.?

Khái niệm về React

React (còn được gọi là Reactjs hay React.js) là một Thư viện javascript được tạo ra bởi sự cộng tác giữa Facebook và Instagram. Nó cho phép những nhà phát triển web tạo ra giao diện người dung nhanh chóng. Phần Views của Reactjs thường được hiển thị bằng việc chủ yếu dung các component mà chứa các component cụ thể hoặc các thẻ HTML. Một trong những đặc trưng duy nhất của Reactjs là việc render dữ liệu không những có thể thực hiện ở tầng server mà còn ở tầng client.

Nó cũng sử dụng khái niệm là Virtual DOM (DOM ảo). Virtual DOM tạo ra bản cache cấu trúc dữ liệu của ứng dụng trên bộ nhớ. Sau đó, ở mỗi vòng lặp, nó liệt kê những thay đổi và sau đó là cập nhật lại sự thay đổi trên DOM của trình duyệt một cách hiệu quả. Điều này cho phép ta viết các đoạn code như thể toàn bộ trang được render lại dù thực tế là Reactjs chỉ render những component hay subcomponent nào thực sự thay đổi.

Mỗi framework hay thư viện luôn có những ưu và nhược điểm riêng. Sau đây tôi xin trình bày về ưu điểm và nhược điểm của nó.

Ưu điểm

Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các component thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất nhiều. Reactjs cũng tính toán những thay đổi nào cần cập nhật len DOM và chỉ thực hiện chúng. Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi phí. Chúng ta có thể viết một ví dụ đơn giản về ReactJS như sau.

<title>Hello React</title>
    <script src="https://fb.me/react-0.13.2.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>     <div id="content"></div>
    <script type="text/jsx">
      var Hoge = React.createClass({
        getInitialState(){
          return{
            style:{
              color: "#ccc",
              width: 200,
              height: 100
            }
          };
        },
        onChange(){
          var style = _.clone(this.state.style);
          style.color = "#ddd";
          this.setState({ style: style});
        },
        render(){
          return(
            <div style={this.state.style} onClick={this.onChange}>xxx</div>
          );
        }
      }
      React.render(
        <Hoge />,
        document.getElementById('content')
      );
    </script>

Ở ví dụ trên, chúng ta đã định nghĩa một component Hoge, bằng method React.createClass(...), sau đó render ra View:

React.render(, document.getElementById('content'));

Khi đó ta có thể viết các methods, các funtions tác động lên component Hoge (thay đổi Model data), View sẽ lập tức được cập nhật cho dù ta không phải động chạm trực tiếp gì vào phần tử DOM trên View.

Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript. Ta có thể them vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi. Đây là đặc tính thú vị của Reactjs. Nó sẽ chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX.
Nó có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng dụng mở rộng của Chrome dành cho Reactjs. Nó giúp bạn debug code dễ dàng hơn. Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOM thông thường.
Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu SEO và thời gian tải trang. Nếu tất cả việc xây dựng và hiển thị trang đều thực hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo và hiển thị lên. Điều này thực tế là chậm. Hoặc nếu giả sử người dung vô hiệu hóa Javascript thì sao? Reactjs là một thư viện component, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về. Bạn có thể tham khảo cách render side servering tại đây. http://crypt.codemancers.com/posts/2016-09-16-react-server-side-rendering/
Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì virtual DOM được cài đặt hoàn toàn bằng JS.
Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi.

Nhược điểm

Nhược điểm chính của reactjs đó là:

Reactjs chỉ phục vụ cho tầng View. React chỉ là View Library nó không phải là một MVC framework như những framework khác. Đây chỉ là thư viện của Facebook giúp render ra phần view. Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ không có 2-way binding hay là Ajax
Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại.
React khá nặng nếu so với các framework khác React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb của Angular). Trong khi đó Angular là một framework hoàn chỉnh
Khó tiếp cận cho người mới học Web

Kết luận

Trên đây mình đã điểm qua một chút về khái nhiệm cũng như nêu lên các ưu và nhược điểm của React. Hy vọng các bạn có thể tìm thấy những điều bổ ích trong đó. Thời gian mình tìm hiểu về ReactJS là chưa nhiều, nên chắc chắn còn nhiều thiếu sót, mình rất mong nhận được sự góp ý của các bạn.