This is the 7th day of my participation in Gwen Challenge.More article challenges

Premise:

The next learning goal is to write a toy-react

  • What is the Virtual DOM
  • How does Virtual DOM improve the performance of DOM manipulation
  • How do I create a Virtual DOM object and convert it into a real DOM object
  • And how to compare Virtual DOM to find differences and minimize DOM updates
  • How do I render function components and class components
  • How do I call the life cycle functions of a class component
  • You also need to be familiar with how to get an element or instance object of a component in a component through the REF attribute

We will implement todolist through Toy-React, which will give us a better understanding of how the Diff algorithm and Virtual DOM can add, delete, change and check DOM objects to improve the performance of JavaScript to operate DOM objects. The Toy-React template and the Toy-React project will be posted at the end of the article. Start learning!!

What exactly is JSX

It is important to understand what JSX is when we learn about Virtual DOM. JSX looks like HTML, but it is not HTML. JSX is actually JavaScript code, a syntax extension of JavaScript created by the React team to describe the user interface. It was created to make it easier for React developers to describe the user interface in JavaScript, but browsers don’t know JSX and can’t implement it. So Babel compiles JSX code before JSX executes, compiling it into JavaScript code that the browser can execute!

// This is JSX
<div className="container">
    <h3>Hello React</h3>
    <p>React is great</p>
</div>
Copy the code

Babel compiled

React.createElement (
    "div",
    {
        className: "container"
    },
    React.createElement("h3".null."Hello React"),
    React.createElement("p".null."React is great"))Copy the code

The first argument to the react. createElement method is the node type, and the value is a string of node names. The second argument is the node property. The third and subsequent arguments are all children of the current node.

The react. createElement method is used to create a Virtual DOM object, which is essentially a JavaScript object. This is an implementation of using JavaScript objects to describe DOM objects. React. CreateElement returns the VirtualDOM. React converts the VirtualDOM into a real DOM object and displays the real DOM on the page. This is the JSX transformation process

React developers would be too cumbersome to write the user interface like this.

Can we use Babel REPL to see what JSX conversion js code looks like

DOM manipulation problems

DOM manipulation with scripts is expensive. An apt analogy is to imagine DOM and JavaScript as islands, connected by a toll bridge. Each time JS accesses the DOM, it has to pass through this bridge and pay a “toll fee”. The more times it accesses the DOM, the higher the fee. Therefore, the recommended course of action is to minimize the number of bridge crossings and try to stay on ECMAScript Island. It is essential for modern browsers to operate DOM with JavaScript, but this action is very performance consuming, because it is much slower to operate DOM objects with JavaScript than to operate ordinary objects with JavaScript. If the page is frequently operated with DOM, the page will be jammed and the application fluency will be reduced. Makes for a very bad experience.

Most JavaScript frameworks make this slow operation worse by updating the DOM far more than necessary. For example, if you have a list of items and you change just one item in the list, most JavaScript frameworks will rebuild the entire list, which is ten times more work than necessary. Low efficiency of renewal has become a serious problem

React’s virtual DOM is valuable for this reason. It creates virtual DOM’s and stores them. Whenever the state changes, it creates new virtual nodes to compare with the previous ones and render the changed parts. It has greatly improved the efficiency of JavaScript to manipulate the DOM. What is Virtual DOM

What is the Virtual DOM

A Virtual DOM object is actually a JavaScript object. JavaScript objects are used to describe information about the DOM object, such as what type the DOM object is, what properties it has, and what child elements it has.

You can also think of a Virtual DOM object as a copy of a DOM object, but not directly displayed on the screen

<div className="container">
  <h3>Hello React</h3>
  <p>React is great </p>
</div>
Copy the code

The following is the virtual DOM object. The type attribute represents the type information of the node, the props attribute represents the property information of the node, and the children attribute represents the child node information of the node. The text information for the node is also textContent inside the props property. Can correspond to the above JSX, see the corresponding virtral DOM object basic structure

{
  type: "div",
  props: { className: "container" },
  children: [
    {
      type: "h3",
      props: null,
      children: [
        {
          type: "text",
          props: {
            textContent: "Hello React"
          }
        }
      ]
    },
    {
      type: "p",
      props: null,
      children: [
        {
          type: "text",
          props: {
            textContent: "React is great"
          }
        }
      ]
    }
  ]
}
Copy the code

After understanding Virtual DOM, how does Virtual DOM improve efficiency

How does Virtual DOM improve efficiency

The core principle is to minimize DOM manipulation, pinpoint the DOM objects that have changed, and update only the parts that have changed.

After React creates a DOM object for the first time, it creates a Virtual DOM object for each DOM object. React updates all Virtual DOM objects before DOM objects are updated. React will compare the updated Virtual DOM to the original one to find out what has changed. React will update the changed part to the real DOM object. React will only update the necessary part. This improves the performance of JavaScript in manipulating the DOM. Manipulating JavaScript objects when manipulating virtualDOM is very fast and almost negligible, because Virtual DOM objects update and compare only in memory and do not render anything in the view, so this part of the performance cost is negligible.

React will compare the virtral DOM before the update with the Virtual DOM after the update, and find that two nodes are deleted in the whole DOM tree. When React updates the Real DOM object, only these two nodes will be deleted. Instead of updating the entire DOM tree, DOM manipulation performance is improved

Before the update JSX

<div id="container">
	<p>Hello React</p>
</div>
Copy the code

The updated JSX

<div id="container">
	<p>Hello Angular</p>
</div>
Copy the code

It can be seen that the text inside the P tag has changed. Let’s see how the virtual DOM is compared

Virtual DOM before update

const before = 
  type: "div".props: { id: "container" },
  children: [{type: "p".props: null.children: [{type: "text".props: { textContent: "Hello React"}}]}Copy the code

The updated virtual DOM


const after = {
  type: "div".props: { id: "container" },
  children: [{type: "p".props: null.children: [{type: "text".props: { textContent: "Hello Angular"}}]}Copy the code

The two virtual DOM’s are compared. It’s easy to see that only the child node’s content changes. React only updates the changed content node to the real DOM, which improves DOM manipulation efficiency.

summary

Now we really know what a Virtual DOM object is, which is actually a JavaScript object, a way of using JavaScript objects to describe real DOM objects, and how it makes manipulating the DOM more efficient, By comparing the new and old Virtual DOM objects to find out the differences, only the differences of DOM objects are finally updated, so as to improve the efficiency of JavaScript DOM manipulation.

Ok today, we will temporarily learn, you can experience the principle of Virtual, the third day we see how to create a Virtual DOM object, please look forward to!!