Virtual DOM - ReactJS

Virtual DOM

• Dom ảo được tạo ta ntn ? Virtual DOM là một biểu diễn bộ nhớ của cấu trúc DOM thật. Nó là một cây DOM ảo được tạo ra bằng cách sử dụng JavaScript, không phải là DOM thật tại thời điểm đó.
• Khi trạng thái của ứng dụng thay đổi (ví dụ: do tương tác người dùng), React tạo ra một cây DOM ảo mới dựa trên trạng thái mới.
• So sánh giữa cây DOM ảo mới và cây DOM ảo cũ giúp React xác định những phần nào của UI cần được cập nhật.
• Giúp cho hiệu suất làm việc của React cao hơn hẳn so với các thư viện và framework Javascript khác.
• DOM ảo không được phát minh ra bởi React, mà React sử dụng nó.
• Vậy React sử dụng nó như thế nào để nâng cao hiệu xuất đến vậy ? Hiểu đơn giản là khi có bất cứ thay đổi nào từ phía UI thì react đều dựa vào JSX để tạo một cây Dom ảo mới và so sánh trên Dom ảo cũ có khác gì hay không bằng một quá trình gọi là reconciliation để xác định những thay đổi cụ thể. Có thì thay vì re-render toàn bộ DOM, React chỉ re-render các phần của cây DOM ảo mà thực sự đã thay đổi. không thì không bị re-render. Điều này giúp giảm thiểu công việc và tối ưu hóa hiệu suất. Nghe có vẻ dài dòng nhiều bước và chậm chạm phải không ? nhưng trên thực tế nó diễn ra nhanh chóng và thực tế đã chứng minh điều đó. Khi trình duyệt đọc thì sẽ đọc từ trên xuống, và mỗi lần re-render sẽ là đọc từ đầu lại, trang tài nguyên ít thì không sao nhưng khi trang lớn thì sao ? thế nên React có các component và nó kiểm tra Dom ảo nào thay đổi và chỉ re-render với các phần thực sự thay đổi ở component đó
• Ngoài vấn đề trên còn một cái quan trọng giúp cho react phát triễn mạnh nữa đó là Batch Updates (Gộp cập nhật):
  • Batch Updates là quá trình gộp nhóm nhiều cập nhật và áp dụng chúng cùng một lúc thay vì áp dụng từng cập nhật một cách độc lập.
  • React thường gộp các thay đổi vào trong một "batch" và thực hiện chúng chỉ một lần sau mỗi "tick" của event loop JavaScript. Điều này giúp giảm số lượng lần cập nhật DOM thật, cải thiện hiệu suất.
  • React tự động quản lý quá trình gộp cập nhật, và bạn thường không cần phải lo lắng về nó. Điều này làm giảm áp lực lên trình duyệt và tối ưu hóa quá trình làm mới UI.

Kết luận :

• Khi trạng thái thay đổi, React tạo ra một cây DOM ảo mới => React so sánh cây DOM ảo mới với cây DOM ảo cũ để xác định những thay đổi => Những thay đổi này được gộp vào một batch => Batch updates chỉ áp dụng những thay đổi cụ thể đó lên DOM thật một lần trong một lượt làm mới => Quá trình này giúp giảm độ trễ và tối ưu hóa hiệu suất khi có nhiều thay đổi diễn ra đồng thời.

• Trên đây là toàn bộ về Virtual DOM, hi vọng tương lai mình có thể chia sẻ các bài viết hay hơn. Cảm ơn tất cả mọi người đã đọc bài viết nhé ^^.