React从入门到精通系列之(23)ReactDOM的用法

116 阅读2分钟
原文链接: segmentfault.com

二十三、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-shimes5-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返回nullfalse时,findDOMNode返回null

在大多数情况下,你可以使用refs处理DOM节点,并避免使用findDOMNode。

note
findDOMNode是一个用于访问底层DOM节点的接口。 在大多数情况下,不建议使用此就接口。
findDOMNode仅适用于已安装的组件(即已放置在DOM中的组件)。 如果你试图在一个尚未安装的组件上调用它(就像在一个尚未创建的组件render()方法里调用findDOMNode()),将抛出一个异常。
findDOMNode不能用于功能组件。