This is the 27th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

preface

The knowledge sorting of React principle is to pave the way for the construction of complex applications, not for volume.

What is VirtualDOM and why is VirtualDOM Diff so effective

What is VitualDOM

Definitions given in official documents

The Virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, Representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM called reconciliation.

To put it simply, a Virtual DOM is a programming concept that stores UI nodes virtually in memory and renders them as real DOM through some library.

Official document portal

UI node abstraction

The UI node abstraction here has two meanings. The first layer abstracts real DOM nodes into virtual DOM nodes in the browser. The second layer is in the mobile application, also the corresponding UI node is abstracted into the VirtualDOM node. The result is the following characteristics:

  • Learn Once, Write Anywhere

Learn React and you’ll be able to develop Web and mobile applications. React and React Native have roughly the same basic syntax. This shows the cross-platform nature of React.

The essence of cross-platform is also building uIs through the Virtual DOM

The Virtual DOM builds the UI

Taking Web development as an example, this paper discusses the process of Virtual UI construction.

Render pages using VirtualDOM

example

class App extends Component {
    state={
        text: 'Virtual DOM'
    }
    render(){
        const {text} = this.state
        return (
            <div><span>{text}</span></div>
        )
    }
}
Copy the code

Render the value of the state variable text. React renders the Virtual DOM using the Render method to render the actual DOM. The Render method is executed each time the value of state is changed.

The React to render

Virtual DOM maps to HTMLDOM

Virtual DOM VS native DOM

Native DOM update

DOM API calls update the UI

Virtual DOM update (more complicated process)

  • Every render creates a new ‘React DOM’
  • The Virtual DOM compares the old and new ‘React DOM’ to determine how many changes to make from the old ‘DOM’
  • After determining the optimal change strategy, the DOM API is invoked to update the UI

Question: Do these additional steps on the process make Virtual DOM more inefficient?

A: Manipulating the DOM directly causes redrawing, and React already does this for us in VirtualDOM. The reason we feel emotionally that manipulating the DOM is faster is because the current example is too simple, with only two elements. If this were a website, direct manipulation of the DOM would be equivalent to a F5 refresh, while Virtual DOM manipulation would not be redrawn, which is where Virtual DOM is effective.

Let’s dive into the specifics of why Virtual DOM is efficient

Virtual DOM data structure

Virtual DOM is essentially an abstraction of HTML nodes from JS objects, that is, HTML is represented in the form of JS objects.

The page presented to the user is a complex recursive object.

// Virtual Dom pseudocode const globaldom = {tagName: 'HTML ', children: [{tagName: 'head'},{tagName: 'body', children: [{ tagName: 'div', attributes: { className:'test' } }] }] } <! - HTML pseudo code - > < HTML > < head > < / head > < body > < div class = "test" > < / div > < / body > < / HTML >Copy the code

summary

  • The Virtual DOM macro concept is an abstraction of UI nodes

  • In Web development, the Virtual DOM is conceptually an abstraction of HTML DOM nodes.

  • Virtual DOM avoids the redraw that multiple manipulations of the DOM API can cause. This is the core of VirtualDOM’s effectiveness.

  • VirtualDOM performance depends on the VirtualDOM Diff algorithm described in the next section. React compares the old VirtualDOM to the new one

PS: If you put aside actual combat experience, you can learn faster than pure theory. So talk is easy, show me the code.

Refer to the link

Official website Virtual Dom reactjs.org/docs/faq-in…

Virtual DOM Node mithril.js.org/vnodes.html

The difference between the VDom and DOM reactkungfu.com/2015/10/the…

React Performance Optimization: A brief analysis of the Virtual Dom principle

Virtual Dom and Diff algorithms