DOM ảo và React

Hãy bắt đầu với định nghĩa trong reactjs.org

DOM ảo (VDOM) là một khái niệm lập trình trong đó một biểu diễn lý tưởng hay còn gọi là “ảo” của giao diện người dùng được lưu trong bộ nhớ và được đồng bộ hóa với DOM “thực” bởi một thư viện như ReactDOM. Quá trình này được gọi là hòa giải.

Đó là một định nghĩa tồi tệ, chúng ta hãy cố gắng hiểu nó.

Virtual DOM là một khái niệm được thực hiện bởi các thư viện trên API trình duyệt. Bất cứ khi nào một thay đổi được thực hiện trong trình duyệt, JS sẽ duyệt qua toàn bộ DOM thay vì chỉ hiển thị phần yêu cầu thay đổi. Đó là thời gian và tốn kém.

Nói cách khác, Giả sử động cơ ô tô của bạn cần được sửa chữa, vì vậy bạn sẽ sửa động cơ hơn là sửa toàn bộ chiếc ô tô của mình. Tương tự với DOM ảo, thay vì hiển thị toàn bộ DOM, chỉ phần tử đó được hiển thị tại nơi thực hiện thay đổi.

React sử dụng Thuật toán Khác biệt để so sánh những thay đổi giữa cây mới và cây gần đây nhất (Cây ở đây không là gì ngoài những thay đổi được thực hiện là VDOM mới và VDOM gần đây nhất). Quá trình so sánh này được gọi là Đối chiếu.

React phân tích cú pháp cây bằng cách sử dụng tìm kiếm theo chiều rộng (BFS).

Hãy luôn nhớ rằng, DOM ảo không tồn tại về mặt vật lý, nó là một đại diện trong bộ nhớ hoặc một bản thiết kế của DOM thực.

Hãy lấy một ví dụ khác: Bạn đang xây dựng một biểu mẫu bao gồm hai trường đầu vào. Bây giờ bạn phải thêm một trường đầu vào khác, khi bạn thêm trường đầu vào thứ ba, VDOM được tạo với các thay đổi của bạn và DOM thực vẫn không bị ảnh hưởng. Bây giờ so sánh giữa VDOM và DOM thực sẽ xảy ra và các thay đổi chỉ được thực hiện trong div khi được yêu cầu.

Tại sao lại là DOM ảo? Đơn giản, Đây là những gì làm cho phản ứng nhanh. Nó thực hiện điều này bằng cách thay đổi DOM ảo. So sánh hai cây ảo cũ và mới sau đó chỉ thực hiện những thay đổi cần thiết đối với DOM thực.

Đừng nhầm lẫn rằng VDOM được phát triển bởi React js, VDOM là một khái niệm đang được sử dụng bởi React js. Virtual DOM về cơ bản là một ảnh chụp màn hình của DOM tại một thời điểm nhất định. Bất cứ khi nào thay đổi được thực hiện, thành phần sẽ được hiển thị lại để tạo ra một VDOM mới.

Virtual DOM đã trở nên phổ biến vì nó làm cho ứng dụng của bạn nhanh hơn và loại bỏ các kết xuất không cần thiết của toàn bộ trang. Giúp tiết kiệm cả thời gian và tiền bạc.

Tôi hy vọng bạn đã thích bài viết và thấy nó hữu ích. Nếu tôi đã bỏ lỡ điều gì đó xin vui lòng cho tôi biết trong phần bình luận.