DOM là gì

Trước khi chúng ta có thể hiểu React và Virtual DOM, chúng ta trước tiên nên tìm hiểu về DOM(Document Object Model). DOM là một Abstraction của một cấu trúc trang HTML. Nó lấy các phần tử HTML và đóng gói lại trong một object theo cấu trúc dạng cây. Duy trì việc liên kết giữa các phần tử HTML cha và con đang được lồng vào nhau. Cung cấp API cho chúng ta đi qua các node (phần tử HTML) và điều khiển chúng bằng một số cách như là thêm node, xoá node, cập nhập nội dung node v..v

Chúng ta  thường sử dụng Jquery để tương tác với DOM, nhưng thực ra bạn có thể dùng vanilla Javascript với các phương thức được cung cấp bởi DOM

Nhược điểm của DOM

Chúng ta sử Javascript để tương tác với DOM. Tuy nhiên, sự tương tác thường không hiệu quả vì DOM được chủ ý riêng cho giao diện người dùng tĩnh. Các trang được trả về bởi Server nên không cần dùng cập nhập động. Khi DOM được cập nhập, nó cũng phải cập nhập node cũng như render lại trang cho phù hợp với CSS và cách bố trí.

Cùng với sự phát triển và phổ biến của SPA (Single Page App), các thành phần của trang web đang ngày càng có trách nhiệm hơn trong việc lắng nghe những cập nhập và render lại những thay đổi đó trên UI (giao diện người dùng). Không phải là hiếm khi gặp các trang hiển thị hàng nghìn các node được tạo ra tự động, mà vẫn phải tiếp tục lắng nghe các cập nhập mới trong tương lai. Đây là nơi mà mọi thứ có thể khá tốn kém

Biết khi nào cần cập nhập

Có một vài cách để các thành phần có thể biết khi nào một cập nhật dữ liệu xảy ra và có cần phải tạo lại giao diện người dùng hay không

• Dirty check ( chậm) – Kiểm tra thông qua tất cả các node dữ liệu tại một khoảng thời gian đều đặn để xem có gì thay đổi hay không. Nó là không hiệu quả bởi vì nó yêu cầu đi qua các từng node đệ quy để đảm bảo rằng dữ liệu không bị “dirty” (hết hạn)
• Observable (nhanh) – Các thành phần sẽ chịu trách nhiệm lắng nghe khi một thay đổi diễn ra. Sau đó dữ liệu được lưu trên trạng thái, các thành phần đơn giản là lắng nghe các sự kiện trên trạng thái và nếu nó là một thay đổi thì nó có thể render lại UI

React sử dụng phương thức thứ 2

DOM render như thế nào ?

Chúng ta hãy cùng xem một ví dụ về một danh sách các item. Trong danh sách này, chúng ta có một số các item và  một item bất kỳ cũng có thể nhận được yêu cầu cập nhập

Nếu một trong nhưng item này thay đổi, thì DOM sẽ render lại toàn bộ, đây chính là lý do khởi nguồn DOM không hiệu quả

Trong khi đây là một ví dụ đơn giản của một danh sách chứa số lượng ít các item, nó sẽ trở nên vô cùng không hiệu quả nếu chúng ta có một SPA (single page app) với hàng trăm, hàng nghìn các thành phần mà đòi hỏi render lại khi các cập nhập được truyền xuống. Lý tưởng nhất là chúng ta chỉ render lại các item mà nhận được cập nhập, bỏ qua các item còn lại như là:

React sử dụng Virtual DOM giúp giảm việc không hiệu quả này

Giới thiệu Virtual DOM

Virtual DOM là một Abstraction nhẹ của DOM. Bạn có thể coi nó như một bản sao của DOM, mà việc cập nhập không gây ảnh hưởng tới DOM thực. Nó có tất cả các thuộc tính giống như object DOM thật, nhưng nó không có khả năng viết lên màn hình như DOM thật. Virtual DOM hiệu quả và tăng tốc độ từ thực tế là nó nhẹ. Trong thực tế, các Virtual DOM mới sẽ được tạo sau khi render lại.

Lưu ý quan trọng là React không giới thiệu Virtual DOM vì có một vài thư viện cũng được tạo bằng cách sử dụng nó. Trong thực tế, khi mà React đang chuyển sang một số nền tảng không phải Web như React-Native, React-VR…, Phần từ các phiên bản React trước dùng để xử lý tương tác với DOM đã được mang ra. Nó giờ đây được cung cấp qua các package riêng biệt. Bạn phải cài đặt và bao hàm React-DOM nếu bạn muốn sử dụng React trên Web.

Bản sao và diffing

React nắm tất cả bản sao Virtual DOM (các bản ghi trạng thái DOM) trước khi áp dụng bất kỳ cập nhập nào. Nó sau đấy sử dụng bản sao này so sánh lại với những thay đổi Virtual DOM trước khi tạo các thay đổi.

Khi các thay đổi được đưa vào Virtual DOM, React sẽ sử dụng một quá trình được gọi là reconciliation (hoà hợp) – sử dụng một “diffing” thuật toán để so sánh và đối chiếu lại những thay đổi mục đích để biết được cập nhập nào đang diễn ra. React sau đấy chỉ cập nhập những phần tử đã thay đổi, bỏ qua những chỗ khác (không thay đổi)