如果你用一个<script>
标签导入React, 所有的顶阶的API都能在ReactDOM
的全局范围内被调用。 如果你用的是 npm搭配ES6标准,你可以用import ReactDOM from 'react-dom'
。如果是npm和ES5,你可以用var ReactDOM = require('react-dom')
。
ReactDOM.render(
element,
container,
[callback]
)
渲染一个React元素,添加到位于提供的container
里的DOM元素中,并返回这个组件的一个 引用(或者对于无状态组件返回null
).
如果这个React元素之前已经被渲染到container
里去了,这段代码就会进行一次更新,并且只会改变那些反映元素最新状态所必须的DOM元素。
回调函数是可选的。如果你提供了,程序会在渲染或更新之后执行这个函数。
注意:
ReactDOM.render()
控制你传进来的容器节点里的的内容。第一次被调用时,内部所有已经存在的DOM元素都会被替换掉。之后的调用会使用React的DOM比较算法进行高效的更新。
ReactDOM.render()
不会修改容器节点(只修改容器的子项)。你可以在不覆盖已有子节点的情况下添加一个组件到已有的DOM节点中去。
ReactDOM.render()
目前会返回一个引用, 指向 ReactComponent
的根实例。但是这个返回值是历史遗留,应该避免使用。因为未来版本的React可能会在某些情况下进行异步渲染。如果你真的需要一个指向 ReactComponent
的根实例的引用,推荐的方法是添加一个callback ref到根元素上。
ReactDOM.unmountComponentAtNode(container)
从DOM元素中移除已挂载的React组件,清除它的事件处理器和state。如果容器内没有挂载任何组件,这个函数什么都不会干。 有组件被卸载的时候返回true
,没有组件可供卸载时返回 false
。
ReactDOM.findDOMNode(component)
如果这个组件已经被挂载到DOM中,函数会返回对应的浏览器中生成的DOM元素 。 当你需要从DOM中读取值时,比如表单的值,或者计算DOM元素的尺寸,这个函数会非常有用。 大多数情况下,你可以添加一个指向DOM节点的引用,从而完全避免使用findDOMNode
这个函数. 当 render
返回 null
或者 false
时, findDOMNode
也返回 null
.
注意:
findDOMNode
是用于操作底层DOM节点的备用方案。在大部分情况下都不提倡使用这个方案,因为它破坏了组件的抽象化。
findDOMNode
只对挂载过的组件有效(也就是已经添加到DOM中去的组件)。如果你试图对一个未挂载的组件调用这个函数 (比如在一个还未创建的组件的 render()
函数中中调用 findDOMNode()
),程序会抛出一个异常。
findDOMNode
不能用于函数式的组件中。