使用 ReactJS 时使用 ref 和 document.getElementById 等有什么区别？答案

【问题标题】：What is the difference with using ref and document.getElementById, ect when using ReactJS?使用 ReactJS 时使用 ref 和 document.getElementById 等有什么区别？
【发布时间】：2015-11-04 01:49:08
【问题描述】：

使用有什么区别/优点/缺点：

  React.findDOMNode(this.refs.elementReferenceName)

和

  document.getElementById(elementId)

什么时候使用 ReactJS？

【问题讨论】：

findDOMNode (在正常情况下) 1) 进行一些检查，如果检查失败，则以正常方式失败； 2）填写内部缓存（nodeCache）对象。 getElementById 显然没有做任何这些 - 如果没有找到，它只会返回 null。
这只是一个注释而不是回答：findDOMNode() 仅适用于已安装的组件（即已放置在 DOM 中的组件）。如果您尝试在尚未安装的组件上调用它（例如在尚未创建的组件上调用 render() 中的 findDOMNode()），则会引发异常。
它可以让你通过元素引用而不是 id 来查找 Dom 节点。如果您的组件没有类或 ID，或者它有但您在当前上下文中不知道它们怎么办？

标签： javascript web reactjs

【解决方案1】：

使用React.findDOMNode 的主要优点和理由是它保持在 React 范式中，因为您向它传递了一个组件——而且在大多数情况下，您正在处理 React 组件（处理生命周期函数或调用函数在组件描述符中实现）。

依赖 DOM 元素中的 id 会破坏 React 中的封装，因为它不使用 id。

话虽如此，这取决于您和您的特定应用程序的需要来确定哪个最适合使用。与其他 React 函数一样，您必须小心，因为在错误的时间调用 React.findDOMNode（在渲染中或如果组件未安装）会引发异常。 OTOH，document.getElementById 不会在组件被卸载时抛出异常；但如果存在多个具有该 ID 的元素，它可能会返回错误的元素。

如果你还没有找到，here is documentation for findDOMNode。

另外，here is the implementation of findDOMNode

【讨论】：