二十三、ReactDOM用法
如果你使用script标签引用React,那么这些顶级API在全局变量ReactDOM上可直接使用。如果你使用了ES6和npm,你可以这么写import ReactDOM from 'react-dom'
。如果你使用ES5和npm,你可以这写var ReactDOM = require('react-dom')
。
总览
react-dom
包提供了DOM特定的方法,如果你需要,可以在你的应用中使用并作为一个交互获取外面的React数据。 大多数你的组件不需要使用此模块。
-
render()
-
unmountComponentAtNode()
-
findDOMNode()
浏览器支持
React支持所有流行的浏览器,包括Internet Explorer 9及更高版本。
note
React无法在那些不支持ES5方法的旧版浏览器上运行,但如果页面中包括诸如es5-shim
和es5-sham
之类的polyfills,您就会发现您的应用在旧版浏览器中可以正常工作。当然,你对你自己选择的路由完全的选择权,我们也管不了你。。。
使用方法
render()
ReactDOM.render(
element,
container,
[callback]
)
将React元素呈现到提供的container
中的DOM中,并返回对组件的引用(或对无状态组件返回null)。
如果React元素之前已经被渲染到容器中,这么做会对它执行重新渲染操作,并且只需要根据需要修改DOM以返回最新的React元素。
如果提供了可选的回调,它将在组件渲染或重新渲染后执行。
note
ReactDOM.render()
用来控制传入的container节点中的内容。当第一次调用时,内部的任何现有DOM元素都将被替换。 后面的操纵使用React的DOM diffing
算法来进行有效的更新。
ReactDOM.render()
会修改container的内部DOM节点(只修改容器的子节点)。也可以将组件插入现有DOM节点中,而不覆盖现有子项。
unmountComponentAtNode()
ReactDOM.unmountComponentAtNode(container)
从DOM中删除已安装(mounted)React组件,并清除其event handle和state。 如果在container中没有mounted组件,调用此函数什么也不做。 如果组件被unmounted,则返回true,如果没有要卸载的组件,则返回false。
findDOMNode()
ReactDOM.findDOMNode(component)
如果此组件已装载到DOM中,则返回相应的html DOM元素。 此方法对于从DOM中读取值(例如表单字段值和执行DOM测量)很有用。当render
返回null
或false
时,findDOMNode
返回null
。
在大多数情况下,你可以使用refs处理DOM节点,并避免使用findDOMNode。
note
findDOMNode
是一个用于访问底层DOM节点的接口。 在大多数情况下,不建议使用此就接口。
findDOMNode
仅适用于已安装的组件(即已放置在DOM中的组件)。 如果你试图在一个尚未安装的组件上调用它(就像在一个尚未创建的组件render()
方法里调用findDOMNode()
),将抛出一个异常。
findDOMNode
不能用于功能组件。