如何在 React 中添加 useRef Hook

与 useState 相反，您可以使用 ** 使用参考挂钩 坚持一个价值** 即使您的组件呈现。

例如，您可以制作一个渲染跟踪器来了解您的应用有多少次重新渲染。

但是，如果您尝试使用 使用状态钩子 你会失败，因为这个 Hook 本身会在你的应用程序中引发重新渲染，你会陷入无限循环。

要理解以下示例，您应该知道 ** 使用参考挂钩** __ 只返回一个名为的对象 “当前的” .

当您在内部调用 Hook 时初始化的对象，只要组件处于活动状态，它就会一直存在。

使用 useRef Hook 渲染跟踪器

示例代码：

**进口** 反应，{ useRef，useEffect，useState } **从** “反应”； _常量_ 应用程序 **=** () _= >_ { _常量_ [状态，设置状态] **=** 使用状态（假） _常量_ 渲染计数器 **=你** seRef(0); 使用效果（（） _= >_ { **renderCounter.current = renderCounter.current + 1;** }); **返回** ( < **div** > < **div** >渲染计数器： **{renderCounter.current}** </ **div** >  
 < **按钮** 点击 **=** {() _= >_ 设置状态 **（！** 状态 **)** }>渲染</ **按钮** > </ **div** > ); }; **出口** **默认** 应用程序;

在上面的示例中，您可以看到通过单击 Render 按钮，您更改了使用 useState Hook 初始化的状态变量的布尔值。

简而言之，通过单击该按钮，您将更改状态值，从而强制您的应用重新渲染并执行 useEffect 挂钩以在渲染跟踪器中添加加一。

useRef Hook 在哪种情况下有用？

假设您不想知道组件渲染了多少次。但相反，您需要知道用户实现某个操作的次数。

您可以复制渲染跟踪器示例并像这样修改 useEffect Hook

 使用效果（（） _= >_ { **stateChangeCounter.current = stateChangeCounter.current + 1;** },[ **状态** ]);

或保持更改状态的先前值。

**进口** 反应，{ useRef，useEffect，useState } **从** “反应”； _常量_ 应用程序 **=** () _= >_ { _常量_ [名称，设置名称] **=** 使用状态（“”）； _常量_ 曾用名 **=** 使用参考（“”）； 使用效果（（） _= >_ { 以前的名称.当前 **=** 姓名; }， [姓名]）; **返回** ( < **div** > < **输入  
    ** 类型 **=** “文本”  
 价值 **=** {姓名}  
 改变 **=** {( _e_ ) _= >_ setName(e.target.value)}  
 /> < **h2** >当前姓名：{name}</ **h2** > < **h2** >以前的名字：{previousName.current}</ **h2** > </ **div** > ); }; **出口** **默认** 应用程序;

甚至可以使用它来访问 DOM 以获取值甚至添加样式和动画。

 常量 **焦点动画** = 使用参考（）； 使用效果（（）=> { **focusAnimation.current.focus();** }, []); **返回** ( <input type="text" ref={ **焦点动画** } /> );

通过执行上面的代码，您将获得渲染应用程序的输入焦点。

所以，通过阅读这篇文章，你已经了解了 ** 使用参考挂钩** 以及您可以实现它的许多方法中的一些。

感谢您阅读我的文章。如果有任何技术上的不准确之处，您可以在下面发表评论或与我联系。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/30416/50121209

标签：current,useRef,渲染,React,Hook,使用,div
来源： https://www.cnblogs.com/amboke/p/16685545.html