ReactJS cho lính mới tò te

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

Tôi đã vật lộn suốt một thời gian dài để cố gắng hiểu được React là gì và làm thế nào nó có thể tương thích được với một ứng dụng lớn. Bài viết này là tất cả những gì mà tôi đã từng ước một ai đó nói cho tôi nghe về React.

React là gì?

Sự khác biệt giữa React và các frameworkJs khác như Angular, Ember, Backbone ... là gì? Nó xử lý dữ liệu như thế nào? Nó kết nối tới server như thế nào? JSX là cái quái gì? Thế còn Component là gì?

Dừng lại!

Hãy dừng nó lại ngay bây giờ!

React đơn thuần chỉ phục vụ cho tầng View (V trong mô hình MVC)

React thường được so sánh với vai trò tương đương như các Javascript framework khác, nhưng việc so sánh giữa React và Angular thực sự không có ý nghĩa, bởi chúng sinh ra để đảm nhiệm những vai trò khác nhau. Angular là một framework hoàn chỉnh còn React thì không. Điều này lý giải tại sao thường gây ra một số hiểu lầm về React, bởi React thường được tích hợp trong một hệ sinh thái gồm các framwork hoàn chỉnh, nhưng nó chỉ phục vụ cho tầng view.

React cung cấp cho bạn một ngôn ngữ tạo template và các function nhằm render ra các mã HTML. HTML là tất cả những gì mà React có thể output ra. Các đoạn mã HTML/Javascript được gọi là các "Component" nếu có khả năng lưu trữ các trạng thái (State) của chính nó trong bộ nhớ (ví dụ như tab nào được chọn trong một loạt các tab trên giao diện), nhưng cuối cùng chúng cũng chỉ sinh ra mã HTML mà thôi.

Bạn hoàn toàn không thể xây dựng một ứng dụng đầy đủ nếu chỉ sử dụng mỗi React. Chúng ta sẽ tìm hiểu tại sao lại như vậy

Ưu điểm

3 ưu điểm quan trọng của React

Bạn sẽ luôn luôn biết được component của bạn sẽ sinh ra mã HTML như thế nào chỉ bằng việc nhìn vào một file source

Điều này có thể là ưu điểm lớn nhất, ngay cả khi Angular cũng có ưu điểm này. Hãy xem xét một ví dụ thực tế.

Giả sử bạn phải cập nhật header website của bạn với tên của user đang đăng nhập. Nếu không sử dụng bất kỳ Javascript MVC framework nào, bạn có thể sẽ làm nó như sau:

  <header>
    <div class="name"></div>

  $.post('/login', credentials, function( user ) {
      // Modify the DOM here
      $('header .name').show().text( user.name );
  });

Từ kinh nghiệm xương máu của tôi, đoạn mã này có thể làm hỏng đời bạn cũng như đồng nghiệp của bạn. Làm thế nào để debug được output? Ai đã update header? Liệu có ai khác có thể truy nhập đến header? Ai mới là người quyết định tên của user được hiển thị là đúng? Đoạn mã trên cũng kinh khủng như câu lệnh** Goto** vậy.

Với yêu cầu như trên, bạn có thể viết nó với React như sau:

  render: function() {
      return <header>
          { this.state.name ? <div>this.state.name</div> : null }
      </header>;
  }

Chúng ta có thể biết ngay được component trên sẽ render ra mã HTML như thế nào. **Nếu bạn biết trạng thái (state), bạn sẽ biết output được render. ** Bạn không phải lần theo luồng chương trình để hiểu nó đang làm gì, đặc biệt khi làm việc cùng team trong một ứng dụng phức tạp thì điều này là cực kỳ quan trọng.

Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn

Sự kết hợp này khiến bạn e ngại bởi chúng ta là những developer thường được dạy rằng không nên đặt các đoạn mã javascript trong file DOM (giống như onClick handler). Nhưng bạn sẽ vẫn phải tin tôi, làm việc với các component JSX thực sự rất tuyệt vời.

Theo truyền thống, chúng ta thường tách các file HTML và các function Javascript thành các file riêng rẽ, điều này dẫn đến các file Javascript sẽ chứa tất cả function cho một "page", do đó để hiểu được luồng làm việc của chương trình bạn sẽ phải đọc code từ JS > HTML > JS > HTML ... Mất thời gian quá phải không?

Việc chèn các đoạn mã js trực tiếp vào các file markup và sau đó đóng gói chúng lại dưới dạng có thể "portable" được nói chung sẽ làm bạn hạnh phúc và sung sướng hơn, bởi những đoạn mã js khi đó sẽ xử lý trực tiếp với file markup mà nó được tích hợp vào và bạn ko phải mất công lần mò những thứ không liên quan.

Bạn có thể render React phía server

Nếu bạn đang xây dựng một website hay một app và chọn con đường là render tất cả các file makrup phía client. Bạn thực sự đã sai lầm. Việc chỉ render phía client lý giải tại sao các website như Soundcloud rất chậm, trong khi đó Stack Overflow (chỉ render phía server)lại rất nhanh. React cho phép bạn làm được điều đó, điều mà bạn nên làm.

Angular và các framework khác khuyến khích bạn làm những điều kinh tởm như render các page với PhantomJs nhằm mục đích phục vụ cho các search engine Crawler, hay trả tiền mặt để sử dụng nó như một dịch vụ. Ugh.

Nhược điểm

Đừng quên rằng React chỉ phục vụ cho tầng view

Bạn sẽ không lấy được bất cứ thứ gì dưới đây:

An event system (other than vanilla DOM events)
Any AJAX capabilities whatsoever
Any form of a data layer
Promises
Any application framework at all
Any idea how implement the above

Nếu chỉ dùng React đứng một mình, nó vô dụng đối với các yêu cầu thực tế. Tệ hơn nữa, như chúng ta sẽ thấy điều này dẫn đến việc chúng ta sẽ phải phát minh lại bánh xe.

Tài liệu nghèo nàn
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.

Đừng nói thêm gì về Flux

Có lẽ điều phiền toái nhất khi làm việc với React là khái niệm "Flux". Nó thậm chí còn khó hiểu hơn so với chính bản thân React. Cái tên "Flux" tỏ ra nguy hiểm khiến người dùng khó hiểu.

Flux chỉ là một khái niệm, nó không phải là một thư viện. Nếu tồn tại một thư viện thì nó sẽ giống với một pattern hơn là một framework.

Khái niệm "Flux" có thể giải thích đơn giản như sau: khi view kích hoạt một sự kiện (ví dụ như sau khi người dùng nhập name vào một text field), sự kiện này sẽ cập nhật lại model, sau đó model sẽ kích hoạt một sự kiện tương ứng, sau đó view sẽ phản hồi lại sự kiện của model này bằng cách render lại trang với dữ liệu mới nhất. Đó là tất cả.

Như vậy luồng dữ liệu được chảy theo một chiều dựa vào thiết kế 2 pattern observer tách rời nhau luôn đảm bảo rằng dữ liệu chính xác sẽ được lấy từ model . Đây thực sự là một thiết kế tốt.

Điểm bất cập của Flux là mọi người đang phát minh lại nó (re-invent it). Vì nó không có sự thống nhất trong các thư viện sự kiện, tầng model,tầng AJAX hay bất kỳ thứ gì khác. Có rất nhiều cách implement Flux khác nhau, do đó chúng xung đột lẫn nhau.

Tôi có nên dùng React?

Short answer: Có

Long answer: Có cho hầu hết mọi trường hợp.

Đây là những lý do tại sao bạn nên sử dụng React:

Hiệu quả khi làm việc cùng team, áp dụng triệt để các pattern UI và workflow
Code UI dễ đọc và bảo trì
Component hóa UI là tương lai của phát triển web, và bạn cần bắt đầu nó từ ngay bây giờ.

Đây là những lý do tại sao bạn nên nghĩ kỹ trước khi chuyển sang React:

Bạn sẽ cần thời gian ban đầu để làm quen với React như tìm hiểu về: props, state và component communication, chúng không đơn giản trong khi đó tài liệu thì sơ sài
React không hỗ trợ bất cứ trình duyệt nào có version thấp hơn IE8, và sẽ không bao giờ
Nếu ứng dụng của bạn không có nhiều page động, bạn sẽ phải implement rất nhiều thứ chỉ để phục vụ cho những nhu cầu nhỏ
Bạn sẽ phải phát minh lại rất nhiều bánh xe . React là một framework mới và vì vậy việc xử lý sự kiện, giao tiếp giữa các component không theo một chuẩn nào cả. Dó đó bạn sẽ phải build lại các component từ đầu (dropdown, modal, lightboxes ...)