首页 > 其他分享> 文章详细

如何在 React 中添加 useRef Hook

2022-09-12 10:02:28 阅读：295 来源： 互联网

标签：current useRef 渲染 React Hook 使用 div

如何在 React 中添加 useRef Hook

React Hook useRef

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

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

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

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

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

使用 useRef Hook 渲染跟踪器

Render Tracker with counter using 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={ **焦点动画** } /> );

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

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

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

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

如何在 React 中添加 useRef Hook

如何在 React 中添加 useRef Hook

使用 useRef Hook 渲染跟踪器

useRef Hook 在哪种情况下有用？