Виртуальная DOM - это облегченная копия DOM, поддерживаемая/кэшированная локально, прежде чем вставлять ее в фактическую DOM. Мы можем изменить его, как мы хотим, а затем сохранить в нашем реальном дереве DOM. Он использует эффективные алгоритмы diff для обновления изменений взад и вперед и других вариантов использования.
У нас есть метод document.createDocumentFragment(), который может быть использован в JavaScript, который также создает воображаемое дерево node объекты для вставки в DOM.
Я хотел бы знать, если у меня нет представления/компонента, который необходимо соблюдать при любом состоянии или двунаправленной привязке (например, просто визуализировать шаблон с помощью переданных опций и обрабатывать события на DOM), Virtual DOM действительно сделает разница в таких сценариях?
Или это так же хорошо, как createDocumentFragment(), если все, что ему нужно сделать, это просто визуализировать и не наблюдать за состоянием.
Как реализация виртуальной DOM отличается от createDocumentFragment(), если не наблюдается состояния?
Ответ 1
Самый простой ответ заключается в том, что NodeJS не имеет (/не будет) document.createDocumentFragment, а не document.createElement или любой такой вещи.
Точка VirtualDOM должна позволять не только крупномасштабные изменения в системах, где позже будет вноситься DOM, но и разрешать любые изменения в среде, где DOM просто не существует.
Это самая большая разница между практическим применением DocumentFragment и VirtualDOM.
Дополнительные преимущества с точки зрения конкретных экземпляров виртуализации DOM состоят в том, что некоторые библиотеки представлений (например, React) позволяют справляться с этими вещами довольно просто, по сравнению с ручной вставкой на фрагменты и их детей.
Ответ 2
Виртуальный DOM React не имеет ничего общего с DocumentFragment. Поэтому ответ на ваш вопрос назревает, что реализация различна для всех.
Если вам действительно интересно, как работает Virtual DOM и выверка в React, вы можете прочитать одну из многочисленных статей на эту тему.