📜  反应JS |反应DOM

📅  最后修改于: 2022-05-13 01:56:53.332000             🧑  作者: Mango

反应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 可以在客户端和服务器端使用。