ReactJS là một thư viện JavaScript phổ biến và mạnh mẽ được sử dụng để xây dựng giao diện người dùng và tương tác, chủ yếu cho các ứng dụng một trang (SPA). Dựa trên kiến trúc component, kết hợp quản lý state hiệu quả và Virtual DOM để tối ưu render.
1. Lịch sử hình thành
React được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tại Facebook (nay là Meta). Năm 2011, Facebook phát triển một prototype có tên FaxJS, tiền thân của React, và sử dụng nội bộ cho giao diện News Feed.
Đến 2012, React tiếp tục được áp dụng cho Instagram, giúp kiểm chứng khả năng hoạt động thực tế.
Ngày 29/05/2013, React được mã nguồn mở tại hội nghị JSConf US, đánh dấu bước ngoặt giúp React trở thành một thư viện JavaScript phổ biến rộng rãi trong cộng đồng lập trình viên.
ReactJS là nền tảng UI chủ lực của Facebook, Instagram, WhatsApp và nhiều công ty lớn khác trên toàn thế giới.
2. React ra đời để giải quyết vấn đề gì?
Giải quyết sự phức tạp của DOM thủ công: Nơi việc thêm, xóa, sửa trực tiếp các phần tử HTML trong ứng dụng lớn dễ gây rối, lỗi và khó bảo trì. Thay vào đó, bạn chỉ cần thay đổi dữ liệu, React tự cập nhật giao diện cần thiết.
Thay đổi tư duy lập trình (Declarative): Chuyển từ việc “làm thế nào để cập nhật giao diện” sang “giao diện trông như thế nào với dữ liệu này”. Bạn chỉ cần mô tả UI dựa trên trạng thái (State), React sẽ tự lo việc cập nhật.
Tối ưu hiệu suất nhờ Virtual DOM: Sử dụng cơ chế so sánh DOM ảo để chỉ cập nhật đúng những phần thay đổi lên giao diện thật, giúp ứng dụng mượt mà và nhanh hơn.
3. React tuân thủ theo kiến trúc gì?
Triết lý cốt lõi của React là xây dựng UI bằng cách chia nhỏ nó thành các phần độc lập, có thể tái sử dụng được gọi là Components.
Component-Based Architecture (Kiến trúc Dựa trên Thành phần)
Đây là đặc điểm định hình nên React. Thay vì tách biệt code theo công nghệ (HTML riêng, JS riêng, CSS riêng), React tách biệt theo chức năng.
- Tính module hóa: Giao diện người dùng (UI) được chia nhỏ thành các thành phần (Components) độc lập, có thể tái sử dụng.
- Composition (Sự kết hợp): Các component nhỏ được lồng ghép để tạo thành component lớn hơn, giống như việc xếp hình Lego.
Unidirectional Data Flow (Luồng dữ liệu một chiều)
React tuân thủ nghiêm ngặt luồng dữ liệu một chiều:
- Top-Down: Dữ liệu luôn chảy từ Component cha xuống Component con thông qua Props.
- Immutability: Component con không được phép sửa đổi trực tiếp dữ liệu (props) nhận từ cha.
- Events Up: Để thay đổi dữ liệu, Component con phải gửi sự kiện (event) ngược lên cha, cha sẽ cập nhật State, và dữ liệu mới lại chảy xuống dưới.
4. Cơ chế Hoạt động (Virtual DOM – DOM ảo)
Trước khi có Virtual DOM, các thư viện frontend phải thao tác trực tiếp với DOM thực (real DOM) – cây cấu trúc biểu diễn UI của trình duyệt.
DOM Thực (The Real DOM):
- DOM (Document Object Model): Là một cấu trúc dữ liệu dạng cây được trình duyệt tạo ra để biểu diễn giao diện HTML/XML. Mỗi thẻ HTML được chuyển thành một node (nút) trong cây.
- Không có cách nào hiệu quả để biết “thay đổi nào cần cập nhật UI” mà không render lại cả cây.
- Thao tác DOM đơn lẻ vốn rất nhanh, nhưng khi thực hiện nhiều cập nhật trực tiếp thao tác thường xuyên khiến hiệu năng giảm đáng kể (vì nó trigger reflow, repaint, layout…)
DOM ẢO – Virtual DOM
- Virtual DOM không phải là một “DOM ảo” chạy song song.
- Virtual DOM chính là một cây Plain JavaScript Object cực nhẹ do React tự tạo ra, để React dễ so sánh và tối ưu cập nhật.
- Là Object cực nhẹ, xử lý trong RAM tốc độ rất nhanh, Không dính tính toán lại bố cục/ vẽ lại giao diện nên không ảnh hưởng hiệu suất