If your project uses React, do you know how to optimize performance? Do you know why React makes you write shouldComponentUpdate or React.PureComponent? Do you know why React asked you to write Immutable Data Structures? Do you know why React requires you to add a key to each subitem when rendering a list? Do you know why React makes you write the && operator or ternary operator instead of the if in conditional rendering?

All the answers are in the Virtual DOM! As long as you follow me through this handwritten Virtual DOM series, all the above questions will be answered and you will be in the React expert camp from now on!

Now when we talk about Virtual DOM (VDOM), we usually talk about React in a bundle. But VDOM wasn’t actually created by React, who took the concept and put it together to become one of the most popular frameworks on the front end.

What is VDOM?

First of all, we all know what DOM(Document Object Model) is, simply put, an HTML Document is abstracted into a tree structure. VDOM is a simplified version of JS object that abstracts the DOM one level further. This object also has some properties on the DOM, such as ID, class, etc., but it exists completely outside the browser.

Why use VDOM?

With the development of front-end technology, web applications are becoming larger and larger, and DOM trees are becoming more complex. When we want to modify an element in the DOM, we need to first look for that element, and then we can modify it. And if we change the DOM a lot, every time the DOM changes the browser has to repaint the page, and sometimes even reflow the page, which can be very bad for performance.

How does React solve this problem with VDOM?

  1. First, when we want to modify data in React, we call the setState method provided by React to modify the data;
  2. React generates a new VDOM from the new data. Because VDOM is essentially just a normal JS object, the process is fast;
  3. Then React takes the newly generated VDOM and compares it with the previous VDOM (Diff algorithm) to find out the differences (add, delete, modify) and generate patches one by one.
  4. Finally React prints these patches to the DOM all at once to complete the view changes.

The principle is intuitive, but how does React actually work in code? One of the key steps is how does React diff? Understanding the internals of the implementation is crucial to writing higher-performing code with React. So today I’m going to walk you through how to implement VDOM from scratch.

Our blueprints

We’re going to do it in a similar way to React

  1. Use JSX to write components;
  2. Use Babel to convert JSX to pure JS (similar to Hyperscript).
  3. Convert Hyperscript to our VDOM;
  4. Render VDOM to the page to form the real DOM;
  5. Update the data manually and trigger the update view manually (this part is done by React and is independent of the VDOM implementation, so let’s simulate it manually);
  6. Repeat steps 2 and 3 to get a new VDOM;
  7. Diff the new VDOM and the old VDOM to obtain patches that need to modify the real DOM;
  8. The patches are applied to the DOM at once, and only the areas of the DOM that need to be changed are updated.

Now we begin to formally enter the code section, I suggest you open the editor to follow me step by step to type the code. Where do you find a blogger who teaches you how to code by holding your hand? Still not seize the opportunity of a lifetime? ?????

The project structure

  1. index.html
  2. Index.js (all the logic is written in this file)
  3. .babelrc (configuration page for Babel)
  4. package.json
  5. Compiled. Js – This file is compiled by Babel and does not need to be written by yourself.

You can create a new directory, and then create four files, 1 through 4

Implementing a Virtual DOM from scratch