Вопрос по reactjs, javascript – Что такое Виртуальный ДОМ?

103

Недавно я посмотрел на Facebookреагировать фреймворк. Он использует концепцию под названием «Виртуальный DOM», которую я не совсем понял.

Что такое виртуальный DOM? Каковы преимущества?

Я согласен с вышеизложенным мнением в отношении модерации. Более того, я считаю, что это очень актуальный и полезный вопрос. На «Виртуальный ДОМ» часто ссылаются, но редко определяют. btiernay
Я не мог понять это с моим ограниченным веб-опытом, пока не прочиталscotch.io учебник, чтобы начать. Они проделали большую работу. Rachael
Я считаю, что Virtual DOM говорит об узлах, которые не находятся в нормальном DOM. Derek 朕會功夫

Ваш Ответ

7   ответов
12

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

Это шаг между вызываемой функцией рендера и отображением элементов на экране.

Метод render компонента возвращает некоторую разметку, но это еще не окончательный HTML. Это представление в памяти того, что станет реальными элементами (это шаг 1). Затем этот вывод будет преобразован в настоящий HTML-код, который отображается в браузере (это шаг 2).

Так зачем проходить через все это для создания виртуального DOM? Простой ответ - это то, что позволяет быстро реагировать. Это делается с помощью виртуального DOM-диффузии. Сравнение двух виртуальных деревьев - старого и нового - и внесение только необходимых изменений в реальный DOM.

Источник от вступления до реакции № 2

6

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

VDOM - стратегически обновлять DOM без перерисовки всех узлов в одностраничном приложении. Найти узел в структуре Tress легко, но дерево DOM для приложения SPA может быть очень большим. Поиск и обновление узла / узлов в случае события неэффективно по времени.

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

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

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

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

1

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

Взято изВот.

24

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

Обычный JS проходит или обрабатывает весь DOM, а не только ту часть, которая требует изменений.

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

145

представляющих часть DOM. Например, вместо создания фактического элемента DIV, содержащего элемент UL, он создает объект React.div, который содержит объект React.ul. Он может очень быстро манипулировать этими объектами, не касаясь реального DOM и не проходя через DOM API. Затем, когда он рендерит компонент, он использует этот виртуальный DOM, чтобы выяснить, что ему нужно делать с реальным DOM, чтобы два дерева соответствовали друг другу.

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

Что вы подразумеваете под «для этого не нужны все тяжелые детали, которые входят в настоящий DOM» - тяжелые части? Ajay S
Может ли это использоваться для всего DOM, а не только для его части? hipkiss
Это в основном абстракция над абстракцией, которая в конце концов реагирует на поиск ссылки в дереве объектной модели, выбирает реальный узел в html и возиться с ним. Звук отличныйvirtual dom, но в этом нет ничего причудливого и преувеличенного. syarul
@ AjayS манипулировать реальным DOM не очень эффективно, поэтому он называется тяжелым API. Манипулировать объектами в памяти намного быстрее и эффективнее, обновление измененной части DOM также более эффективно и быстрее. jcubic
Этот ответ следует добавить в официальные документы. Ishan Patel
2

часто упоминаемое вместе с ReactJS.

DOM (объектная модель документа) - это абстракция структурированного текста, что означает, что он состоит из HTML-кода и CSS. Эти элементы HTML становятся узлами в DOM. Существуют ограничения для предыдущих методов манипулирования DOM. Виртуальный DOM - это абстракция буквального HTML DOM, созданного задолго до того, как React был создан или использован, но для наших целей мы будем использовать его совместно с ReactJS. Virtual DOM легок и отделен от реализации DOM в браузере. Виртуальный DOM - это, по сути, скриншот (или копия) DOM в определенный момент времени. Если посмотреть на это с точки зрения разработчиков, DOM - это производственная среда, а Virtual DOM - локальная (dev) среда. Каждый раз, когда данные изменяются в приложении React, создается новое представление пользовательского интерфейса Virtual DOM.

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

Вы должны вернуть код из метода рендеринга. Вы должны преобразовать каждый класс в className, так как класс является зарезервированным словом в JavaScript. Помимо более существенных изменений, между двумя DOM есть небольшие различия, включая три атрибута, которые появляются в Virtual DOM, но не в HTML DOM (key, ref и dangerouslySetInnerHTML).

При работе с Virtual DOM важно понимать разницу между ReactElement и ReactComponent.

ReactElement

ReactElement - это легкое, неизменяемое, неизменное, виртуальное представление элемента DOM.ReactElement - это основной тип в React, который находится в Virtual 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 знает diff - он преобразуется в низкоуровневый (HTML DOM) код, который выполняется в DOM.

Похожие вопросы