反应\反应
在之前关于介绍 JSX 的文章中，我们了解到可以使用 JSX 在 Javascript 变量中存储 HTML 标记。现在，ReactJS 是一个构建活动用户界面的库，因此渲染是 ReactJS 不可或缺的一部分。React 为开发人员提供了一个包 react-dom 也称为 Reactdom，用于访问和修改 DOM。让我们简单地看看有这个包的需求是什么。
什么是 DOM？
DOM，缩写为文档对象模型，是任何网页的万维网联盟标准逻辑表示。换句话说，DOM 是一个树状结构，它包含了网站的所有元素和属性作为节点。DOM 提供了一个语言中立的界面，允许访问和更新网页任何元素的内容。
在 React 之前，开发人员直接操作 DOM 元素，导致 DOM 操作频繁，每次更新时，浏览器都要根据页面的特定 CSS 重新计算和重新绘制整个视图，这使得整个过程消耗了大量时间。作为一种改进，React 将虚拟 DOM 带入了场景。虚拟 DOM 可以被称为实际 DOM 表示的副本，用于保存用户所做的更新，并最终一次性将其反映到原始浏览器 DOM 中，耗时更少。
什么是 ReactDOM？
ReactDOM 是一个包，它提供了 DOM 特定的方法，可以在 web 应用程序的顶层使用，以实现管理网页 DOM 元素的有效方法。ReactDOM 为开发人员提供了一个包含以下方法和一些其他方法的应用编程接口。
- 渲染()
- findDOMNode()
- 卸载组件节点()
- 水合物()
- createPortal()
先决条件:要在任何 ReactDOM web 应用程序中使用 ReactDOM，我们必须首先使用以下代码片段从 React DOM 包导入 React DOM:
import ReactDOM from 'react-dom'
渲染()功能
这是 ReactDOM 最重要的方法之一。此函数用于渲染单个反应组件或包装在一个组件或 div 元素中的几个组件。这个函数使用了高效的 React 方法来更新 DOM，只需要改变一个子树，高效的 diff 方法等等。
语法:
ReactDOM.render(element, container, callback)
参数:该方法最多可以取三个参数，如下所述。
- 元素:此参数要求渲染 JSX 表达式或反应元素。
- 容器:此参数需要元素必须在其中呈现的容器。
- 回调:这是一个可选参数，它期望在渲染完成后执行一个函数。
返回类型:该函数返回对组件的引用，如果呈现了无状态组件，则返回空值。
findDOMNode()函数
该函数通常用于获取渲染特定反应组件的 DOM 节点。这种方法很少被使用，就像下面可以通过给每个组件本身添加一个 ref 属性来实现一样。
语法:
ReactDOM.findDOMNode(component)
参数:该方法采用单个参数组件，期望在浏览器 DOM 中搜索一个反应组件。
返回类型:该函数返回组件成功呈现的 DOM 节点，否则为空。
卸载组件节点()功能
此功能用于卸载或移除渲染到特定容器的反应组件。例如，您可能会想到一个通知组件，在短暂的时间后，最好删除该组件，以提高网页的效率。
语法:
ReactDOM.unmountComponentAtNode(container)
参数:该方法采用单个参数容器，该容器期望从其中移除 React 组件的 DOM 容器。
返回类型:该函数成功返回真，否则返回假。
水合物()功能
此方法等效于 render()方法，但在使用服务器端呈现时实现。
语法:
ReactDOM.hydrate(element, container, callback)
参数:该方法最多可以取三个参数，如下所述。
- 元素:此参数要求渲染 JSX 表达式或反应组件。
- 容器:此参数需要元素必须在其中呈现的容器。
- 回调:这是一个可选参数，它期望在渲染完成后执行一个函数。
返回类型:该函数尝试将事件侦听器附加到现有标记，并返回对组件的引用，如果呈现了无状态组件，则返回 null。
创建门户()功能
通常，当一个元素从组件的呈现方法中返回时，它会作为最近的父节点的子节点装载到 DOM 上，在某些情况下，这可能是不需要的。门户允许我们将组件呈现到位于父组件的当前 DOM 层次结构之外的 DOM 节点中。
语法:
ReactDOM.createPortal(child, container)
参数:该方法取两个参数，如下所述。
- 子级:此参数要求渲染 JSX 表达式或反应组件。
- 容器:此参数需要元素必须在其中呈现的容器。
返回类型:此函数不返回任何内容。
注意要点:
- ReactDOM.render()替换给定容器的子容器(如果有)。它使用高效的 diff 算法，可以修改 DOM 的任何子树。
- findDOMNode()函数只能在已安装的组件上实现，因此函数组件不能在 findDOMNode()方法中使用。
- ReactDOM 使用可观察的对象，因此提供了一种有效的 DOM 处理方式。
- ReactDOM 可以在客户端和服务器端使用。
版权属于：月萌API www.moonapi.com，转载请注明出处
