反应JS |反应DOM

在上一篇介绍 JSX 的文章中，我们了解到可以使用 JSX 将 HTML 标记存储在 Javascript 变量中。现在，ReactJS 是一个构建活动用户界面的库，因此渲染是 ReactJS 的组成部分之一。 React 为开发人员提供了一个包react-dom aka ReactDOM 来访问和修改 DOM。让我们简要地看看拥有这个包的需要是什么。

什么是 DOM？

DOM，缩写为 Document Object Model，是任何网页的万维网联盟标准逻辑表示。简而言之，DOM 是一种树状结构，其中包含所有元素及其作为节点的网站属性。 DOM 提供了一个语言中立的界面，允许访问和更新网页的任何元素的内容。

在 React 之前，开发者直接操作 DOM 元素，导致频繁的 DOM 操作，每次更新浏览器都必须根据页面的特定 CSS 重新计算和重新绘制整个视图，这使得整个过程消耗很多时间。作为改进，React 将虚拟 DOM 引入了场景。虚拟 DOM可以被称为实际 DOM 表示的副本，用于保存用户所做的更新，并最终将其立即反映到原始浏览器 DOM，从而消耗更少的时间。

什么是 ReactDOM？

ReactDOM 是一个提供 DOM 特定方法的包，这些方法可以在 Web 应用程序的顶层使用，以实现管理网页 DOM 元素的有效方式。 ReactDOM 为开发人员提供了一个 API，其中包含以下方法和其他一些方法。

• 使成为（）
• findDOMNode()
• unmountComponentAtNode()
• 水合物（）
• 创建门户（）

先决条件：要在任何 React Web 应用程序中使用 ReactDOM，我们必须首先使用以下代码片段从 react-dom 包中导入 ReactDOM：

import ReactDOM from 'react-dom'

渲染（）函数

这是 ReactDOM 最重要的方法之一。此函数用于渲染单个 React 组件或包装在 Component 或 div 元素中的多个组件。这个函数使用 React 的高效方法来更新 DOM，它只能改变一个子树，高效的 diff 方法等。

语法：

ReactDOM.render(element, container, callback)

参数：此方法最多可以采用三个参数，如下所述。

• element：这个参数需要一个 JSX 表达式或一个 React Element 来渲染。
• 容器：此参数需要渲染元素的容器。
• 回调：这是一个可选参数，期望在渲染完成后执行一个函数。

返回类型：此函数返回对组件的引用，如果呈现无状态组件，则返回 null。

findDOMNode()函数

此函数通常用于获取渲染特定 React 组件的 DOM 节点。这种方法很少使用，如下所示，可以通过为每个组件本身添加一个 ref 属性来完成。

语法：

ReactDOM.findDOMNode(component)

参数：此方法采用单个参数组件，该组件期望在浏览器 DOM 中搜索 React 组件。

返回类型：此函数返回成功时渲染组件的 DOM 节点，否则返回 null。

unmountComponentAtNode()函数

此函数用于卸载或删除渲染到特定容器的 React 组件。举个例子，你可能会想到一个通知组件，在很短的一段时间后最好删除该组件，使网页更高效。

语法：

ReactDOM.unmountComponentAtNode(container)

参数：此方法采用单个参数容器，该容器期望必须从中删除 React 组件的 DOM 容器。

返回类型：此函数在成功时返回 true，否则返回 false。

hydra()函数

此方法等效于 render() 方法，但在使用服务器端渲染时实现。

语法：

ReactDOM.hydrate(element, container, callback)

参数：此方法最多可以采用三个参数，如下所述。

• element：这个参数需要一个 JSX 表达式或一个 React 组件被渲染。
• 容器：此参数需要渲染元素的容器。
• 回调：这是一个可选参数，期望在渲染完成后执行一个函数。

返回类型：此函数尝试将事件侦听器附加到现有标记并返回对组件的引用，如果呈现无状态组件，则返回 null。

createPortal()函数

通常，当一个元素从组件的 render 方法返回时，它会作为最近的父节点的子节点安装在 DOM 上，在某些情况下可能不需要。门户允许我们将组件渲染到位于父组件当前 DOM 层次结构之外的 DOM 节点中。

语法：

ReactDOM.createPortal(child, container)

参数：此方法采用两个参数，如下所述。

• child：这个参数需要一个 JSX 表达式或一个 React 组件被渲染。
• 容器：此参数需要渲染元素的容器。

返回类型：此函数不返回任何内容。

重要注意事项：

• ReactDOM.render() 替换给定容器的子容器（如果有）。它使用高效的 diff 算法，可以修改 DOM 的任何子树。
• findDOMNode()函数只能在挂载的组件上实现，因此函数组件不能在 findDOMNode() 方法中使用。
• ReactDOM 使用 observables，因此提供了一种有效的 DOM 处理方式。
• ReactDOM 可以在客户端和服务器端使用。