React là gì?

Bạn có nhớ được giao diện người dùng hay ứng dụng nhắn tin trên Facebook cách đây vài năm không? Vào lúc đó, nếu muốn cập nhật hoặc nhắn tin liên tục, bạn sẽ phải refresh hoặc tải lại toàn bộ trang. Nhưng mọi thứ giờ đây đã thay đổi hoàn toàn. Ngày nay, mỗi khi có một bản cập nhật hoặc tin nhắn mới, bạn sẽ nhận được thông báo dạng pop up. Nhấp vào và sau đó trang sẽ tự động được refresh và hiển thị cho bạn các bản cập nhật mới nhất. Vậy thì, chính xác điều này xảy ra như thế nào? Điều thú vị của ReactJS chính là nằm ở đây, chúng ta sẽ cùng thảo luận về React là gì và tại sao bạn nên dùng nó.
JavaScript Frameworks

Javascript là ngôn ngữ lập trình động/dynamic programming language được sử dụng rộng rãi trong phát triển các ứng dụng web. Nó rất nhẹ và được hầu hết các trình duyệt hiện đại hỗ trợ. Thêm vào đó, JavaScript hỗ trợ cả lập trình hướng đối tượng/object-oriented programming và lập trình thủ tục/procedural programming. Vậy nên Javascript được sử dụng để tạo các trang với client-side script hỗ trợ tương tác với người dùng, đồng thời giúp trang trở nên năng động và mạnh mẽ hơn.

JavaScript có nhiều framework, cho phép người dùng có thể chọn tùy theo nhu cầu của riêng họ. Dưới đây là một số JavaScript framework phổ biến.

Ảnh: Edureka

Các ưu điểm nổi bật của JavaScript Frameworks:

Tính hiệu quả/Efficiency: Với các mẫu và chức năng tích hợp sẵn, việc phát triển các ứng dụng trở nên dễ dàng hơn. Các dự án nếu trước đây phải mất vài tháng để phát triển, thì giờ có thể được thực hiện trong thời gian rất ngắn. Điều này giúp tăng hiệu quả trong khi giảm thời gian và nỗ lực liên quan.

Tính bảo mật/Security: Vì JavaScript là một cộng đồng nguồn mở, các frameworks hàng đầu thường có các lớp bảo mật mạnh mẽ. Các frameworks được các cộng đồng đông người dùng hỗ trợ, các thành viên trong đó cũng có thể đóng vai trò là các tester. Do đó, sẽ có nhiều cơ hội để phát hiện nếu có bất kỳ sơ hở hoặc lỗi nào xảy ra trong frameworks. Do đó cung cấp bảo mật tốt hơn với chi phí ít hơn.

Giảm thiểu chi phí: Các JavaScript frameworks thường miễn phí cho người dùng vì chúng là nguồn mở. Vì vậy, khi phát triển một ứng dụng web sử dụng các framework này, chi phí chung của ứng dụng sẽ ít hơn nhiều.

Với tất cả những lợi thế này, người ta sử dụng JavaScript rất nhiều khi phát triển các ứng dụng web. Frameworks đã chứng minh được tiềm năng của nó trong vài năm qua. Trong đó, những ngôn ngữ phổ biến nhất phải kể đến React và Angular. Mặc dù React còn khá mới nhưng nó vẫn đang cạnh tranh ngang bằng với Angular. Dưới đây là kết quả google trend cho React và Angular trong 7 năm qua.

 

Vậy nên tìm hiểu kỹ càng về ReactJS sẽ rất có lợi cho công việc lập trình của bạn. Nhưng trước khi hiểu React là gì, chúng ta cần hiểu tại sao lại cần nó ngay từ đầu.

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

Có rất nhiều JavaScript frameworks hiện sẵn có trên thị trường nhưng React vẫn tham gia cuộc chơi. Tại sao ReactJS lại cần thiết như vậy?

Các frameworks trước đây đang sử dụng luồng dữ liệu truyền thống như mô phỏng trong sơ đồ bên dưới.

 

Ở đây, dữ liệu được nhận từ nhiều nguồn khác nhau như dữ liệu ban đầu, dữ liệu thời gian thực và dữ liệu người dùng đầu vào được chuyển đến dispatcher. Bộ điều phối sau đó chuyển dữ liệu này đến store (nơi lưu trữ dữ liệu), từ đó sẽ đến view là bước cuối cùng. Bây giờ, chế độ view là phần mà bạn hoặc người dùng tương tác với ứng dụng. Vì vậy, trang web mà bạn nhìn thấy trên trình duyệt chính là kết quả của quá trình này.

Nhưng theo bạn, điều gì sẽ xảy ra ở phần backend của các frameworks sử dụng luồng dữ liệu truyền thống này?

Mỗi khi dữ liệu mới được thêm vào hoặc bất kỳ dữ liệu nào được cập nhật ở backend, trình duyệt sẽ tải lại trang web và lặp lại toàn bộ quá trình. Chỉ sau đó, chúng ta mới có thể thấy dữ liệu cập nhật trên trình view. Những luồng dữ liệu truyền thống này có một nhược điểm lớn là sử dụng DOM (Document Object Model). DOM là một đối tượng được trình duyệt tạo ra mỗi khi trang web được tải, có thể tự động thêm hoặc xóa dữ liệu ở back end. Nhưng mỗi lần thực hiện bất kỳ sửa đổi nào, một DOM mới sẽ được tạo cho cùng một trang. Việc tạo lặp lại DOM này dẫn đến lãng phí bộ nhớ không cần thiết và giảm hiệu suất ứng dụng.   

Thêm nữa, việc xử lý DOM rất tốn kém. Bởi vậy mới dẫn đến một cuộc tìm kiếm công nghệ mới để giúp chúng ta thoát khỏi rắc rối này. Đây là lúc ReactJS thực hiện sứ mệnh của mình. Với ReactJS, bạn có thể chia toàn bộ ứng dụng của mình thành các các component độc lập/riêng biêt. Các ứng dụng ReactJS vẫn sử dụng cùng một luồng dữ liệu truyền thống, nhưng có thay đổi một chút ở back end. Dưới đây biểu đồ cho thấy chính xác những gì đang xảy ra ở back end.

 

Giờ đây, mỗi khi có bất kỳ dữ liệu nào được thêm hoặc cập nhật từ backend, ReactJS sẽ sử dụng một chiến thuật mới để xử lý. Thay vì tải lại toàn bộ trang, những gì React làm chỉ là hủy bỏ trình view cũ. Sau đó, render các thành phần của trình view cùng với các phần dữ liệu mới hoặc dữ liệu đã cập nhật và sau đó thay thế view mới cho view cũ. Hiểu 1 cách đơn giản quá trình là: Các component cũ sẽ bị loại bỏ, thay vào đó sẽ  render lại các component mới với một trạng thái (giá trị vừa update ) mới. Và bây giờ là lúc hiểu chi tiết React là gì.

React là gì?

React là một thư viện dạng component-based được sử dụng để phát triển UI Tương thích (hay Giao diện người dùng tương tác). Nó hiện là một trong những thư viện front-end JavaScript phổ biến nhất có nền tảng vững vàng và cộng đồng hỗ trợ đông đảo.

LƯU Ý: ReactJS chỉ là một thư viện frontend chứ không phải toàn bộ framework, yếu tố xử lý mục View trong MVC (Model - View - Controller).

 

Trong ReactJS, mỗi yếu tố đều là 1 thành phần. Hãy xem xét một ngôi nhà lego như một ứng dụng tổng thể. Sau đó ta có thể hình dung từng khối lego tương đương với một component và lắp ghép với nhau thành 1 khối hoàn chỉnh. Các khối / thành phần này được tích hợp với nhau để xây dựng một ứng dụng động lớn hơn.

Ưu điểm lớn nhất của việc sử dụng các thành phần là bạn có thể thay đổi bất kỳ thành phần nào tại bất kỳ thời điểm nào mà không ảnh hưởng đến phần còn lại của ứng dụng. Tính năng này hiệu quả nhất khi được triển khai với các ứng dụng realtime và lớn hơn, nơi dữ liệu thường xuyên thay đổi. Mỗi khi bất kỳ dữ liệu nào được thêm hoặc cập nhật, ReactJS sẽ tự động cập nhật thành phần cụ thể có trạng thái thực sự thay đổi. Điều này giúp trình duyệt không phải tải lại toàn bộ ứng dụng để hiện các thay đổi.

ReactJS được phát triển bởi Jordan Walke - một kỹ sư phần mềm làm việc tại Facebook. Facebook đã triển khai ReactJS trong phần newsfeed vào năm 2011, tuy nhiên đã được phát hành rộng rãi vào tháng 5 năm 2013. Sau khi triển khai ReactJS, UI của Facebook có thể nói là được cải tổ mạnh mẽ. Nhờ vậy, Facebook ngày càng có thêm nhiều những người dùng hài lòng, góp phần cho sự tăng trưởng bùng nổ của ứng dụng như chúng ta thấy ngày hôm nay.

Tính năng của React

Bây giờ chúng ta đã hiểu React là gì và tại sao nó được sử dụng, cùng khám phá thêm một vài tính năng nổi trội của ngôn ngữ này.

1. JSX: JSX là viết tắt của JavaScript XML. Đây là một dạng cú pháp dạng XML/HTML được React sử dụng. Nó mở rộng ECMAScript để text dạng XML/HTML có thể cùng tồn tại cùng với JavaScript react code. Cú pháp này được sử dụng bởi các bộ TIỀN xử lý Babel để chuyển đổi text dạng HTML có trong các file JavaScript thành các đối tượng JavaScript tiêu chuẩn. Với JSX, chúng ta có thể tiến thêm 1 bước nữa với việc nhúng mã HTML vào bên trong JavaScript. Điều này giúp HTML code dễ hiểu và tăng hiệu suất JavaScript đồng thời làm cho ứng dụng thêm mạnh mẽ.

 

Dưới đây là cách viết chương trình Hello World sử dụng JSX.

script.jsx

var MyComponent = React.createClass({

    render :function () {

                return(   

Hello World

        );

    }

});

ReactDOM.render(

   , document.getElementById('content')

);

2.Virtual DOM: Giống như một DOM thực thụ, DOM ảo cũng là một node dạng cây liệt kê các thành phần, thuộc tính và nội dung của chúng dưới dạng Object và đặc tính. Chức năng render của React tạo ra một node tree ngoài các thành phần React. Sau đó, nó cập nhật mô hình cây này để phản hồi lại các thay đổi trong mô hình dữ liệu gây ra bởi các hành động khác nhau do dùng hoặc hệ thống thực hiện.

DOM ảo này hoạt động trong ba bước đơn giản.

Bất cứ khi nào có thay đổi dữ liệu gốc, toàn bộ UI sẽ được render lại trong biểu diễn DOM ảo.

 

Sau đó, sự khác biệt giữa biểu diễn DOM trước đó và biểu diễn mới được tính toán.

 

Sau khi tính toán xong, DOM thực sẽ được cập nhật chỉ với những phần đã thực sự thay đổi. Bạn có thể nghĩ về nó như một bản vá. Vì các bản vá chỉ được áp dụng cho khu vực bị ảnh hưởng, tương tự, DOM ảo hoạt động như các bản vá và được áp dụng cho các phần tử được cập nhật hoặc thay đổi, trong DOM thực.

Điều này giúp cho ứng dụng trở nên nhanh hơn và không còn hiện tượng lãng phí bộ nhớ.

3. Tính năng kiểm tra: Các trình view của React có thể được sử dụng như các chức năng của state (state là một đối tượng xác định cách thức một thành phần sẽ hiển thị và hoạt động). Do đó, chúng ta có thể dễ dàng thao tác với state của các thành phần chúng ta chuyển sang trình view ReactJS, và sau đó xem xét output, các hành động, sự kiện, chức năng, v.v. Điều này giúp các ứng dụng React khá dễ dàng để kiểm tra và gỡ lỗi.

4. Server-Side Rendering(SSR): Server-Side rendering cho phép bạn render trước trạng thái ban đầu của các thành phần react ở phía máy chủ. Với SSR, phản hồi của máy chủ đối với trình duyệt chỉ chuyển thành HTML trang và ngay lập tức sẵn sàng để hiển thị. Do đó, trình duyệt bây giờ có thể bắt đầu render mà không phải chờ tất cả JavaScript được tải và chạy. Do đó, trang web tải nhanh hơn. Tại đây, người dùng sẽ có thể xem trang web mặc dù React vẫn đang tải xuống JavaScript, tạo DOM ảo, liên kết các sự kiện, v.v. ở back end.

 

5. Liên kết dữ liệu một chiều: Không giống như các frameworks khác, ReactJS tuân theo luồng dữ liệu một chiều hoặc liên kết dữ liệu một chiều. Ưu điểm chính của liên kết dữ liệu một chiều là: trong toàn bộ ứng dụng dữ liệu đi theo một hướng duy nhất, cho phép bạn kiểm soát tốt hơn. Do đó, trạng thái ứng dụng được lưu trong các kho cụ thể và kết quả là các thành phần còn lại chỉ được ghép rời rạc. Nhờ vậy ứng dụng trở nên linh hoạt hơn kéo theo hiệu quả tăng.

6. Tính đơn giản: Sử dụng các tệp JSX làm cho ứng dụng thực sự đơn giản và đường cong học tập trở nên dễ hơn. Mặc dù chúng ta có thể sử dụng JavaScript thuần, nhưng JSX sẽ dễ dàng hơn. Phương pháp dạng thành phần của React cùng với các phương pháp vòng đời riêng biệt cũng giúp cho việc học ngôn ngữ trở nên đơn giản hơn.

7. Đường cong học tập: Đường cong học tập của React khá thấp so với các framework khác. Bất cứ ai có kiến thức cơ bản về lập trình đều có thể dễ dàng học React. Vì vậy, nếu bạn có kiến thức về HTML và JavaScript trước đây, bạn có thể bắt tay ngay với React.