如何在 React 中添加 useRef Hook

如何在 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