2.2 ReactDOM

从这一小节开始，正式进入React的学习。如何使用React？虚拟DOM又该如何放入到真实的DOM当中？

2.2.1 React引入方式

在项目中引入React有两种方式，一种是通过模块化的方式进行引入，但这种方式，需要配置一些开发环境，稍后再进行介绍。另外一种引入方式是直接在页面上通过script引入，具体示例如下：

在这里引入两个JS文件，react.js是React的核心文件，如组件、Hooks、虚拟DOM等，都在这个文件中。react-dom.js则是对真实DOM的相关操作，如将虚拟DOM渲染到真实DOM里，或者从真实DOM中获取节点。

2.2.2 ReactDOM

ReactDOM对象是react-dom.js提供的一个用于进行DOM操作的对象，在该对象下有一系列API用于操作DOM。在React中需要和真实的DOM打交道时都需要通过ReactDOM的API进行。当然也可以使用一些原生DOM的API，但并不推荐这么做。

使用ReactDOM要注意react-dom.js依赖于react.js，在引用的时候一定先引入react.js。接下来具体看一下ReactDOM提供的API，如果读者是刚刚开始学习React，只需要学习render方法就够了，其他方法可以在后期学习中补充了解。

1．render

render方法是ReactDOM在开发时唯一常用的API。render方法用于将React生成的虚拟DOM生成到真实的DOM中去。

element是React生成的虚拟DOM，也叫作ReactElement或ReactNode。除此之外也可以使用字符串去实现。

container要放置在element的容器中，它必须是一个已经存在的真实DOM节点。

callback是将ReactNode渲染到container之后的回调函数。

完整的render方法使用，可参考下列代码：

这里将“Hello React”这段字符串渲染到了#root这个div中，当然也可以利用React-Node做更复杂的结构渲染，后文中会详细介绍。

render方法通常用来渲染整个项目的根组件，其他组件都在根组件中一层层调用。在使用render方法时要注意container中如果有其他子内容都会被替换掉。另外render方法并不会修改container的其他特性，只是修改container的内容。

2．hydrate

上述代码展示了hydrate的参数，它一般配合React SSR（服务端渲染）时使用。hydrate作用于ReactDOM复用ReactDOMServer服务端渲染的内容时，能够尽可能保留其结构，并补充事件绑定等特性，它在单纯的Web端并不常用，就不过多介绍了。

3．findDOMNode

Component指的是React组件，如果该组件已经渲染到DOM中，可以通过findDOMNode获取真实的DOM。这里要注意实际开发时并不鼓励开发者直接用findDOMNode方法来获取DOM。后文中会讲解到React的ref属性，如果需要获取真实DOM节点，请使用ref。

4．unmountComponentAtNode

container类似于render方法中的container，一个真实的DOM节点。unmountComponent-AtNode方法用于container中删除已安装的React组件并清理其事件处理程序和状态。如果在容器中没有安装组件，调用这个函数则无任何反应。如果组件已经卸载，则返回true；如果组件未卸载，则返回false。具体代码如下：

5．createPortal

createPortal方法用于将节点添加到一个新的容器中，而非父组件归属的容器newContainer，和container一样，容器也必须是一个真实的DOM节点。具体代码如下：

在该案例中，App组件中的内容是在#root元素中渲染的，但是App的子组件Child希望在#box中渲染内容，这时就需要使用createPortal方法来设置让Child中的内容渲染到#box中。

注意：

除了render方法之外，不建议读者直接在项目中使用这些API，并且在实际项目中一般也没有使用render以外的API的需求。