Что такое Виртуальный ДОМ?

Давайте возьмем пример - хотя очень наивный: если у вас что-то испортилось в комнате в вашем доме, и вам нужно ее очистить, каким будет ваш первый шаг? Будете ли вы убирать свою комнату, которая перепуталась или весь дом? Ответ, безусловно, что вы будете убирать только комнату, которая требует очистки. Это то, что делает виртуальная 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 без перерисовки всех узлов в одностраничном приложении. Поиск структуры node в tress легко, но дерево DOM для приложения SPA может быть огромным. Поиск и обновление узлов node/в случае события неэффективен по времени.

VDOM решает эту проблему, создавая абстракцию ярлыка фактического dom. VDOM - это высокоуровневое представление дерева DOM на самом высоком уровне.

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

• Создайте VDOM с новым состоянием
• Сравните его со старым VDOM с помощью diffing.
• Обновление только для разных узлов в реальном DOM.
• Назначить новый VDOM как более старый VDOM.

Как работает виртуальная DOM?

Представьте, что у вас был объект, который вы моделировали вокруг человека. У него было все необходимое имущество, которое человек мог бы иметь, и отражал текущее состояние людей. Это в основном то, что React делает с DOM.

Теперь подумайте, взяли ли вы этот объект и внесли некоторые изменения. Добавлены усы, некоторые сладкие бицепсы и глаза Стива Бушеми. В Реагент-земле, когда мы применяем эти изменения, происходят две вещи. Во-первых, React запускает алгоритм diffing, который определяет, что изменилось. Второй шаг - согласование, где он обновляет DOM с результатами diff.

Как работает React, вместо того, чтобы взять реального человека и перестроить его с нуля, это изменит только лицо и руки. Это означает, что если бы у вас был текст во входе и рендеринг, если родительский элемент node не был запланирован для согласования, текст остался бы без изменений.

Поскольку React использует поддельный DOM, а не настоящий, он также открывает новую интересную возможность. Мы можем визуализировать эту поддельную DOM на сервере, а также стрелу, ссылающуюся на серверную сторону.

Ссылка

Это краткое описание и повторение виртуального DOM, часто упоминаемого наряду с ReactJS.

DOM (Document Object Model) представляет собой абстракцию структурированного текста, что означает, что он сделан из HTML-кода и css. Эти HTML-элементы становятся узлами в DOM. Существуют ограничения предыдущих методов манипулирования DOM. Virtual DOM - это абстракция буквального HTML DOM, созданного задолго до того, как React был создан или использован, но для наших целей мы будем использовать его совместно с ReactJS. Виртуальный DOM является легким и отстранен от реализации DOM в браузере. Виртуальный DOM по существу является снимком экрана (или копией) DOM в данный момент времени. Способ взглянуть на это с точки зрения разработчиков - это DOM - это производственная среда, а Virtual DOM - локальная (dev) среда. Каждый раз, когда данные изменяются в приложении 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, который затем может быть вставлен в виртуальную DOM, сравниваться и обновляться быстро и легко.

Когда React знает, что diff - он преобразован в низкоуровневый (HTML DOM) код, который выполняется в DOM.

Virtual DOM - это абстракция HTML DOM, которая выборочно отображает поддеревья узлов на основе изменений состояния. Он обеспечивает минимальное количество манипуляций с DOM, чтобы поддерживать ваши компоненты в актуальном состоянии.

Это изящная концепция: вместо того, чтобы напрямую манипулировать DOM, который подвержен ошибкам и зависит от изменчивого состояния, вместо этого вы выводите значение, называемое Virtual DOM. Виртуальный DOM затем сравнивается с текущим состоянием DOM, которое генерирует список операций DOM, которые сделали бы текущий DOM похожим на новый. Эти операции применяются быстро в пакете.

Взято отсюда.