Co to jest wirtualny DOM?

Ostatnio przyjrzałem się frameworkowi React na Facebooku . Wykorzystuje koncepcję zwaną „wirtualnym DOM”, której tak naprawdę nie rozumiałem.

Co to jest wirtualny DOM? Jakie są zalety?

React tworzy drzewo niestandardowych obiektów reprezentujących część DOM. Na przykład zamiast tworzyć rzeczywisty element DIV zawierający element UL, tworzy obiekt React.div, który zawiera obiekt React.ul. Może bardzo szybko manipulować tymi obiektami, bez dotykania prawdziwego DOM lub przechodzenia przez DOM API. Następnie, kiedy renderuje komponent, używa tego wirtualnego modelu DOM, aby dowiedzieć się, co musi zrobić z prawdziwym DOM, aby dopasować oba drzewa.

Możesz myśleć o wirtualnym DOM jak o planie. Zawiera wszystkie szczegóły potrzebne do zbudowania DOM, ale ponieważ nie wymaga wszystkich ciężkich części, które wchodzą do prawdziwego DOM, można go tworzyć i zmieniać o wiele łatwiej.

Weźmy przykład - choć bardzo naiwny: jeśli masz coś pomieszanego w pokoju w domu i musisz go posprzątać, jaki będzie twój pierwszy krok? Czy będziesz sprzątać swój pokój, który jest zepsuty, czy cały dom? Odpowiedź jest zdecydowanie taka, że ​​będziesz sprzątał tylko pomieszczenie, które wymaga czyszczenia. To właśnie robi wirtualny DOM.

Zwykły JS przegląda lub renderuje cały DOM zamiast renderować tylko tę część, która wymaga zmian.

Więc za każdym razem, gdy wprowadzisz jakieś zmiany, np. Chcesz dodać kolejny <div>do swojego DOM, zostanie utworzony wirtualny DOM, który w rzeczywistości nie wprowadza żadnych zmian w rzeczywistym DOM. Teraz z tym wirtualnym DOM będziesz sprawdzać różnicę między tym a Twoim obecnym DOM. I tylko inna część (w tym przypadku nowa <div>) zostanie dodana zamiast ponownego renderowania całego DOM.

Co to jest wirtualny DOM?

Wirtualny DOM to reprezentacja w pamięci rzeczywistych elementów DOM wygenerowanych przez komponenty Reacta przed wprowadzeniem jakichkolwiek zmian na stronie.

Jest to krok, który ma miejsce między wywołaniem funkcji renderującej a wyświetleniem elementów na ekranie.

Metoda renderowania składnika zwraca część znaczników, ale nie jest to jeszcze ostateczny kod HTML. Jest to zapisana w pamięci reprezentacja tego, co stanie się prawdziwymi elementami (to jest krok 1). Następnie dane wyjściowe zostaną przekształcone w prawdziwy HTML, który jest wyświetlany w przeglądarce (to jest krok 2).

Po co więc przechodzić przez to wszystko, aby wygenerować wirtualny DOM? Prosta odpowiedź - to pozwala reagować szybko. Robi to za pomocą wirtualnego różnicowania DOM. Porównanie dwóch wirtualnych drzew - starego i nowego - i dokonaj tylko niezbędnych zmian w prawdziwym DOM.

Źródło z Intro To React # 2

A virtual DOM(VDOM) nie jest nową koncepcją: https://github.com/Matt-Esch/virtual-dom .

VDOM strategicznie aktualizuje DOM bez ponownego rysowania wszystkich węzłów w aplikacji jednostronicowej. Znalezienie węzła w strukturze drzewa jest łatwe, ale drzewo DOM dla aplikacji SPA może być drastycznie ogromne. Znajdowanie i aktualizowanie węzła / węzłów w przypadku zdarzenia nie jest efektywne czasowo.

VDOM rozwiązuje ten problem, tworząc wysokiej klasy abstrakcję rzeczywistej domeny. VDOM to wysokiej klasy, lekka reprezentacja drzewa rzeczywistego DOM w pamięci.

Na przykład rozważ dodanie węzła w DOM; reaguj, zachowaj kopię VDOM w pamięci

1. Utwórz VDOM z nowym stanem
2. Porównaj to ze starszym VDOM za pomocą diffing.
3. Aktualizuj tylko różne węzły w prawdziwym DOM.
4. Przypisz nowe VDOM jako starsze VDOM.

To jest krótki opis i powtórzenie Virtual DOM, często wspominanego obok ReactJS.

DOM (Document Object Model) jest abstrakcją ustrukturyzowanego tekstu, co oznacza, że ​​składa się z kodu HTML i CSS. Te elementy HTML stają się węzłami w DOM. Istnieją ograniczenia dotyczące poprzednich metod manipulowania DOM. Virtual DOM to abstrakcja dosłownego HTML DOM stworzona na długo przed stworzeniem lub użyciem Reacta, ale do naszych celów użyjemy go razem z ReactJS. Virtual DOM jest lekki i niezależny od implementacji DOM w przeglądarce. Wirtualny DOM to zasadniczo zrzut ekranu (lub kopia) modelu DOM w danym momencie. Sposobem spojrzenia na to z perspektywy deweloperów jest DOM to środowisko produkcyjne, a wirtualny DOM to środowisko lokalne (deweloperskie). Za każdym razem, gdy dane zmieniają się w aplikacji React, tworzona jest nowa reprezentacja wirtualnego DOM interfejsu użytkownika.

Najbardziej podstawową metodą potrzebną do stworzenia statycznego komponentu w ReactJS są:

Musisz zwrócić kod z metody renderowania. Musisz przekonwertować każdą klasę na className, ponieważ klasa jest słowem zastrzeżonym w JavaScript. Oprócz bardziej poważnych zmian istnieją drobne różnice między dwoma DOM, w tym trzy atrybuty pojawiające się w wirtualnym DOM, ale nie w HTML DOM (klucz, ref i niebezpiecznieSetInnerHTML).

Ważną rzeczą do zrozumienia podczas pracy z Virtual DOM jest różnica między ReactElement i ReactComponent.

ReactElement

• ReactElement to lekka, bezstanowa, niezmienna, wirtualna reprezentacja elementu DOM.
• ReactElement - jest to podstawowy typ w React i rezyduje w wirtualnym DOM.

• ReactElements mogą być renderowane do HTML DOM

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

• JSX kompiluje tagi HTML do ReactElements

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

ReactComponent

• ReactComponent - ReactComponent są składnikami stanowymi.
• React.createClass jest uważany za składnik ReactComponent.
• Za każdym razem, gdy zmienia się stan, komponent jest renderowany ponownie.

Ilekroć element ReactComponent ma zmianę stanu, chcemy jak najmniejszej zmiany w HTML DOM, tak aby ReactComponent był konwertowany do ReactElement, który można następnie wstawić do wirtualnego DOM, porównać i zaktualizować szybko i łatwo.

Kiedy React zna różnicę - jest konwertowana na kod niskiego poziomu (HTML DOM), który jest wykonywany w DOM.

To zgrabna koncepcja: zamiast bezpośrednio manipulować DOM, który jest podatny na błędy i opiera się na stanie mutowalnym, zamiast tego wyprowadzasz wartość zwaną wirtualnym DOM. Wirtualnej DOM jest następnie diffed z aktualnym stanem DOM, który generuje listę operacji DOM, które umożliwiałyby aktualny DOM wyglądają jak nowe.Te operacje są wykonywane szybko w partii.

Zaczerpnięte stąd.

Wirtualny DOM to abstrakcja HTML DOM, która selektywnie renderuje poddrzewa węzłów na podstawie zmian stanu. Dokonuje najmniejszej możliwej manipulacji DOM, aby Twoje komponenty były aktualne.

Virtual Dom tworzy jedną kopię Dom. Virtual dom jest porównywany z domem, a virtual dom aktualizuje tylko tę część w dom, która uległa zmianie. nie renderuje całego dom, tylko zmienia zaktualizowaną część dom in dom. Jest to bardzo czasochłonne, a dzięki tej funkcjonalności nasza aplikacja działa szybko.

Wszystkie odpowiedzi są świetne. Właśnie wymyśliłem analogię, która prawdopodobnie może dać metaforę świata rzeczywistego.

Prawdziwy DOM jest jak twój pokój, węzły to meble w twoim pokoju. Wirtualny DOM jest tak, jakbyśmy rysowali plan tego obecnego pokoju.

Wszyscy mamy doświadczenie w przenoszeniu mebli, jest to bardzo męczące (ta sama koncepcja co aktualizacja widoków w komputerach). Dlatego ilekroć chcemy zmienić pozycję / dodać meble (węzły), chcemy dokonać tylko bardzo potrzebnej zmiany.

Blueprint przyszedł na ratunek, aby to osiągnąć. Rysujemy nowy plan i porównujemy różnicę z oryginalnym. Dzięki temu wiemy, która część została zmieniona, a która pozostaje taka sama. Następnie dokonujemy niezbędnych zmian w prawdziwym pokoju (aktualizujemy zmienione węzły w prawdziwym DOM). Hurra.

(Niektórzy mogą pomyśleć, dlaczego musimy polegać na wirtualnym i nie porównujemy bezpośrednio prawdziwego DOM? Cóż, analogicznie, porównanie prawdziwego DOM oznacza, że ​​musisz stworzyć inny prawdziwy pokój i porównać go z oryginalnym . To po prostu zbyt kosztowne.)

zróbmy porządek i sens w tej sprawie. React (lub jakakolwiek inna biblioteka) to „warstwa” w javascript.

Nie ma czegoś takiego jak dom wirtualny, istnieje dom niepodłączony.

pozwól mi wyjaśnić w prostym javascript:

 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;

w tym momencie stworzyliśmy element Div, który nie jest pokazany na domenie, ponieważ nie jest dołączony

ale możemy uzyskać do niego dostęp, dodawać atrybuty, wartości, zmieniać itp.

kiedy zadzwonimy: (na przykład dodaj to do ciała)

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

wtedy to zobaczymy;

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