React - ReactDOM

react-dom 包提供了可以在应用程序顶层使用的 DOM 特定方法，可以在 React 模型外使用的。大多数组件并不需要使用此模块。

浏览器支持

支持所有的现代浏览器，包括 IE9 及以上。

不支持那些不支持 ES5 方法的旧浏览器，但是如果页面使用了 es5-shim 和 es5-sham 的 polyfills，应用仍然可以在这些旧的浏览器上运行。

接口

ReactDOM 提供了三个接口：

• render()
• unmountComponentAtNode()
• findDOMNode()

render

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

• element： 要渲染的 React 组件或者 DOM 元素
• container： 渲染内容的容器
• [callback]： 可选的回调函数参数，在组件渲染后执行

render 是最常用的一个接口，将 React 组件或者 DOM 元素渲染到指定的 DOM 容器中，并返回该组件的引用（无状态组件返回 null ）。

如果 React 元素已经被渲染到容器中，并且只在必要的时候才更新 DOM 以反映最新的 React 元素。

ReactDOM.render 方法控制传入容器的内容。该方法在第一次被调用时，任何容器内现有的 DOM 元素都将被替换。后来的调用将使用 React 的 DOM diffing 算法进行有效的更新。

ReactDOM.render 方法不修改容器节点，只修改容器的子节点。

ReactDOM.render 方法返回对 React 根组件 ReactComponent 实例的引用。但是这个返回的引用是历史接口，应该避免使用，因为 React 的未来版本可能异步的渲染组件。如果需要使用这个实例的引用则可以为其附加 ref 的回调函数。

unmountComponentAtNode

ReactDOM.unmountComponentAtNode(container)

从指定的 DOM 容器中中删除已加载的 React 组件，并清理其事件处理程序和 state 。如果没有任何组件被加载在容器中则什么也不做。如果组件被从容器卸载则返回 true ， 如果容器内没有组件或者元素卸载则返回 false ：

<div id="app"></app>
<div id="app2"></app>

ReactDOM.render(<div />, document.getElementById('app'));
console.log(ReactDOM.unmountComponentAtNode(document.getElementById('app'))) // true

console.log(ReactDOM.unmountComponentAtNode(document.getElementById('app2'))) // false

findDOMNode

ReactDOM.findDOMNode(component)

如果一个组件已经被加载到 DOM 中，这将返回该组件对应的本地浏览器中的 DOM 元素，该方法对于从 DOM 读取值非常有用，例如读取表单域的值和计算 DOM 尺寸。在大多数情况下，应当使用 ref 而避免使用该方法，当组件的 render 方法返回的结果为 null 或者 false， 本方法返回 null。

ReactDOM.findDOMNode 方法是用于访问底层 DOM 节点的。在大多数情况下，不鼓励使用此方法，因为它会破坏组件的抽象。

ReactDOM.findDOMNode 方法只能被用在已经挂载的组件，也就是说组件已经被渲染到 DOM 中，如果组件未被渲染到 DOM 中调用此方法，比如在组件的 render 方法中调用此方法，会抛出异常。

ReactDOM.findDOMNode 方法不能被用在函数式组件上。

参考

本文主要参考 React 的官方文档（ReactDOM），并根据个人理解和习惯做了一些结构的调整。