Khác nhau giữa Virtual DOM vs DOM – VN GEEKS

Bài viết Khác nhau giữa Virtual DOM vs DOM – VN GEEKS thuộc chủ đề về HỎi Đáp thời gian này đang được rất nhiều bạn quan tâm đúng không nào !! Hôm nay, Hãy cùng https://hangnhatcaocap.com.vn/ tìm hiểu Khác nhau giữa Virtual DOM vs DOM – VN GEEKS trong bài viết hôm nay nhé ! Các bạn đang xem bài viết : “Khác nhau giữa Virtual DOM vs DOM – VN GEEKS”

Thông tin chi tiết về Khác nhau giữa Virtual DOM vs DOM – VN GEEKS


Xem nhanh

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)



Các câu hỏi về virtual dom là gì


Nếu có bắt kỳ câu hỏi thắc mắt nào vê virtual dom là gì hãy cho chúng mình biết nhé, mõi thắt mắt hay góp ý của các bạn sẽ giúp mình cải thiện hơn trong các bài sau nhé <3 Bài viết virtual dom là gì ! được mình và team xem xét cũng như tổng hợp từ nhiều nguồn. Nếu thấy bài viết virtual dom là gì Cực hay ! Hay thì hãy ủng hộ team Like hoặc share. Nếu thấy bài viết virtual dom là gì rât hay ! chưa hay, hoặc cần bổ sung. Bạn góp ý giúp mình nhé!!

Các Hình Ảnh Về virtual dom là gì


Các hình ảnh về virtual dom là gì đang được chúng mình Cập nhập. Nếu các bạn mong muốn đóng góp, Hãy gửi mail về hộp thư [email protected] Nếu có bất kỳ đóng góp hay liên hệ. Hãy Mail ngay cho tụi mình nhé

Tham khảo thêm kiến thức về virtual dom là gì tại WikiPedia

Bạn hãy xem thêm nội dung về virtual dom là gì từ web Wikipedia tiếng Việt.◄ Tham Gia Cộng Đồng Tại

💝 Nguồn Tin tại: https://hangnhatcaocap.com.vn/

💝 Xem Thêm Chủ Đề Liên Quan tại : https://hangnhatcaocap.com.vn/wiki-hoi-dap/

Related Posts

About The Author