Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "what is the reason for the introduction of virtual dom into react?", so the editor summarizes the following, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what are the reasons for introducing virtual dom into react?"

Because a large number of actual dom will be defined in react, which requires frequent operation of a large number of actual dom, which will lead to a serious decline in access performance, so it is necessary to introduce virtual dom to avoid the performance degradation caused by frequent dom operations. Virtual dom can better improve page performance.

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

Why does react introduce Virtual dom

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

Why use virtual DOM?

Usually when designers design the UI of traditional HTML web pages, they will define several DOM elements in the page, these DOM elements are the so-called actual DOM. The actual DOM is responsible for carrying the appearance and data changes. Any change in appearance or update of data information has to be fed back to the UI, which needs to be realized by operating the actual DOM. But for complex page UI, a large number of actual DOM are often defined. Frequent operation of a large number of actual DOM will often lead to a serious decline in access performance, and the user experience will also become worse. Therefore, the React framework introduces a virtual DOM mechanism specifically for this phenomenon to avoid the performance degradation caused by frequent DOM operations.

ReactDOM is similar to a collection of related actual DOM together, it is different from the traditional concept of DOM elements, it should be more appropriate to understand it as DOM components, so the React framework calls ReactDOM virtual DOM.

Create a virtual DOM

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

JSX mode {title}

Let's feel the difference between real DOM and virtual DOM writing

Actual DOM

/ / actual DOM / / navigate to div const divDOM = document.getElementById ('example'); / / create DOM control const jsSpan = document.createElement (' span'); const jsH3 = document.createElement ('h4'); jsH3 [XSS _ clean] =' actual DOM'; const jsP = document.createElement ('p'); jsP [XSS _ clean] = 'Hello Worldwide' JsSpan.appendChild (jsH3); jsSpan.appendChild (jsP); divDOM.appendChild (jsSpan)

Virtual DOM

You need to import React's js library in advance before using the React framework

/ / type must have / / Virtual DOM const divReact = document.getElementById ('example'); const reactH3 = React.createElement (' h4pm, {}, 'Virtual DOM'); const reactP = React.createElement (' paired, {}, 'Hello Worldwide'); const reactSpan = React.createElement ('span', {}, reactH3,reactP); ReactDOM.render (reactSpan,divReact) / / inserting reactSpan into divReact is the content of this article about "Why react is introduced into virtual dom". I believe everyone has a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about related knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.