React
v16.4.1GitHub

ReactDOM

如果使用 <script> 标签加载 React ，这些在 ReactDOM 上的顶层 API 全局可用。 如果你使用 ES6 与 npm ，你可以写 import ReactDOM from 'react-dom'。如果你使用 ES5 与 npm ，你可以写 var ReactDOM = require('react-dom') 。

概述

react-dom 包提供了 DOM 特定的方法，可以在你的应用程序的顶层使用，如果你需要的话，也可以作为 React模型 之外的特殊操作DOM的接口。 但大多数组件应该不需要使用这个模块。

浏览器支持

React支持所有流行的浏览器，包括 Internet Explorer 9 及更高版本，然而为了兼容旧版本浏览器，如 IE 9 和 IE 10， 某些polyfill是必需的。

注意：

我们不支持那些不支持 ES5 方法的旧版浏览器，但如果页面中包含诸如 es5-shim 和 es5-sham ，您可能会发现您的应用在旧版浏览器中正常工作。 如果你愿意你也可以选择走这条路。

参考

render()

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

渲染一个 React 元素到由 container 提供的 DOM 中，并且返回组件的一个 引用(reference) （或者对于 无状态组件 返回 null ）。

如果 React 元素先前已经被渲染到了 container 中，那么将对其执行更新，并且对 DOM 只修改需要修改的地方，以反映最新的 React元素。

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

注意：

ReactDOM.render() 控制传入的容器节点的内容。当第一次调用时，容器内部的任何现有DOM元素都会被替换。 之后使用 React 的 DOM diffing 算法来进行有效的更新。

ReactDOM.render() 不会修改容器节点（只修改容器的子节点）。它可能插入一个组件到已存在的 DOM 节点中而不会覆盖已经存在的子节点。

ReactDOM.render() 当前返回根 ReactComponent 实例的引用。但是，使用此返回值是历史遗留的，应该避免使用，因为在某些情况下，React 的未来版本可能会异步渲染组件。如果您需要引用根 ReactComponent 实例，优选的解决方案是绑定一个 ref 回调 到根元素。

使用 ReactDOM.render() 来混合服务端渲染的容器已经被弃用，并且会在React 17 中删除。使用hydrate() i来代替。

hydrate()

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

与 render() 相同，但用于混合容器，该容器的HTML内容是由 ReactDOMServer 渲染的。 React 将尝试将事件监听器附加到现有的标记。

React 期望在服务器和客户端之间渲染的内容是相同的。它可以修补文本内容的差异，但是你应该把不匹配当成 bug 来解决。在开发模式下，React 在混合过程中的不匹配进行警告。不保证在不匹配的情况下，修改属性差异。这对于性能来说是很重要的，因为在大多数应用程序中，不匹配是很少见的，所以验证所有标记是非常昂贵的。

如果单个元素的属性或文本内容在服务器和客户端之间不可避免地存在差异（例如，时间戳），你可以通过在元素中添加 suppressHydrationWarning={true} 来消除警告。它只在单层深度上工作，它的目的是成为一个逃生舱口。不要过度使用它。除非它是文本内容，React 仍然不会试图修复它，所以它可能会保持不一致，直到将来的更新。

如果你故意需要在服务器和客户端上渲染不同的内容，你可以进行两遍渲染。在客户端上渲染不同内容的组件可以读取像 this.state.isClient 这样的 state(状态) 变量，你可以将 componentDidMount() 设置为 true 。这样，初始渲染过程将渲染与服务器相同的内容，避免不匹配， 但是混合后同步还会发生一次。请注意，这种方法会让你的组件变慢，因为它们必须渲染两次，所以谨慎使用它。

请记住要注意用户在慢速连接(网速慢)上的体验。JavaScript 代码的加载时间可能比初始化 HTML 渲染时间要晚得多，所以如果你在客户端中通过渲染不同的内容，过渡可能会可能会很不协调。但是，如果执行得当，在服务器上渲染应用程序的 “shell” 可能是有益的，并只在客户端上显示一些额外的小部件。要学习如何做到这一点，而不出现标记不匹配问题，请参阅前一段中的解释。

unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)

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

findDOMNode()

ReactDOM.findDOMNode(component)

如果组件已经被装载到 DOM 中，这将返回相应的原生浏览器 DOM 元素。这个方法对读取 DOM 外的值是有用的，就像单字段值 以及 执行 DOM 分析（measurement） 。在大多数情况下，你可以绑定一个 ref 到 DOM 节点上，从而避免使用findDOMNode。 当 render 返回 null 或 false 时，findDOMNode 将会返回 null。

注意：

findDOMNode 是一个用于访问真实 DOM 节点（underlying DOM node）的接口。 在大多数情况下，不建议使用它，因为它会越过组件抽象层访问真实 DOM 。

findDOMNode 仅适用于已装载的组件（即已放置在DOM中的组件）。 如果你试图在一个尚未安装的组件上调用它（就像在一个尚未创建的组件上调用 render()中的 findDOMNode() ），将抛出一个异常。

findDOMNode 不能用于函数式组件。

createPortal()

ReactDOM.createPortal(child, container)

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

Edit this page