How is a virtual DOM implementation different from createDocumentFragment () if no state is observed?

Question

A virtual DOM is a lightweight copy of the DOM that is supported / cached locally before being inserted into the actual DOM. We can change it as we want, and then save it in our real DOM tree. It uses efficient diff algorithms to update changes back and forth and other use cases.
We have a document.createDocumentFragment () method that can be used in JavaScript, which also creates an imaginary tree of node objects to insert into the DOM.
I would like to know if I do not have a view / component that needs to be respected in any state or bi-directional binding (for example, just visualize the template using the passed options and handle events on the DOM), will Virtual DOM really make a difference in such scenarios?
Or is it as good as createDocumentFragment () if all he needs to do is just visualize and not observe the state.

Answer 1

The simplest answer is that NodeJS does not (/ will not) have document.createDocumentFragment , not document.createElement or any such thing.

The VirtualDOM point should allow not only large-scale changes in systems where the DOM will be introduced later, but also allow any changes in the environment where the DOM simply does not exist.

This is the biggest difference between the practical use of DocumentFragment and VirtualDOM.

An additional benefit from the point of view of specific instances of DOM virtualization is that some view libraries (like React) can handle these things quite simply compared to manually inserting them into fragments and their children.

Answer 2

The React virtual DOM has nothing to do with DocumentFragment. Therefore, the answer to your question is brewing that the implementation is different for everyone.

If you're really interested in how Virtual DOM and React reconciliation work, you can read one of the many articles on this topic.