react中useRef是什么?有啥用?怎么用?

embedded/2024/9/23 7:18:07/

useRef是什么?

在 React 中，useRef 是一个 Hook，它可以用来存储一个可变的值，这个值在组件的整个生命周期内保持不变。useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传递给 useRef 的参数（initialValue）。返回的对象将在组件的整个生命周期内持续存在。

useRef 通常有两个主要的用途：

访问 DOM 节点：当你需要直接访问一个 DOM 节点时（例如，要管理焦点、文本选择或媒体播放），你可以使用 ref 来获取对该节点的直接引用。
存储任意可变值：如果你需要跨渲染保持一个可变值，而这个值不应该引起组件的重新渲染时，你可以使用 ref。

访问 DOM 节点
下面是一个使用 useRef 访问 DOM 节点的例子：

import React, { useRef, useEffect } from 'react';function TextInputWithFocusButton() {// 初始化一个 ref，初始值为 nullconst 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() 方法来让输入框获得焦点。

存储可变值

//下面是一个使用 useRef 存储可变值的例子：
import React, { useRef } from 'react';function TimerComponent() {const count = useRef(0); // count 的初始值为 0const 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 在组件的整个生命周期内保持不变，即使在组件重新渲染时也是如此。这样，我们可以在开始和停止计时器的函数之间共享这个值，而不需要将其作为组件的状态。使用状态的话，每次状态更新都会导致组件重新渲染，这在这种情况下是不必要的。

//例子二 const queryRef = useRef({code1: '',code2: ''});const PrintBtn = () => {console.log('testBtn', queryRef.current); //永远都是获取到最新的值};<div><inputonChange={(e) => {queryRef.current.code1 = e.target.value;}}placeholder="请输入文本1"></input><inputonChange={(e) => {queryRef.current.code2 = e.target.value;}}placeholder="请输入文本2"></input><Button onClick={PrintBtn}>Print</Button></div>