React 中的 DOM 是什么？

---

DOM 代表“文档对象模型”。它是万维网联盟的基本逻辑主页模型。

每次应用程序的 UI 状态发生变化时，DOM 都会更新以反映该变化。每当应用程序用户界面更新时，都会呈现 DOM，这最终会影响应用程序性能，导致加载速度变慢。

DOM 的复杂性和众多 UI 组件进一步降低了性能，因为每次更改都需要重新呈现页面。

但是，React 中的虚拟 DOM 概念改变了一切。让我们在下面看看 -

什么是 DOM？

换句话说，DOM 是网页 UI 的树状结构表示，其所有组件和相关特性作为其分支。可以使用 DOM 的方言接口访问和更新网站页面上的任何组件的数据。

您创建的每个 HTML 片段都像树枝一样放置到树上。使用 JavaScript，您可以访问所有这些网络（HTML 组件）并修改其属性、样式和其他属性。

这表明 JavaScript 可以快速获取和更改网站，这要归功于 DOM。因此，每棵树中都必须存在一个根节点，对吗？在这种情况下，节点是文档。您创建的每个 Html 元素都将直接或间接地成为根节点文档的后代。

React 中的 DOM 是什么？

React 引入了虚拟 DOM 的概念，它充当真实 DOM 的轻量级副本。因此，对于真实 DOM 中存在的每个对象，React 虚拟 DOM 中都有一个对象。虽然它相同，但它无法以任何方式更改文档的设计。

DOM 操作需要时间，但虚拟 DOM 操作速度很快，因为没有任何内容正在屏幕上获取。因此，每当应用程序的状态发生变化时，首先更新的是虚拟 DOM 而不是真实 DOM，这极大地提高了性能。

虚拟 DOM 如何在 React 中工作？

每当向应用程序中引入新内容时，就会形成一个虚拟 DOM，并且将其可视化为树。

这棵树中的一个节点代表应用程序的每个组件。因此，每当任何元素的状态发生变化时，就会构建一个新的虚拟 DOM 树。

然后将以前的虚拟 DOM 树与新创建的虚拟 DOM 树进行比较，并记录差异。然后确定对真实 DOM 进行这些更改的最佳方法。现在，只有更改的项目将呈现到页面上。

刷新 DOM

如果您熟悉 JavaScript，您可能会看到用户使用“getElementByClass()”或“getElementById()”方法上传 DOM 的元素。当应用程序的状态发生变化时，DOM 会被修改以表示用户界面的更改。

例如

JavaScript

// Simple getElementById() method document.getElementById('some−id').innerValue = 'updated value;

如前所述，将代码提交到 JavaScript 文件或控制台时，会存在这些事件 -

• 它删除特定元素的子组件。

• 网站解码 HTML

• 并将“更新的值”添加到组件（DOM）以查找具有此标识的组件。

• 刷新设计。

• 更新子节点和父节点的 CSS 值。

• 最后，遍历树，然后将其绘制到浏览器的窗口上。

因此，更改 DOM 不仅仅是更改内容。

ReactDOM

为了提供一种有效的方法来控制 Web 浏览器的 DOM 组件，ReactDOM 是一个提供 DOM 特定功能的库，这些功能可以在 Web 应用程序的精英层使用。

• ReactDOM 使用度量并提供了一种有效的方法来操作 DOM。

• 如果提供的容器有任何后代，ReactDOM.render() 会替换它们。它具有非常有效的 diff 技术，并且可以更改特定的 DOM 子集。

• 服务器端和客户端都可以使用 ReactDOM。

• 功能性元素不能在 findDOMNode() 方法中部署，因为该操作仅在连接的组件上执行。

ReactDOM 的 API 中为开发人员提供了以下技术和其他一些技术。

• createPortal()

• hydrate()

• unmountComponentAtNode()

• findDOMNode()

• render()

您需要首先使用以下代码片段从 react-dom 模块导入 ReactDOM，以便在 React Web 应用程序中使用 -

import * as ReactDOM from 'react−dom';

ReactDOM.createPortal(child, container)

此过程需要下面列出的两个变量。

• container − 此选项预期组件的渲染容器。

• child − 此参数预期渲染 React 元素或 JSX 表达式。

此函数不产生任何内容。

ReactDOM.unmountComponentAtNode

此函数需要 Window DOM 中的 React 元素，并且仅接受一个参数，即组件。

• 返回类型 − 如果操作成功，它会发送此组件绘制到的 DOM 节点；否则，它会返回空。

• unmountComponentAtNode − 通过使用此函数，也可以卸载或删除也显示到特定框中的 React 组件。将警报组件视为一个示例。最好在相对较短的时间内删除组件以提高网站效率。

findDOMNode()

此函数最常见的应用是查找特定 React 元素呈现到的 DOM 节点。此技术很少使用，允许您通过为每个元素提供其引用属性来实现相同的功能。

ReactDOM.render

此函数最多接受三个参数，如下所示。

• container − 此选项预期元素的渲染容器。

• element − 此参数预期渲染 React 元素或 JSX 表达式。

• callback − 此附加参数预期在渲染完成后执行函数。

• 返回类型 − 如果已渲染无根组件，则此函数将返回 null。否则，它会恢复到对组件的暗示。

DOM 元素

为了实现跨浏览器可访问性和效率，React 开发了一个与浏览器无关的 DOM 框架。您利用此机会来平滑窗口中 DOM 实现的一些不规则边界。

React 中的所有 DOM 属性和特性，尤其是事件处理程序，都应使用驼峰命名法。例如，React bar Index 特性等效于 HTML tab index 属性。

data-* 和 aria-* 属性是唯一不需要小写字母的属性。您可以使用区域标签作为区域标签的示例。

总结

在 React 中，每当我们操作元素的虚拟 DOM 时，我们都会避免通常在实际 DOM 中遵循的一系列操作。

虚拟 DOM 是 React 用于提高应用程序速度的技术。它提供了一种确定两棵渲染树之间确切变化内容并仅更新真实 DOM 的必要部分的方法。