⚡ Hiểu Biết Về Virtual DOM và Fiber Node Trong React

Khám phá cách React sử dụng Virtual DOM và Fiber Node để cập nhật giao diện của bạn một cách hiệu quả và giữ cho ứng dụng mượt mà. ✨

Khi tôi bắt đầu tìm hiểu sâu về React, tôi luôn tự hỏi: “Virtual DOM và Fiber Node có phải là một không?” 🤔
Câu trả lời ngắn gọn là không, nhưng chúng có mối liên hệ chặt chẽ, giống như hai đồng đội ⚽ với những vai trò khác nhau trong một trận đấu.

🔹 Chúng Có Giống Nhau Không? Mối Quan Hệ Giữa Chúng Là Gì? 🧩

• Virtual DOM (VDOM) 🖼️: là một bức ảnh chụp nhanh của giao diện người dùng trong bộ nhớ.
• Fiber Node 🔗: là trình quản lý tác vụ cho React, theo dõi cập nhật cho từng thành phần một cách riêng biệt.

Cách chúng hoạt động cùng nhau:

1. Khi trạng thái hoặc props thay đổi, React tạo ra một cây Virtual DOM mới 🌳
2. React so sánh cây VDOM mới với cây VDOM trước đó 🔍 để phát hiện thay đổi
3. Mỗi thay đổi được phát hiện sẽ được đại diện bởi một Fiber Node (đơn vị công việc) ✂️
4. Fiber sắp xếp các cập nhật này một cách dần dần trên luồng chính, quyết định cái gì được ưu tiên, tạm dừng hoặc tiếp tục 🕒
5. DOM thực tế được cập nhật một cách mượt mà mà không làm chậm giao diện 🏗️

Tóm lại:

• VDOM tính toán những gì cần cập nhật
• Fiber quyết định cách và khi nào để cập nhật ⚡

🔹 Virtual DOM 🖼️

Virtual DOM là một đại diện trong bộ nhớ của DOM thực tế. React cập nhật bản sao ảo này trước, thay vì trực tiếp sửa đổi DOM của trình duyệt.

Cách Nó Hoạt Động:

1. Hiển thị giao diện vào một cây Virtual DOM 🌳
2. Khi có cập nhật trạng thái/props, tạo ra một cây Virtual DOM mới 🔄
3. So sánh cây VDOM cũ và mới để tìm ra các thay đổi 🔍
4. Chỉ vá những phần đã thay đổi vào DOM thực tế 🏗️

Lợi Ích:

• ⚡ Tối ưu hóa hiệu suất – giảm thiểu cập nhật DOM trực tiếp
• 🖌️ Giao diện tuyên bố – React tính toán các thay đổi một cách trừu tượng
• 🧠 Dễ dàng hơn để lý giải về các cập nhật trạng thái và tái hiển thị

🔹 Fiber Node 🔗

Fiber là công cụ điều hòa của React được giới thiệu trong React 16.
Mỗi thành phần tương ứng với một Fiber Node, một đơn vị công việc lưu trữ metadata như:

• 🏷️ Loại thành phần
• 📝 Props và trạng thái
• 🔗 Con trỏ đến cha, con, và anh chị em
• ⚠️ Thẻ hiệu ứng (theo dõi các cập nhật)

Tại Sao Lại Là Fiber?

Trước đây, việc so sánh của React đã làm chậm luồng chính ⏳ cho các cây lớn. Fiber giải quyết điều này bằng cách:

• Chia nhỏ các cập nhật thành các đơn vị nhỏ ✂️
• Ưu tiên các cập nhật quan trọng (hoạt ảnh so với tác vụ nền) 🎯
• Tạm dừng, hủy bỏ hoặc tiếp tục công việc để có giao diện mượt mà 🛑➡️▶️

Ví Dụ Về Cây Fiber:

App
├─ Header
│  └─ Logo
├─ Content
│  ├─ Article
│  └─ Sidebar
└─ Footer

Mỗi nút là một Fiber Node, với các liên kết đến các Fiber cha, con và anh chị em 🔗.

🔹 So Sánh Giữa Virtual DOM và Fiber: Những Khác Biệt Chính ⚔️

🔹 Tóm Tắt 📖

Tôi đã từng đối mặt với một ứng dụng React chậm chạp 🐌 với các thành phần lồng nhau nặng nề. Việc chỉ sử dụng Virtual DOM là đủ cho các ứng dụng nhỏ, nhưng với hàng trăm cập nhật, giao diện bị giật lag. Việc điều hòa dần dần của Fiber đã cứu cánh 🎉, cho phép React tạm dừng các cập nhật không quan trọng và giữ cho các hoạt ảnh mượt mà.

🔹 Kết Luận ✅

• Virtual DOM 🖼️: Đại diện cho những gì giao diện nên trông như thế nào tại một thời điểm nhất định. Nó chỉ là một bức ảnh chụp nhanh của giao diện—không có kiến thức về cách cập nhật nó một cách dần dần.

• Fiber Node 🔗: Là một đơn vị công việc liên kết với một nút VDOM. Nó theo dõi trạng thái, props, hiệu ứng và liên kết đến các nút cha/con/anh chị em, và cho React biết cách, khi nào và theo thứ tự nào để cập nhật DOM thực tế.

• Cùng nhau: VDOM tính toán các thay đổi → Fiber sắp xếp các cập nhật một cách hiệu quả ⚡

Cặp đôi này là lý do tại sao React có thể duy trì cả tính chất tuyên bố và hiệu suất cao, ngay cả trong các ứng dụng lớn.

Tác giả: Yogesh Bamanier
LinkedIn: Yogesh Bamanier