在 React 提供的组件化开发中，Ref 能够让我们轻松地访问已经渲染（mount）的组件，这为我们处理一些复杂的 DOM 操作或者组件状态修改时提供了便利。本文将详细介绍 Ref 在 React 中的使用方法、常见的场景以及代码实现。
一、Ref 的定义和设置
Ref 是 React 提供的访问和操作已经渲染的组件的方法。在 React 中，每一个组件都可以通过 Ref 来引用，当需要访问这个组件时，就需要给这个组件一个 Ref 值。
Ref 的设置有两种方法：
- 回调 Ref
回调 Ref 是一种在 React 中设置 Ref 值的方法，他能够接收一个回调函数，只要在组件渲染结束后，回调函数就会被自动调用，并且把渲染后的组件实例或者 DOM 节点作为参数传递进去。
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -----
----------- - ------- -- -
---------- - --------
--
-
-------- -
------ ---- ----------------------- -------------
-
-在上面的代码中，我们定义了一个 MyComponent 组件，并在 render 方法中使用 ref 属性来给组件的 div 元素设置一个回调 Ref。同时，在构造函数中，我们初始化了 myRef 的值为 null，并定义了一个 setRef 方法，在组件渲染之后，它会被自动调用并接收渲染完成的 div 元素作为参数。在 setRef 方法中，我们把这个元素保存在 myRef 中，这样在 MyComponent 中的其他方法就可以使用 myRef 了。
- React.createRef
React.createRef 是一个用来创建 DOM 元素 Ref 的工厂函数，能够产生一个空 Ref 对象，并能够被赋值给组件的 ref 属性。
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - ------------------
-
-------- -
------ ---- ---------------------- -------------
-
-通过这种方法创建 Ref 的方式，我们就能够在渲染完成后，通过 this.myRef.current 来引用组件中被设置的 Ref，从而进行一些操作。
二、Ref 的常见应用场景和使用方法
Ref 在我们前端开发过程中有许多使用场景，这里总结了一些常见的应用场景和使用方法：
1. 获取元素的值
使用 Ref，我们可以获得元素的值，处理表单数据的时候会尤为方便。例如：
----- ---- ------- --------------- -
------------------ -
-------------
-------------- - ------------------
-
------------ - ------- -- -
-----------------------
----- --------- - -----------------------------
------------ ---------------
-
-------- -
------ -
----- -----------------------------
-------
-----
------ ----------- -------------------- --
--------
------ ------------- -------------- --
-------
--
-
-在上面的代码中，我们定义了一个简单的表单，在输入框中，我们利用 createRef 创建了一个空得输入框 Ref 对象，然后在 handleSubmit 方法中，通过 this.inputName.current.value 获取输入框的值。
2. 获得组件实例
Ref 还能够通过回调 Ref 的方式获取子组件的实例，这时我们就能够调用子组件中的方法或者访问组件的状态了。
----- -------------- ------- --------------- -
----------- - -- -- -
------------ ---------
-
-------- -
------ ------- -------------------------------- ------------
-
-
----- --------------- ------- --------------- -
------------------ -
-------------
------------- - ------------------
-
----------------- - -- -- -
------------------------------------
-
-------- -
------ -
-----
--------------- ------------------- --
------- ---------------------------------------- ------------
------
--
-
-在上面的代码中，我们定义了两个组件 ChildComponent 和 ParentComponent，其中 ChildComponent 中包含了一个 handleClick 方法，用来弹出一段文本。在 ParentComponent 中，我们使用 createRef 创建了一个空的 ChildComponent Ref，然后在 render 方法中把它传递给了 ChildComponent，在 handleButtonClick 中，我们就能够通过 this.childRef.current.handleClick() 来访问 ChildComponent 中的 handleClick 方法，从而达到了调用子组件的目的。
3. 修改 DOM 元素样式
通过 Ref，我们能够轻松的访问已经渲染的 DOM 元素，这就为我们修改样式提供了便利。
----- -------- ------- --------------- -
------------------ -
-------------
---------- - ------------------
-
---------------- - -- -- -
----------------------------------- - -------
-
---------------- - -- -- -
----------------------------------- - ------
-
-------- -
------ ------- ---------------- ------------------------------------ ------------------------------------------ ------------
-
-在上面的代码中，我们定义了一个 MyButton 组件，在构造函数中，我们使用 React.createRef 向 MyButton 中添加了一个 Ref，并在 MyButton 中的 handleMouseEnter 和 handleMouseLeave 方法中，针对 Ref 设置了不同的样式属性，从而实现了 hover 效果。
三、Ref 的指导意义
在 React 中，使用 Ref 可以极大地简化访问已经渲染的组件的过程，为我们处理一些基于 DOM 的交互和修改操作提供了便利，同时还能轻松实现父子组件之间的通信。通过本文的学习，你可以了解到 Ref 的设置方法，常见的应用场景和使用方法，掌握 Ref 代码的实现，这将为你在前端开发过程中处理一些复杂的逻辑和交互问题提供帮助，提高你代码的效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64506673980a9b385b973be6