前言
React Hooks 是 React 16.8 版本新出的特性，它可以让你在无需修改组件结构的情况下，使用状态（state）和其他 React 特性。其中，useRef 是 React Hooks 中的一个。
在本文中，我们将介绍 useRef 的基本用法，以及一些在 React 中使用 useRef 的常见场景，希望对你学习 React 有所帮助。
什么是 useRef
useRef 是 React Hooks 中的一个函数，它返回一个可变的 ref 对象。它在组件多次渲染之间保持稳定，并且可以用于存储任何可变值，类似于 class 组件中的 this.refs。
相比于 useState，useRef 更适合处理不会引起组件重新渲染的状态，或者需要在函数调用之间存储的任何数据。
使用 useRef
使用 useRef 很简单，只需要在函数组件中调用 useRef，然后将其返回值分配给一个变量即可。例如：
------ ------ - ------- --------- - ---- --------
-------- ------------- -
----- ----- - -------------
------------ -- -
----------------------
-- ----
------ -
------ ----------- ----------- --
--
-在这个例子中，我们在函数组件中调用了 useRef，并将其返回值分配给了一个变量 myRef。我们将这个变量传递给 ref 属性，然后在 useEffect 中使用 myRef.current 来调用 focus() 方法。
需要注意的是，useRef 返回的值是一个包含 .current 属性的对象，这个属性被初始化为传入 useRef 的参数（如果有的话）。在上面的例子中，我们传入了 null，所以 myRef.current 初始值为 null。我们可以在组件的整个生命周期中读取和修改 .current 属性，而这不会导致组件的重新渲染。
使用场景
引用 DOM 元素或组件
useRef 最常见的用途之一就是获取 DOM 元素或组件的引用。
例如，我们可以在下面的例子中使用 useRef 来获取 button 元素的引用，并在点击后修改 button 的样式：
------ ------ - ------ - ---- --------
-------- ------------- -
----- --------- - -------------
----- ----------- - -- -- -
--------------------------------------- - ------
--
------ -
-----
------- --------------- --------------------------- ------------
------
--
-在这个例子中，我们先调用 useRef 来获取 button 元素的引用，然后将其传递给 ref 属性。最后，我们在 handleClick 函数中使用 buttonRef.current 来修改 button 元素的样式。
存储任意值
除了存储 DOM 元素或组件的引用，useRef 还可以用于存储任意可变值。例如：
------ ------ - ---------- ------ - ---- --------
-------- ------------- -
----- ------- --------- - ------------
----- ------------ - ---------
------------ -- -
-------------------- - ------
---
------ -
-----
---------- ------ -----------
----------- ------ --------------------------
------- ----------- -- -------------- - ------------ --------------
------
--
-在这个例子中，我们使用 useRef 来存储之前的状态 count。我们创建了一个名为 prevCountRef 的 useRef，并在 useEffect 中将 prevCountRef.current 的值设置为 count。最后，我们在组件中显示 prevCountRef.current，以显示当前状态和先前状态。
总结
在本文中，我们学习了 useRef 的基本用法，可以将其用于获取 DOM 元素或组件的引用，并存储任意可变值的场景。希望本文对你学习 React 有所帮助。
参考
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/651e933f95b1f8cacd641a68