What is Vistual DOM

In many UI frameworks, we can build applications using the Render function, such as the following React component:

function HelloMessage(props) {
  return (
    <div className="greeting">
      Hello {props.name}
    </div>
  );
}
Copy the code

You can also do without JSX:

function HelloMessage(props) {
  return React.createElement(
    'div',
    { className: 'greeting' },
    'Hello ',
    props.name
  );
}
Copy the code

The result is the same: an object. This object is Vistual DOM. When a component creates a new object each time it is updated, React compares old and new objects in a process called Reconcile. The result of a difference comparison (DIFF) is a commit update, which is the actual DOM element applied to the page.

Therefore, Vistual DOM is essentially a JavaScript object describing the real DOM and forming a mapping relationship with the real DOM.

Why does React use Vistual DOM

React uses the Vistual DOM as a layer mapping of the real DOM. Why does React need this layer mapping? The React update mechanism is a “once update, whole update” mechanism. Each component state change is an alignment of the entire React application state. That’s the problem: actual page updates are often small element changes that cause a redraw of the entire page, with a significant performance cost. React uses Vistual DOM as a buffer layer, filters necessary updates through JS calculations, and then hands them to the browser to update the page.

Is Vistual DOM really fast

A lot of people might think React uses Vistual DOM because it’s faster than the real DOM, but that’s the biggest misconception about Vistual DOM, We can trace it back to a 2013 speech by Pete Hunt, a former React core team member, in Rethinking Best Practices.

This is actually extremely fast, primarily because most DOM operations tend to be slow. There’s been a lot of performance work on the DOM, but most DOM operations tend to drop frames.

This is actually quite fast, mainly because most DOM operations tend to be slow. There is a lot of performance work in the DOM, but most DOM operations tend to drop frames.

However, Vistual DOM diff is an add-on operation to React. It will eventually call the native DOM API to update the page.

The point is that Pete Hunt explains later:

React is not magic. Just like you can drop into assembler with C and beat the C compiler, you can drop into raw DOM operations and DOM API calls and beat React if you wanted to. However, using C or Java or JavaScript is an order of magnitude performance improvement because you don’t have to worry about the specifics of the platform. With React you can build applications without even thinking about performance and the default state is fast.

React is not magic. Just as you can use C to go into an assembler and beat the C compiler, you can go into raw DOM operations and DOM API calls and beat React if you like. However, using C or Java or JavaScript is an order of magnitude performance improvement because you don’t have to worry about platform details. With React, you can even build applications without considering performance, and the default state is fast.

The comparison between the performance of Vistual DOM and that of the real DOM requires a more dialectical view of the scene. The creation and insertion of the real DOM is expensive, and the Vistual DOM diff itself is not free, but the JS diff is still much cheaper than the creation and update of the real DOM node. React simply replaces the cost of unnecessary DOM updates with the cost calculated by Vistual DOM diff. The cost relationship between the two is not absolute, but dynamic.

It’s worth clarifying: Vistual DOM isn’t absolutely fast, it’s fast enough. React gives you decent performance even if developers don’t do manual optimizations. Therefore, the ceiling of Vistual DOM performance lies in diff algorithm optimization (batching batch, etc.) plus developer manual optimization (shouldComponentUpdate, Memo, etc.).

Vistual DOM value

We need to look at the value of Vistual DOM from the React level as follows:

  • Abstract rendering process, can encapsulate a large number of low-level rendering operations, increasing cross-platform capabilities

    The underlying APIS involved in the real DOM are quite complex, such as creating a div element: document.createElement(‘div’), creating an SVG element: SVG document. CreateElementNS (‘ http://www.w3.org/2000/svg ‘, ‘ ‘), optical element to create, to distinguish different ways to create different elements. With Vistual DOM, the framework has more control over the rendering process, as simple as: Vistual DOM -> render -> target platform element node. The advantage of Vistual DOM is that the framework can simplify all these low-level rendering operations and encapsulate the rendering process into independent modules, such as ReactDom and ReactNative. At the same time, because Vistual DOM is pure JS, the same React component can run on multiple platforms, such as the Node side, so we can also implement isomorphic applications (SSR).

  • Functional programming

    Vistual DOM opens the door to functional (declarative), i.e. UI = f(props), for more readable code.

    / / imperative
const div = document.createElement('div')
div.className = 'greeting'
div.textContent = 'Hello World'
​
/ / the declarative
function HelloMessage(props) {
  return (
    <div className="greeting">
      Hello World
    </div>
  );
}
Copy the code

conclusion

Based on the above points, React goes the “update once, update whole” route, introducing Vistual DOM to achieve fast enough performance while bringing the benefits of abstract rendering processes, cross-platform, and functional programming. React has shifted our development direction from building pages “for the real DOM” to building pages “for the Vistual DOM”, which already works for most of our development scenarios.