React không giống như nhiều Javascript Framework khác, bởi thay vì làm việc với các DOM elements của trình duyệt, React tạo ra sự hiện diện ảo (virtual representation) của các DOM.
Với React, chúng ta không trực tiếp mô phỏng 1 DOM thật sự. Thay vào đó, chúng ta tạo ra sự mô phỏng ảo và để React xử lý công việc thay đổi các DOM trên trình duyệt.
Tại sao không sửa các DOM có sẵn?
Thông thường, khi chúng ta lập trình web cơ bản (như sử dụng jQuery), nó thường theo dạng thức:
- Tìm element, chẳng hạn sử dụng
.find(), hoặc vanilla javascript nhưdocument.querySelector()haydocument.getElementById(). - Sau đó, chỉnh sửa các element tìm được, như
.css(), hay.innerHTML()
Quá trình này có những vấn đề của nó:
- Thật khó để theo dõi thay đổi trạng thái hiện tại của element theo dạng thức ta cần.
- Nó có vẻ chậm hơn.
Thế nào là Virtual DOM?
Virtual DOM được sinh ra để xử lý những vấn đề trên.
Thực chất, Virtual DOM là 1 cây (tree) bao gồm các Javascript objects thay thế các DOM thực sự. Một trong những lý do thú vị nhất để sử dụng Virtual DOM là API. Khi sử dụng Virtual DOM chúng ta có thể khởi tạo lại DOM trong mỗi update.
Ý tưởng khởi tạo lại kết quả của DOM có vẻ khả thi và phù hợp với mô hình lập trình dễ hiểu: thay vì liên tục theo dõi sự thay đổi của DOM (vd .hasClass()), lập trình viên chỉ cần trả lại DOM mà anh ta muốn mọi người thấy. React sẽ lo phần thay đổi phía sau.
Virtual DOM sẽ:
- Sử dụng thuật toán so sánh thay đổi để biết những gì đã thay đổi
- Cập nhật danh mục DOM đồng thời
- Cập nhật hàng loạt vào DOM
Chính những điều đó sẽ giúp dễ sử dụng và tối ưu hoá để xây dựng web app hơn.
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
