Why does react introduce virtual dom?

Because a large number of actual DOMs will be defined in react, a large number of actual DOMs need to be operated frequently, which will cause a serious decrease in access performance. Therefore, virtual DOMs need to be introduced to avoid the consequences of frequent DOM operations. To solve the problem of performance degradation, virtual DOM can better improve page performance.

The operating environment of this tutorial: Windows 10 system, react16.4.0 version, Dell G3 computer.

Why react should introduce virtual dom

One of the cores of the React framework is the virtual DOM. Compared with the actual DOM, the virtual DOM can better improve page performance.

Why use virtual DOM?

Usually when designers design the UI of a traditional HTML web page, they will define a number of DOM elements in the page. These DOM elements are the so-called actual DOM. The actual DOM is responsible for carrying appearance performance and data changes. Any change in appearance or update of data information must be fed back to the UI, and must be achieved by operating the actual DOM. But for complex page UIs, a large number of actual DOMs are often defined. Frequently operating a large number of actual DOMs will often lead to a serious decline in access performance, and the user experience will also deteriorate. Therefore, the React framework specifically introduces a virtual DOM mechanism to address this phenomenon to avoid the performance degradation caused by frequent DOM operations. Descent problem.

React DOM is similar to a collection of related actual DOMs, which is different from the traditional concept of DOM elements. It should be more appropriate to understand it as a DOM component, so the React framework ReactDOM is called virtual DOM.

Create virtual DOM

Pure js method React.createElement('h1',{},title)

JSX method

{title}

Let’s feel the difference between actual DOM and virtual DOM writing

Actual DOM

    <div id="example"></div>
    <script>
    // 实际DOM
        // 定位到div
        const divDOM = document.getElementById(&#39;example&#39;);
        // 创建DOM控件
        const jsSpan = document.createElement(&#39;span&#39;);
        const jsH3 = document.createElement(&#39;h3&#39;);
        jsH3.innerHTML = &#39;实际DOM&#39;;
        const jsP = document.createElement(&#39;p&#39;);
        jsP.innerHTML = &#39;Hello World!&#39;;
        jsSpan.appendChild(jsH3);
        jsSpan.appendChild(jsP);
        divDOM.appendChild(jsSpan);
    </script>

Virtual DOM

Before using the React framework, you need to import the React js library in advance

    <!-- react的核心库 -->
    <script src="../React/react.development.js"></script>
    <!-- react的DOM库 -->
    <script src="../React/react-dom.development.js"></script>
    <!-- 编译器 将ES6转换为ES5 -->
    <script src="../React/babel.min.js"></script>

    <div id="example"></div>
    <script type="text/babel">// type必须有
    // 虚拟DOM
        const divReact = document.getElementById(&#39;example&#39;);
        const reactH3 = React.createElement(&#39;h3&#39;,{},&#39;虚拟DOM&#39;);
        const reactP = React.createElement(&#39;p&#39;,{},&#39;Hello World!&#39;);
        const reactSpan = React.createElement(&#39;span&#39;,{},reactH3,reactP);
        ReactDOM.render(reactSpan,divReact);// 将reactSpan插入divReact
    </script>

Recommended learning: "react video tutorial"

The above is the detailed content of Why does react introduce virtual dom?. For more information, please follow other related articles on the PHP Chinese website!