React & DOM ảo

Trước hết, Miền-Đối tượng-Mô hình (DOM) là một biểu diễn được trình duyệt phân tích cú pháp, bao gồm cấu trúc và nội dung của một tài liệu. Nó là một giao diện lập trình cho các tài liệu HTML hoặc XML cho phép các chương trình thay đổi kiểu, nội dung và cấu trúc của tài liệu. DOM hoạt động như một cấu trúc dữ liệu trực tiếp và khi được sửa đổi, nó sẽ phản ánh sự thay đổi đó trên màn hình.

Trang web là một tài liệu có thể được hiển thị dưới dạng nguồn HTML hoặc trong cửa sổ trình duyệt - mặc dù chúng xuất hiện khác nhau - chúng là cùng một tài liệu. DOM đại diện cho tài liệu này trong trình duyệt dưới dạng các đối tượng và nút và cho phép thao tác trong thời gian thực bằng cách cho phép các ngôn ngữ lập trình truy cập các đối tượng và nút này. Nếu không có DOM, JavaScript sẽ không có ký hiệu của các trang web và các phần tử của chúng và do đó không có cách nào để truy cập và thao tác một trang web.

Thao tác với DOM là trọng tâm của web tương tác, hiện đại. Tuy nhiên, nó là chậm. Với hầu hết các khung JavaScript, DOM được cập nhật thường xuyên hơn mức cần thiết. Bây giờ, hãy nói về DOM ảo. DOM ảo đã được phổ biến bởi những người tạo ra React (một thư viện JavaScript) và là một trong những khái niệm trung tâm làm cho React trở nên tuyệt vời.

Không cần đi quá sâu vào nó, React là một thư viện JavaScript giao diện người dùng được sử dụng để xây dựng giao diện người dùng web và thiết bị di động. Nó cho phép các nhà phát triển xây dựng các thành phần UI có thể tái sử dụng - là các hàm hoặc lớp JavaScript có thể chấp nhận đầu vào (hay còn gọi là thuộc tính hoặc đạo cụ) và trả về các phần tử React mô tả cách một phần của giao diện người dùng sẽ xuất hiện. Một thành phần React được hiển thị lại khi trạng thái bên trong của nó thay đổi do tương tác của người dùng (ví dụ: người dùng nhập vào trường đầu vào) trong trình duyệt hoặc nếu nó nhận được đạo cụ (ví dụ: thành phần mẹ có bản cập nhật trạng thái đã được thông qua xuống như một chỗ dựa cho một thành phần con).

Trong React, có một đối tượng DOM ảo tương ứng cho mọi đối tượng DOM. Các đối tượng DOM ảo có tất cả các thuộc tính giống như các đối tượng trong DOM thực, tuy nhiên nó không thể thay đổi những gì trên màn hình làm cho nó nhẹ hơn nhiều. Nó giống như các sơ đồ cho DOM hơn là một tòa nhà vật lý. DOM ảo là một đại diện của DOM thực . DOM ảo được tạo khi các phần tử mới được thêm vào giao diện người dùng (UI).

Mục đích của DOM ảo này là khi một thay đổi đối với phần tử trong trình kích hoạt trình duyệt hiển thị lại một thành phần, toàn bộ DOM ảo được cập nhật - nhanh hơn nhiều so với làm như vậy trong DOM thực vì không có gì thực sự được trình bày trên -screen tại thời điểm này. Sự khác biệt (hoặc khác biệt) giữa DOM ảo được cập nhật và DOM ảo trước khi cập nhật được so sánh - và chỉ các đối tượng DOM ảo có sự khác biệt mới được cập nhật trong DOM thực và được đại diện trong trình duyệt. Điều này có nghĩa là toàn bộ trang web không cần phải được hiển thị lại mỗi khi có thay đổi xảy ra - làm cho quá trình nhanh hơn nhiều.

Giả sử React không kết hợp chức năng của DOM ảo - bất kỳ khi nào một sự kiện được kích hoạt hoặc trạng thái hoặc đạo cụ của bất kỳ thành phần nào bị thay đổi, toàn bộ DOM sẽ được cập nhật. Điều này có nghĩa là tất cả dữ liệu được tìm nạp lại (chậm) và sau đó toàn bộ trang web được hiển thị lại (chậm) với mọi thay đổi. Nhờ có web DOM ảo và người dùng ứng dụng gốc không phải đợi toàn bộ cây DOM cập nhật mỗi khi có thay đổi xảy ra trong trình duyệt.