神秘的 React Hook：useRef()
useRef() hook 用于在 React 的函数式组件中创建引用（简称 refs）。
好了，就这些，你可以不用往下看了（开玩笑啦）。
在本文中，我将简要解释什么是Ref，它的功能以及如何使用它，而不会把它讲得太复杂。
根据 Reactjs 官方文档中的定义，
Refs 提供了一种访问 render 方法中创建的 DOM 节点或 React 元素的方法。
这是对裁判员能给出的最佳定义，但让我用更简单的方式来解释一下。
Refs 可以像id属性一样定位任何 HTML 或 React 元素。
虽然在某些情况下，参考文献略有不同，也更方便。
-
现在我们来看看如何给 ref 赋值，以及useRef hook如何帮助我们：
正如我之前所说，它的工作方式类似于 id，所以你可以像给 id 赋值一样把它放在 div 元素中：<div ref={myTarget} />但是为什么我使用花括号而不是像给元素赋值 id 时那样使用字符串呢<div id='mytarget' />？
原因显而易见，我们将myTarget作为变量传递给 ref。这个变量就像是给特定 div 元素命名，可以帮助我们稍后定位它。你可能会问，我们并没有定义名为myTarget 的变量，那么我们传递的是什么呢？
好吧，让我们来定义这个变量，但这里有个小技巧。你不能直接定义一个变量并将其传递给 ref（例如 const ref = something），因为当我们将一个变量传递给 ref 时，它需要专门创建才能在 ref 中使用。但是我们如何创建一个这样的特殊变量呢？这时就需要用到useRef这个钩子函数了。我们用这个钩子函数来创建我们的特殊变量，并像图中所示，将其初始值设为 null。 -
我们已经创建了引用，现在是时候使用它了：
要定位我们想要的元素，我们使用一个名为current 的属性，它就像一个指示器或信号，告诉我们目标元素是否已在 DOM 中绘制（或加载）。我们将在 useEffect 中添加一个 if-else 条件来检查这一点，然后执行我们想要的操作。在
DOM 加载完成后，定位到元素后可以执行很多操作，例如为该元素添加动画，或者如果它是输入元素，则可以为其添加一个名为focus的属性，使其聚焦到该输入框。当您希望用户访问您的网站后跳转到表单填写姓名或其他信息时，这将非常有用。您还可以在其中使用许多第三方库。下图展示了我目前为止所解释的代码。
希望这篇文章能帮助你理解 React 中 ref 属性和useRef hook的用法。如果你想深入了解，我在下面留下了一些链接。
祝你编程愉快！