虚拟Dom是创建Dom的一个副本。虚拟dom与dom比较，虚拟dom只更新dom中发生变化的部分。它没有渲染整个dom它只是改变了dom中dom的更新部分。这是非常耗时的，从这个功能，我们的应用程序工作得很快。

React在内存中保留了真实DOM的轻量级表示，这被称为虚拟DOM。当一个对象的状态改变时，虚拟DOM只改变真实DOM中的那个对象，而不是更新所有对象。

虚拟Dom是创建Dom的一个副本。虚拟dom与dom比较，虚拟dom只更新dom中发生变化的部分。它没有渲染整个dom它只是改变了dom中dom的更新部分。这是非常耗时的，从这个功能，我们的应用程序工作得很快。

虚拟DOM是HTML DOM的抽象，它根据状态变化选择性地呈现节点的子树。它尽可能少地进行DOM操作，以使组件保持最新状态。

这是对ReactJS中经常提到的Virtual DOM的简要描述和重申。

The DOM (Document Object Model) is an abstraction of structured text, which means it is made of HTML code and css. These HTML elements become nodes in the DOM. There are limitations to the previous methods of manipulating the DOM. Virtual DOM is an abstraction of the literal HTML DOM created well before React was created or used, but for our purposes we will use it in concert with ReactJS. The Virtual DOM is lightweight and detached from the DOM implementation in the browser. The Virtual DOM is essentially a screenshot (or copy) of the DOM at a given time. A way to look at it from a developers perspective is the DOM is the production environment and the Virtual DOM is the local (dev) environment. Each time the data changes in a React app a new Virtual DOM representation of the user interface is created.

为了在ReactJS中创建静态组件，最基本的方法是:

必须从呈现方法返回代码。 您必须将每个类转换为className，因为class是JavaScript中的保留字。 除了更大的变化之外，两个DOM之间还有一些小差异，包括虚拟DOM中出现而HTML DOM中没有出现的三个属性(key、ref和dangerlysetinnerhtml)。

在使用Virtual DOM时，需要理解的一件重要事情是ReactElement和ReactComponent之间的区别。

ReactElement

ReactElement是DOM元素的轻量级、无状态、不可变的虚拟表示。 ReactElement -这是React中的主要类型，位于Virtual DOM中。 ReactElements可以被渲染成HTML DOM var root = React.createElement('div'); ReactDOM。呈现(根,. getelementbyid(例子)); JSX将HTML标记编译为ReactElements Var root = <div/>; ReactDOM。呈现(根,. getelementbyid(例子));

ReactComponent

ReactComponent——ReactComponent是有状态的组件。 反应。createClass被认为是一个ReactComponent。 每当状态改变时，组件都会被重新呈现。

每当ReactComponent发生状态变化时，我们希望对HTML DOM的更改尽可能少，这样ReactComponent就可以转换为ReactElement，然后ReactElement可以插入到Virtual DOM中，快速方便地进行比较和更新。

当React知道diff时，它会被转换为低级代码(HTML DOM)，并在DOM中执行。

React的结构单元是组件。每个组件都有一个状态。每当组件的状态发生变化时，React都会修改V-DOM树。然后，将最新版本的V-DOM与以前版本的V-DOM进行比较。经过这个计算(差分)后，当React知道哪些V-DOM对象被更改时，它只修改R-DOM中的那些对象。

通俗地说，

假设我在DOM中添加了一个div元素，React会在不改变整个R-DOM的情况下创建一个V-DOM的副本。这个新创建的V-DOM与旧的V-DOM进行了比较。它只更新实际DOM中的不同节点。现在新创建的V-DOM被视为即将到来的V-DOM的前一个版本。

注:1。因此，与普通js不同的是，V-DOM创建了全新版本，R-DOM进行了部分更新。 2. React不会更新状态中的每一个变化，而是批量发送对R-DOM的更新。