Javascript 当我们可以使用querySelector时，为什么要使用Ref？

我是React世界的新手，正在学习裁判。该文件说：

REF提供了一种访问DOM节点或响应在中创建的元素的方法 渲染方法

我认为我们可以用

querySelector

函数做同样的事情。
React文档给出了一个示例，说明如何使用REF来关注输入元素。
这是代码->

类CustomTextInput扩展React.Component{
建造师（道具）{
超级（道具）；
//创建一个ref来存储textInput DOM元素
this.textInput=React.createRef（）；
this.focusTextInput=this.focusTextInput.bind（this）；
}
focusTextInput（）{
//使用原始domapi显式聚焦文本输入
//注意：我们正在访问“current”以获取DOM节点
this.textInput.current.focus（）；
}
render（）{
//告诉React我们要关联ref
//使用我们在构造函数中创建的“textInput”
返回(
);
}
}

---

由于框架本身已经公开了一种方法，可以通过普通的javascript来完成某些事情，因此它当然具有额外的优势。我可以想到的一个场景是使用React.forwardRef，它可以用于：

• 将引用转发到DOM组件
• 转发高阶组件中的引用

如React文档本身所述：

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

const FancyButton=React.forwardRef（（props，ref）=>(
{props.children}
));
//现在，您可以直接获取DOM按钮的引用：
const ref=React.createRef（）；
点击我！；

您不需要react或angular来进行任何web开发，angular和react为我们提供了一个raper，它将尝试为我们优化可重用组件， 我们正在使用react开发的所有组件都可以通过web组件来完成，但较旧的浏览器不支持这一点

我列出了在React中使用ref的一些好处

这将有助于您使用服务器端渲染，在使用Web API时要小心，因为它们在服务器端Ex、文档、窗口和本地存储上不起作用

您可以很容易地听到对象状态的变化，而您并没有 反复维护或查询dom，框架将 为你做这件事

---

假设文档中有多个输入。如何知道querySelector返回的是正确的？如果您的组件在同一视图中被多次使用，该怎么办？@rayhatfield我们可以将id添加到输入重要注释：

。querySelector

-->返回文档中与指定选择器或选择器组匹配的第一个元素

.querySelectorAll（）

-->返回一个静态（非活动）节点列表，表示与指定选择器组匹配的文档元素列表。@dalelandry如果我在元素中添加id并使用getElementById

querySelector（）该怎么办

在所有html元素中搜索以查找目标元素，但使用

ref

可以直接访问该元素。此外，您正在查找的元素可能会更改，例如它的

cssClass

可能会被删除，您将无法再找到它。