useRef是什么?
在 React 中,useRef 是一个 Hook ,它可以用来存储一个可变的值 ,这个值在组件的整个生命周期内保持不变 。useRef 返回一个可变的 ref 对象 ,其 .current 属性被初始 化为传递给 useRef 的参数(initialValue)。返回的对象将在组件的整个生命周期内持续存在。
useRef 通常有两个主要的用途:
-
访问 DOM 节点:当你需要直接访问一个 DOM 节点时(例如,要管理焦点、文本选择或媒体播放),你可以使用 ref 来获取对该节点的直接引用。
-
存储任意可变值:如果你需要跨渲染保持一个可变值,而这个值不应该引起组件的重新渲染时,你可以使用 ref。
访问 DOM 节点
下面是一个使用 useRef 访问 DOM 节点的例子:
js
import React, { useRef, useEffect } from 'react';
function TextInputWithFocusButton() {
// 初始化一个 ref,初始值为 null
const inputEl = useRef(null);
// 一个按钮点击事件的处理函数,它会将焦点设置到 input 元素上
const onButtonClick = () => {
// `current` 指向已经挂载在 DOM 上的文本输入元素
inputEl.current.focus();
};
return (
<>
{/* 将 ref 关联到 input 元素上 */}
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
//在这个例子中,我们创建了一个 ref 对象 inputEl 并将其关联到 <input> 元素上。通过点击按钮,我们可以调用 inputEl.current.focus() 方法来让输入框获得焦点。
存储可变值
js
//下面是一个使用 useRef 存储可变值的例子:
import React, { useRef } from 'react';
function TimerComponent() {
const count = useRef(0); // count 的初始值为 0
const handleStart = () => {
count.current = setInterval(() => {
console.log(`Interval triggered ${++count.current}`);
}, 1000);
};
const handleStop = () => {
clearInterval(count.current);
};
return (
<div>
<button onClick={handleStart}>Start</button>
<button onClick={handleStop}>Stop</button>
</div>
);
}
//在这个例子中,我们使用 useRef 来存储一个计时器的 ID 值。count.current 在组件的整个生命周期内保持不变,即使在组件重新渲染时也是如此。这样,我们可以在开始和停止计时器的函数之间共享这个值,而不需要将其作为组件的状态。使用状态的话,每次状态更新都会导致组件重新渲染,这在这种情况下是不必要的。
js
//例子二
const queryRef = useRef({
code1: '',
code2: ''
});
const PrintBtn = () => {
console.log('testBtn', queryRef.current); //永远都是获取到最新的值
};
<div>
<input
onChange={(e) => {
queryRef.current.code1 = e.target.value;
}}
placeholder="请输入文本1"
></input>
<input
onChange={(e) => {
queryRef.current.code2 = e.target.value;
}}
placeholder="请输入文本2"
></input>
<Button onClick={PrintBtn}>Print</Button>
</div>
注意事项::::
- 修改 useRef 返回的对象的 .current 属性不会触发组件的重新渲染。
- useRef 和创建一个 {current: ...} 对象的字面量不同,因为 useRef 会在每次渲染时返回同一个 ref 对象。
- 如果你将 ref 对象用于跟踪一个值,那么你应该在需要时手动处理这个值的更新和副作用,因为 React 不会为你做这些事情。
useRef 是 React 提供的一个强大的工具,它可以帮助你在函数组件中管理 DOM 引用和存储可变值,而不会引起额外的渲染。