当前位置：首页 > news >正文

react的useRef用什么作用

news 2025/7/7 14:28:12

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 <input ref={inputRef} />;
}

2.保存可变数据:

useRef 也可以用来保存不引起重新渲染的可变数据。即使 useRef 的值改变，组件也不会重新渲染。

import React, { useRef } from 'react';function Counter() {const count = useRef(0);const increment = () => {count.current += 1;console.log(count.current);};return <button onClick={increment}>Increment</button>;
}

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 (<div><p>Now: {count}</p><p>Before: {prevCount}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}