Virtual DOM là gì?

Gần đây, tôi đã xem xét khung React của Facebook . Nó sử dụng một khái niệm gọi là "Virtual DOM" mà tôi không thực sự hiểu.

DOM ảo là gì? Các lợi thế là gì?

React tạo một cây các đối tượng tùy chỉnh đại diện cho một phần của DOM. Ví dụ, thay vì tạo một phần tử DIV thực tế có chứa phần tử UL, nó tạo ra một đối tượng React.div có chứa một đối tượng React.ul. Nó có thể thao tác các đối tượng này rất nhanh mà không cần thực sự chạm vào DOM thực hoặc đi qua API DOM. Sau đó, khi nó kết xuất một thành phần, nó sử dụng DOM ảo này để tìm ra những gì nó cần làm với DOM thực để có được hai cây khớp nhau.

Bạn có thể nghĩ về DOM ảo giống như một bản thiết kế. Nó chứa tất cả các chi tiết cần thiết để xây dựng DOM, nhưng vì nó không yêu cầu tất cả các phần nặng đi vào một DOM thực, nên nó có thể được tạo và thay đổi dễ dàng hơn nhiều.

Hãy lấy một ví dụ - mặc dù rất ngây thơ: Nếu bạn có thứ gì đó lộn xộn trong một căn phòng trong nhà và bạn cần dọn dẹp, bước đầu tiên của bạn là gì? Bạn sẽ dọn dẹp căn phòng của bạn đang bị rối tung hoặc toàn bộ ngôi nhà? Câu trả lời chắc chắn là bạn sẽ chỉ dọn phòng mà cần phải dọn dẹp. Đó là những gì DOM ảo làm.

JS thông thường di chuyển ngang hoặc kết xuất toàn bộ DOM thay vì chỉ hiển thị phần yêu cầu thay đổi.

Vì vậy, bất cứ khi nào bạn có bất kỳ thay đổi nào, vì bạn muốn thêm một thay đổi khác <div>vào DOM của mình thì DOM ảo sẽ được tạo mà thực tế không thực hiện bất kỳ thay đổi nào trong DOM thực tế. Bây giờ với DOM ảo này, bạn sẽ kiểm tra sự khác biệt giữa DOM này và DOM hiện tại của bạn. Và chỉ phần khác (trong trường hợp này là phần mới <div>) sẽ được thêm vào thay vì hiển thị lại toàn bộ DOM.

DOM ảo là gì?

DOM ảo là một đại diện trong bộ nhớ của các thành phần DOM thực được tạo bởi các thành phần React trước khi có bất kỳ thay đổi nào được thực hiện trên trang.

Đây là một bước xảy ra giữa chức năng kết xuất được gọi và hiển thị các thành phần trên màn hình.

Phương thức kết xuất của một thành phần trả về một số đánh dấu, nhưng nó chưa phải là HTML cuối cùng. Đó là biểu diễn trong bộ nhớ của những gì sẽ trở thành yếu tố thực (đây là bước 1). Sau đó, đầu ra đó sẽ được chuyển đổi thành HTML thực, đó là những gì được hiển thị trong trình duyệt (Đây là bước 2).

Vậy tại sao phải trải qua tất cả điều này để tạo ra một DOM ảo? Câu trả lời đơn giản - Đây là những gì cho phép phản ứng nhanh. Nó thực hiện điều này bằng phương pháp DOM ảo khác nhau. So sánh hai cây ảo - cũ và mới - và chỉ thực hiện các thay đổi cần thiết vào DOM thực.

Nguồn từ Giới thiệu để Phản ứng # 2

Một virtual DOM(VDOM) không phải là một khái niệm mới: https://github.com/Matt-Esch/virtual-dom .

VDOM có chiến lược để cập nhật DOM mà không cần vẽ lại tất cả các nút trong một ứng dụng trang. Tìm một nút trong cấu trúc cây rất dễ nhưng cây DOM cho ứng dụng SPA có thể rất lớn. Tìm kiếm và cập nhật một nút / nút trong trường hợp sự kiện không hiệu quả về thời gian.

VDOM giải quyết vấn đề này bằng cách tạo ra sự trừu tượng nhãn cao của dom thực tế. VDOM là một đại diện cây trong bộ nhớ nhẹ mức cao của DOM thực tế.

Ví dụ, hãy xem xét thêm một nút trong DOM; phản ứng giữ một bản sao của VDOM trong bộ nhớ

1. Tạo một VDOM với trạng thái mới
2. So sánh nó với VDOM cũ hơn bằng cách sử dụng diffing.
3. Chỉ cập nhật các nút khác nhau trong DOM thực.
4. Chỉ định VDOM mới là một VDOM cũ hơn.

Đây là một mô tả ngắn gọn và nhắc lại về Virtual DOM thường được đề cập cùng với ReactJS.

DOM (Mô hình đối tượng tài liệu) là một bản tóm tắt của văn bản có cấu trúc, có nghĩa là nó được làm bằng mã HTML và css. Các phần tử HTML này trở thành các nút trong DOM. Có những hạn chế đối với các phương pháp thao tác DOM trước đây. Virtual DOM là một bản tóm tắt của HTML DOM theo nghĩa đen được tạo ra trước khi React được tạo hoặc sử dụng, nhưng với mục đích của chúng tôi, chúng tôi sẽ sử dụng nó trong buổi hòa nhạc với ReactJS. Virtual DOM rất nhẹ và tách rời khỏi việc triển khai DOM trong trình duyệt. Virtual DOM về cơ bản là một ảnh chụp màn hình (hoặc bản sao) của DOM tại một thời điểm nhất định. Một cách để xem xét nó từ góc độ nhà phát triển là DOM là môi trường sản xuất và Virtual DOM là môi trường (dev) cục bộ. Mỗi lần dữ liệu thay đổi trong ứng dụng React, một đại diện DOM ảo mới của giao diện người dùng được tạo.

Phương thức cơ bản nhất cần thiết để tạo thành phần tĩnh trong ReactJS là:

Bạn phải trả lại mã từ phương thức kết xuất. Bạn phải chuyển đổi mọi lớp thành className vì lớp được dành riêng từ trong JavaScript. Ngoài những thay đổi lớn hơn, có hai sự khác biệt nhỏ giữa hai DOM bao gồm ba thuộc tính xuất hiện trong Virtual DOM nhưng không có trong DOM DOM (khóa, ref và nguy hiểm SetInnerHTML).

Một điều quan trọng cần hiểu khi làm việc với Virtual DOM là sự khác biệt giữa ReactEuity và ReactComponent.

Phản ứng

• ReactEuity là một đại diện ảo nhẹ, không trạng thái, bất biến, của một phần tử DOM.
• ReactEuity - Đây là loại chính trong React và nằm trong Virtual DOM.

• ReactElements có thể được kết xuất thành HTML DOM

  var root = React.createElement('div'); ReactDOM.render(root, document.getElementById('example'));

• JSX biên dịch các thẻ HTML thành ReactElements

  var root = <div/>; ReactDOM.render(root, document.getElementById('example'));

ReactComponent

• ReactComponent - ReactComponent là những thành phần có trạng thái.
• React.createClass được coi là ReactComponent.
• Bất cứ khi nào nhà nước thay đổi thành phần được đăng ký lại.

Bất cứ khi nào ReactComponent có thay đổi trạng thái, chúng tôi muốn có ít thay đổi nhất đối với DOM DOM càng tốt để ReactComponent được chuyển đổi thành ReactEuity sau đó có thể được chèn vào DOM ảo, được so sánh và cập nhật nhanh chóng và dễ dàng.

Khi React biết khác biệt - nó được chuyển đổi thành mã mức thấp (HTML DOM), được thực thi trong DOM.

Đây là một khái niệm gọn gàng: thay vì thao tác trực tiếp với DOM, dễ bị lỗi và dựa vào trạng thái có thể thay đổi, thay vào đó bạn xuất ra một giá trị được gọi là Virtual DOM. Các DOM ảo sau đó được diffed với trạng thái hiện tại của DOM, mà tạo ra một danh sách các hoạt động DOM mà có thể làm giao diện DOM hiện như một hình mới. Những hoạt động được áp dụng nhanh chóng trong một lô.

Lấy từ đây.

Virtual DOM là một bản tóm tắt của DOM DOM, hiển thị có chọn lọc các phần phụ của các nút dựa trên các thay đổi trạng thái. Nó thực hiện số lượng thao tác DOM ít nhất có thể để giữ cho các thành phần của bạn được cập nhật.

Virtual Dom được tạo một bản sao của Dom. Virtual dom được so sánh với dom, và dom ảo chỉ cập nhật phần đó trong dom đã thay đổi. nó không thể hiện toàn bộ dom mà nó chỉ thay đổi phần cập nhật của dom in dom. Nó rất tốn thời gian và từ chức năng này, ứng dụng của chúng tôi hoạt động rất nhanh.

Tất cả các câu trả lời là tuyệt vời. Tôi đã đưa ra một sự tương tự mà có lẽ có thể đưa ra một ẩn dụ trong thế giới thực.

DOM thực giống như phòng của bạn, các nút là đồ nội thất trong phòng của bạn. DOM ảo giống như chúng ta vẽ một bản thiết kế của căn phòng hiện tại này.

Tất cả chúng ta đều có kinh nghiệm di chuyển đồ đạc, điều đó rất mệt mỏi (Cùng một khái niệm như cập nhật quan điểm trong máy tính). Do đó, bất cứ khi nào chúng tôi muốn thay đổi vị trí / thêm đồ nội thất (nút), chúng tôi chỉ muốn thực hiện thay đổi rất cần thiết.

Blueprint đã đến để giải cứu để đạt được nó. Chúng tôi vẽ một kế hoạch chi tiết mới và so sánh sự khác biệt với bản gốc. Điều này cho chúng tôi biết phần nào đã được thay đổi và phần nào giữ nguyên. Sau đó, chúng tôi thực hiện thay đổi cần thiết cho phòng thực (cập nhật các nút đã thay đổi trên DOM thực). Tiếng hoan hô.

(Một số người có thể nghĩ, tại sao chúng ta phải dựa vào một cái ảo và không so sánh trực tiếp với DOM thật? . Nó quá tốn kém.)

Hãy làm cho trật tự và ý nghĩa trong vấn đề này. React (hoặc bất kỳ thư viện nào khác) là một "lớp" trên javascript.

Không có thứ gọi là dom ảo, không có dom.

Hãy để tôi giải thích trong javascript đơn giản:

 let vDom = {};     // this is a object that will be used to hold the elements

 let d = document.createElement('div');
 d.innerHTML = 'hi, i am a new div';

 vDom['newDiv'] = d;

tại thời điểm này, chúng tôi đã tạo ra một Div không được hiển thị trên dom, bởi vì nó không được đính kèm

nhưng chúng ta có thể truy cập nó, thêm thuộc tính, giá trị, thay đổi, v.v.

một khi chúng ta gọi: (ví dụ: thêm nó vào cơ thể)

    document.body.appendChild(vDom['newDiv'])

sau đó chúng ta sẽ thấy nó;

 for one how saw javascript libs come and go , i suggest to any one 
 to do one simple thing : master JAVAscript, not layers :)