Що таке віртуальний DOM?

Нещодавно я переглянув Facebook React рамки . Він використовує концепцію під назвою "Віртуальна DOM", яку я насправді не розумів.

Що таке віртуальний DOM? Які переваги?

React створює дерево користувацьких об'єктів, що представляють частину DOM. Наприклад, замість створення фактичного елемента DIV, що містить елемент UL, він створює об'єкт React.div, який містить об'єкт React.ul. Він може дуже швидко маніпулювати цими об'єктами, фактично не торкаючись реального DOM або переглядаючи API DOM. Потім, коли він відображає компонент, він використовує цей віртуальний DOM, щоб з'ясувати, що йому потрібно робити з реальним DOM, щоб зрівняти два дерева.

Ви можете думати про віртуальний DOM як креслення. Він містить усі деталі, необхідні для побудови DOM, але оскільки для нього не потрібні всі важкі частини, які переходять у справжній DOM, його можна створити та змінити набагато простіше.

Візьмемо приклад - хоч і дуже наївний: якщо у вас в кімнаті щось заплуталося і вам потрібно прибрати, що буде вашим першим кроком? Чи будете ви прибирати свою кімнату, яка заплутана, або весь будинок? Відповідь, безумовно, ви будете прибирати лише приміщення, яке потребує прибирання. Ось що робить віртуальний DOM.

Звичайний JS проходить або робить цілий DOM замість надання лише тієї частини, яка потребує змін.

Тому щоразу, коли у вас є якісь зміни, як ви хочете додати ще одну <div> до свого DOM, тоді буде створений віртуальний DOM, який фактично не вносить жодних змін у фактичний DOM. Тепер із цим віртуальним DOM ви будете перевіряти різницю між цим та вашим поточним DOM. І <div>додаватиметься лише та частина, яка відрізняється (в даному випадку нова ), замість того, щоб повторно виводити цілий DOM.

Що таке віртуальний DOM?

Віртуальна DOM - це уявлення в пам'яті реальних елементів DOM, що генеруються компонентами React, перш ніж будь-які зміни будуть внесені на сторінку.

Це крок, який відбувається між викликаною функцією візуалізації та відображенням елементів на екрані.

Метод візуалізації компонента повертає деяку розмітку, але це ще не остаточний HTML. Це уявлення в пам'яті того, що стане реальними елементами (це крок 1). Тоді цей вихід буде перетворений у справжній HTML, який відображається у браузері (це крок 2).

То чому б пройти все це для створення віртуального DOM? Проста відповідь - це те, що дозволяє швидко реагувати. Це робиться за допомогою віртуального DOM, що відрізняється. Порівнюючи два віртуальних дерева - старе та нове - і внести лише необхідні зміни у справжній DOM.

Джерело з Intro To React # 2

A virtual DOM(VDOM) - це не нова концепція: https://github.com/Matt-Esch/virtual-dom .

VDOM стратегічно оновлює DOM, не перемальовуючи всі вузли в одній сторінці програми. Знайти вузол у структурі дерева досить просто, але дерево DOM для додатка SPA може бути надзвичайно величезним. Пошук та оновлення вузла / вузлів у випадку події не є ефективним у часі.

VDOM вирішує цю проблему, створюючи високу абстракцію фактичного купола. VDOM - це полегшене зображення дерева пам'яті високого рівня фактичної DOM.

Наприклад, розгляньте можливість додавання вузла в DOM; реагуйте зберегти копію VDOM в пам'яті

1. Створіть VDOM з новим станом
2. Порівняйте його зі старими VDOM, використовуючи різні.
3. Оновіть лише різні вузли в реальному домені.
4. Призначте новий VDOM як старший VDOM.

Це короткий опис та повторення Віртуального DOM, який часто згадується поряд з ReactJS.

DOM (Document Object Model) - це абстракція структурованого тексту, що означає, що він складається з HTML-коду та css. Ці елементи HTML стають вузлами в DOM. Існують обмеження щодо попередніх методів маніпулювання DOM. Virtual DOM - це абстракція буквального HTML DOM, створеного задовго до створення або використання React, але для наших цілей ми будемо використовувати його у співпраці з ReactJS. Віртуальний DOM має невелику вагу і відокремлений від реалізації DOM у браузері. Віртуальна DOM по суті є скріншотом (або копією) DOM у визначений час. Спосіб подивитися на це з точки зору розробників - це DOM - це виробниче середовище, а Virtual DOM - місцеве (розроблювальне) середовище. Щоразу, коли дані змінюються в додатку React, створюється нове віртуальне представлення DOM користувальницького інтерфейсу.

Найбільш основний метод, необхідний для створення статичного компонента в ReactJS:

Ви повинні повернути код з методу візуалізації. Ви повинні перетворити кожен клас у className, оскільки клас є зарезервованим словом у JavaScript. Крім більш значних змін, існують незначні відмінності між двома DOM, включаючи три атрибути, що відображаються у віртуальному DOM, але не в HTML DOM (ключ, ref та небезпечно SetInnerHTML).

Важлива річ, яку потрібно розуміти під час роботи з Virtual DOM, - це різниця між ReactElement та ReactComponent.

ReactElement

• ReactElement - це легке, без громадянства, незмінне віртуальне зображення елемента DOM.
• ReactElement - це основний тип у React і знаходиться у віртуальній DOM.

• ReactElements можна передати у HTML DOM

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

• JSX компілює теги HTML у ReactElements

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

ReactComponent

• ReactComponent - ReactComponent є компонентами, що належать до стану.
• React.createClass вважається ReactComponent.
• Щоразу, коли зміни стану, компонент передається.

Щоразу, коли ReactComponent має зміну стану, ми хочемо якнайменше змінити HTML DOM, щоб ReactComponent перетворився на ReactElement, який потім можна буде вставити у Virtual DOM, порівняти та оновити швидко та легко.

Коли React знає різницю - він перетворюється на низькорівневий (HTML DOM) код, який виконується в DOM.

Це акуратне поняття: замість того, щоб безпосередньо маніпулювати DOM, який є схильним до помилок і покладається на стан, що змінюється, ви виводите значення, яке називається Virtual DOM. Virtual DOM потім порівняти при з поточним станом DOM, який генерує список операцій DOM , які зробили б поточний вид DOM , як новий. Ці операції застосовуються швидко в партії.

Взято звідси.

Віртуальна DOM - це абстракція HTML DOM, яка вибірково надає підкреслення вузлів на основі змін стану. Це робить найменшу кількість маніпуляцій DOM, щоб підтримувати свої компоненти в актуальному стані.

Віртуальний Дом створюється однією копією Дому. Віртуальний дім порівнюється з домом, а віртуальний дом оновлює лише ту частину дому, яка змінилася. це не візуалізація всього дому, він просто змінив оновлену частину дому в домі. Це дуже забирає багато часу, і завдяки цій функціональності наш додаток працює швидко.

Усі відповіді чудові. Я щойно придумав аналогію, яка, ймовірно, може дати метафору реального світу.

Справжній DOM схожий на вашу кімнату, вузли - це меблі у вашій кімнаті. Віртуальний DOM такий, як ми малюємо креслення цього поточного приміщення.

У всіх нас є досвід переміщення меблів, це дуже втомлює (та сама концепція, як оновлення поглядів на комп’ютерах). Тому щоразу, коли ми хочемо змінити положення / додати меблі (вузли), ми хочемо зробити лише дуже необхідні зміни.

План допомоги прийшов на допомогу, щоб досягти цього. Намалюємо новий креслення і порівняємо різницю з початковою. Це дає нам знати, яка частина була змінена і яка частина залишається такою ж. Потім робимо необхідні зміни в реальній кімнаті (оновлюємо змінені вузли на реальній DOM). Ура.

(Дехто може подумати, чому ми повинні покладатися на віртуальний і не порівнювати безпосередньо реальний DOM? . Це занадто дорого.)

давайте внесемо порядок і сенс у цьому питанні. React (або будь-яка інша бібліотека) - це "шар" на JavaScript.

Немає такого поняття, як віртуальний дім, немає неприв’язаного дому.

дозвольте мені пояснити простим 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;

в цей момент ми створили Div, який не показаний на домі, тому що він не додається

але ми можемо отримати доступ до нього, додавати атрибути, значення, змінювати тощо.

як тільки ми зателефонуємо: (наприклад, додайте його до тіла)

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

тоді ми це побачимо;

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