React 的 useRef
钩子函数的作用是:
- 创建引用:
useRef
创建一个引用对象,用于存储某个值或对象。 - 持久化状态:
useRef
可以用于持久化某个状态,即使组件重新渲染,也不会丢失该状态。 - 访问 DOM 节点:
useRef
可以用于访问 DOM 节点,例如获取某个元素的引用。
useRef
的基本语法是:
import { useRef } from 'eact';
function Example() {
const inputRef = useRef(null);
return (
<div>
<input ref={inputRef} type='text' />
<button onClick={() => inputRef.current.focus()}>Focus</button>
</div>
);
}
在上面的示例中,我们使用 useRef
创建了一个引用对象 inputRef
,用于存储某个输入框的引用。然后,我们使用 ref
属性将该引用对象关联到输入框上。在按钮的点击事件处理函数中,我们使用 inputRef.current
来访问输入框的引用,并将其聚焦。
useRef
的特点是:
- 持久化状态:
useRef
创建的引用对象是持久化的,即使组件重新渲染,也不会丢失该状态。 - 可变:
useRef
创建的引用对象是可变的,可以通过 current
属性来访问和更新该引用对象。 - 不触发重新渲染:更新
useRef
创建的引用对象不会触发组件的重新渲染。
useRef
的常见用法包括:
- 访问 DOM 节点:使用
useRef
来访问某个 DOM 节点,例如获取某个元素的引用。 - 持久化状态:使用
useRef
来持久化某个状态,即使组件重新渲染,也不会丢失该状态。 - 实现复杂的交互逻辑:使用
useRef
来实现复杂的交互逻辑,例如实现某个元素的拖拽功能。
需要注意的是,useRef
创建的引用对象是可变的,因此需要小心地更新该引用对象,以免引发不必要的重新渲染。