在 React 中使用 document.getElementById 是一种反模式吗？ [关闭]答案

【问题标题】：Is using document.getElementById in React an anti-pattern? [closed]在 React 中使用 document.getElementById 是一种反模式吗？ [关闭]
【发布时间】：2020-02-28 15:11:47
【问题描述】：

我在我的 React 应用程序中的某个时候这样做：

document.getElementById(element).scrollIntoView({ behavior: "smooth" });

作为初学者，我有两个问题：

1) 这在 React 中被认为是不好的做法吗？我应该使用 refs 吗？

2) 我是否在技术上使用这种技术以任何方式修改 DOM？据我所知，我不是，但也许在后台发生了一些我不知道的事情。

【问题讨论】：

不好的做法是您将应用程序紧密耦合到使用这些方法可以使用文档的环境。您通常希望将这样的环境假设抽象出来，以便将来证明您的代码，这就是使用 refs 所做的。即使您相当有信心文档将始终存在，这通常也是一个好习惯。没有 scrollIntoView 不会操纵 Dom。
因为这里的 DOM 没有发生变异，所以不太可能造成很大的问题。但是是的，使用refs 是正确的方法。
非常感谢。所以 refs 更可取，主要是因为它们不假定文档存在？
实际上，DOM 正在被操纵，就像 .style.color = "red" 操纵 DOM 一样。 .scrollTop 值正在更改。
您仍将在内部使用refs，但从您的编码角度来看，它们将由组件控制。 IOW：您避免使用refs，因为您有一个集中式组件来处理引用。因此，假设您稍后想将您的应用程序转换为 React Native，不确定，但这可能会使 scrollIntoView 有所不同，那么您有一个要更新的组件，而不是很多页面，您使用了 refs。

标签： javascript reactjs dom

【解决方案1】：

总的来说，refs 比 document.getElementById 更好，因为它更符合你的 React 代码的其余部分。

在 react 中，每个组件类都可以有多个组件实例。使用 id 也是危险的，因为 react 不会阻止您在 1 页上有多个表单，然后您的 DOM 包含具有相同 ID 的多个输入。这是不允许的。

使用 refs 的另一个优点是，根据设计，您只能在定义它的上下文中访问 refs。如果您需要访问此上下文之外的信息，这将迫使您使用道具和状态（可能还有商店）。这是一个优势，因为您破坏单向数据流的机会更少/没有机会，这会使您的代码更难管理。

注意：几乎在所有情况下，都可以完全避免使用 refs。正如 Steve McGuire（Netflix 的高级用户界面工程师）in this video 来自 reactjs conf 2016（视频 9 分 58 秒）所解释的那样，Netflix 的设计原则是永远不使用 refs。在您的情况下，这意味着将电子邮件输入值置于表单状态，添加 onChange 处理程序，并在提交事件中使用状态值。

【讨论】：

非常感谢。你提到 Netflix 谈论避免 refs 真是太有趣了。这就是为什么我要问这个以及为什么我要避免引用，但在某些情况下我只是不知道如何。我不知道您所说的 ` 在您的情况下，这意味着将电子邮件输入值置于表单的状态，添加 onChange 处理程序，并在提交事件中使用状态值。` ？我试图在提交时滚动到一个元素，我的问题是，我有很多元素，所以我试图避免引用，但如果我不应该使用 document 和 ids 我不知道怎么做找到元素并滚动到它
-1。虽然是正确答案，但请不要复制其他人的没有适当注明原作者的情况：reactjs this.refs vs document.getElementById