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

2024年1月21日 160次阅读 来源: 张亚涛

二十三、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不能用于功能组件。

    原文作者：张亚涛
    原文地址: https://segmentfault.com/a/1190000007828811
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞