Virtual DOM 如何理解？

DOM 是一种文档对象模型，它将 XML 或 HTML 文档的内容表示为树形结构，以便程序可以读取、访问和更改文档结构、样式和内容。

让我们看看 DOM 是如何解析文档的。请考虑以下示例 HTML 代码。

HTML

  

    

    

        
Document Object Model
    


  

上面的代码创建了一个树形结构，如下所示：

DOM 结构

现在我们对什么是 DOM 有了一个基本的了解，如果您仍然不确定，请在此处学习。

Virtual DOM：名字本身就说明它是一个虚拟创建的 DOM。虚拟 DOM 与 DOM 完全一样，它具有 DOM 的所有属性。但主要区别在于每当代码运行时，JavaScript 框架都会立即更新整个 DOM，这会降低性能。而虚拟 DOM 只更新 DOM 的修改部分。让我们清楚地理解：

当你运行一段代码时，网页被分成不同的模块。因此，虚拟 DOM 将其与 DOM 进行比较并检查是否有任何差异。如果发现差异，则 DOM 仅更新修改的部分，而其他部分保持不变。

如上图所示，virtual DOM 与 DOM 不同，现在 DOM 更新不同的子组件，而其他的则完全一样。这提高了性能。

现在让我们看一个虚拟 DOM 工作原理的示例：

创建一个 React 应用程序：

• 第 1 步：使用以下命令创建一个反应应用程序。

npx create-react-app foldername

• 第 2 步：使用以下命令将目录更改为新创建的文件夹。

cd foldername

项目结构：它将如下所示：

项目结构

实现：在相应的文件中写下以下代码。

文件名：index.html

HTML

文件名：index.js

Javascript

import React from "react";
import ReactDOM from "react-dom";
  
function time() {
  
  // DOM using HTML syntax
  document.getElementById("DOM_root").innerHTML
    = new Date().toLocaleTimeString();
  
  // Virtual DOM using react syntax
  const Virtual_element = React.createElement(
    "h4",
    null,
    "React DOM =  ",
    new Date().toLocaleTimeString()
  );
  
  ReactDOM.render(Virtual_element, 
    document.getElementById("root"));
}
  
setInterval(time, 1000);

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序：

npm start

输出：打开浏览器并右键单击屏幕并选择检查。您可以看到以下输出。

从上面的输出可以看出，整个div元素随着 DOM 中的时间而更新。而在虚拟 DOM 中，只有h4元素在更新，其他所有元素都保持不变。所以这表明虚拟 DOM 找到了修改的部分并只更新了修改的部分。