在 React 中，我们通常通过“状态（state）”和“属性（props）”来控制组件的显示和行为。但是，在某些情况下，我们需要对 DOM 元素进行直接操作，以便实现某些交互效果。这时，就需要使用 React 提供的 Ref 功能了。
什么是 Ref
Ref 是 React 提供的一种引用 DOM 元素的方法，它可以让我们直接操作 DOM 元素，而不必通过组件的状态或属性来控制。Ref 可以用于访问组件中的节点、组件的实例或其他 React 元素。
在 React 中，我们可以通过 React.createRef 方法创建一个 Ref 对象，然后将其绑定到组件的某个元素上。这样，我们就可以通过 Ref 对象来访问这个元素。
如何使用 Ref
下面是一个示例，在其中使用 Ref 实现了一个简单的组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - ------------------
-
------------- -
------------------------------ - ------
-
-------- -
------ -
-----
--- ----------------------- -----------
------- -------------------------------------------- --------------
------
--
-
-在这个组件中，我们使用 React.createRef 方法创建了一个 Ref 对象 myRef，并将其绑定到 <h1> 元素上。在 handleClick 方法中，我们可以通过 this.myRef.current 访问到这个元素，然后改变它的颜色。
需要注意的是，Ref 对象中的 current 属性才是真正的 DOM 元素，因此在使用时需要先判断 current 是否存在，以免出现错误。
除了将 Ref 绑定到元素上，我们还可以将其绑定到组件的实例上，以便在组件中直接操作实例。
例如，如果想实现一个定时器，在组件卸载时自动停止，可以这样做：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - ------------------
---------- - -----
-
------------------- -
---------- - -------------- -- -
------------------- ---------
-- ------
-
---------------------- -
--------------------------
-
-------- -
------ -
---- -----------------
---------- -----------
------
--
-
-在这个组件中，我们将 Ref 绑定到了 <div> 元素上，并在 componentDidMount 生命周期方法中启动了一个定时器，输出“Hello, world!”。在组件卸载时，通过 componentWillUnmount 生命周期方法停止定时器。
总结
在 React 中使用 Ref 实现 DOM 操作可以极大地拓展组件的功能。通过 Ref，我们可以直接操作 DOM 元素、组件实例或其他 React 元素，而不必通过状态或属性来控制。需要注意的是，使用 Ref 时要谨慎，避免出现不必要的副作用。
希望本文对你有所帮助，谢谢！
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64a6c4e948841e9894368b2a