用 useRef() 访问和操作 DOM 元素详解

2023-11-01 01:05:17

useRef() 简介

useRef() 是 React 中一个内置的 Hook，它允许您在函数组件中访问和操作 DOM 元素。与 class 组件不同，函数组件没有内置的 this 对象，因此无法直接访问 DOM 元素。useRef() 为函数组件提供了访问 DOM 元素的能力，使您能够在函数组件中与 DOM 进行交互。

useRef() 返回一个可变的 ref 对象，该对象有一个属性 current，该属性指向 DOM 元素的引用。您可以在函数组件中将 ref 对象传递给 DOM 元素，然后通过 ref 对象的 current 属性访问和操作该 DOM 元素。

useRef() 的用法

useRef() 的用法非常简单，只需在函数组件中使用 useRef() 即可获取一个 ref 对象。然后，您可以将 ref 对象传递给 DOM 元素，如下所示：

const inputRef = useRef();

<input ref={inputRef} />

现在，您可以在函数组件中通过 inputRef.current 访问和操作输入框元素。例如，您可以使用 inputRef.current.focus() 来让输入框获得焦点，或者使用 inputRef.current.value 来获取输入框的值。

useRef() 的常见用法

useRef() 有许多常见的用法，包括：

访问和操作 DOM 元素
存储数据
触发副作用

访问和操作 DOM 元素

useRef() 最常见的用法是访问和操作 DOM 元素。例如，您可以使用 useRef() 来：

让元素获得焦点
获取元素的值
更改元素的样式
添加或删除元素的类名
监听元素的事件

存储数据

useRef() 还可用于存储数据。例如，您可以使用 useRef() 来存储：

表单数据
组件的状态
组件的引用

触发副作用

useRef() 还可以用于触发副作用。例如，您可以使用 useRef() 来：

在组件挂载时执行某些操作
在组件卸载时执行某些操作
在组件更新时执行某些操作

useRef() 的注意事项

在使用 useRef() 时，需要注意以下几点：

useRef() 返回一个可变的 ref 对象，这意味着您可以更改 ref 对象的 current 属性的值。
useRef() 不会自动更新 ref 对象的 current 属性的值。如果您在组件中更改了 DOM 元素，需要手动更新 ref 对象的 current 属性的值。
useRef() 不会阻止组件重新渲染。如果您在组件中使用了 useRef()，并且组件重新渲染，ref 对象的 current 属性的值将被重置为 null。