useRef 是 React 提供的一个钩子，用于在函数组件中创建和管理对 DOM 元素或组件实例的引用。它返回一个包含 current 属性的对象，可以用来存储对某个值的引用，而这个引用在组件的整个生命周期内保持不变。
useRef 的主要用途
1.访问 DOM 元素:
通过 useRef 创建的引用可以用来访问和操作 DOM 元素。这在处理需要直接操作 DOM 的情况时很有用，比如设置焦点、获取元素的尺寸等。
import React, { useRef, useEffect } from 'react';
function MyComponent() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus(); // 组件挂载后设置输入框焦点
}, []);
return ;
}
1
2
3
4
5
6
7
8
9
10
11
12
2.保存可变数据:
useRef 也可以用来保存不引起重新渲染的可变数据。即使 useRef 的值改变，组件也不会重新渲染。
import React, { useRef } from 'react';
function Counter() {
const count = useRef(0);
const increment = () => {
count.current += 1;
console.log(count.current);
};
return ;
}
1
2
3
4
5
6
7
8
9
10
11
12
3.存储上一个渲染的值:
useRef 可以用来存储组件上一个渲染周期中的某些值。
import React, { useRef, useEffect, useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();
useEffect(() => {
prevCountRef.current = count;
}, [count]);
const prevCount = prevCountRef.current;
return (
Now: {count}
Before: {prevCount}
);
}
