react-dom的五个接口是什么

这篇文章主要介绍了react-dom的五个接口是什么，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

react-dom是react开发项目时需要使用的工具包，是一种针对dom的平台实现，主要用于在web端进行渲染。react-dom包提供了DOM特定的方法，可以在应用程序的顶层使用，也可以作为React模型之外的特殊操作DOM的接口。

使用react开发网页的话，我们难免会下载两个包，一个是react，一个是react-dom，其中react是react的核心代码。

react-dom 的 package 提供了可在应用顶层使用的 DOM（DOM-specific）方法，react-dom 包提供了 DOM 特定的方法，可以在你的应用程序的顶层使用，如果有需要，你可以把这些方法用于 React 模型以外的地方，作为 React模型 之外的特殊操作DOM的接口。不过一般情况下，大部分组件都不需要使用这个模块。

如果你使用 npm 和 ES6，你可以用 import ReactDOM from 'react-dom'进行引入。如果你使用 npm 和 ES5，你可以用 var ReactDOM = require('react-dom')进行引入。

react-dom的五个接口

1、render()

ReactDOM.render(element, container[, callback])

在提供的 container 里渲染一个 React 元素，并返回对该组件的引用（或者针对无状态组件返回 null）。

如果 React 元素之前已经在 container 里渲染过，这将会对其执行更新操作，并仅会在必要时改变 DOM 以映射最新的 React 元素。

如果提供了可选的回调函数，该回调将在组件被渲染或更新之后被执行。

2、hydrate()

ReactDOM.render(element, container[, callback])
// 渲染一个 React 元素到由 container 提供的 DOM 中，并且返回组件的一个 引用(reference) （或者对于 无状态组件 返回 null ）

3、unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)
// 从 DOM 中移除已装载的 React 组件，并清除其事件处理程序和 state 。 如果在容器中没有挂载组件，调用此函数什么也不做。 如果组件被卸载，则返回 true ，如果没有要卸载的组件，则返回 false

4、findDOMNode() 不建议使用

ReactDOM.findDOMNode(component)
// 如果组件已经被装载到 DOM 中，这将返回相应的原生浏览器 DOM 元素。在大多数情况下，你可以绑定一个 ref 到 DOM 节点上，从而避免使用findDOMNode。

5、createPortal() 这个很有用处，啊啊啊！

ReactDOM.createPortal(child, container)
// 创建一个 插槽(portal) 。 插槽提供了一种方法，可以将子元素渲染到 DOM 组件层次结构之外的 DOM 节点中

感谢你能够认真阅读完这篇文章，希望小编分享react-dom的五个接口是什么内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!