在 React 中，useRef 是一个钩子，用于返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数（initialValue）。这个返回的对象在组件的整个生命周期内保持不变。useRef 可以用来直接访问 DOM 元素或存储任何不会引起重新渲染的可变值。

以下是如何使用 useRef 访问 DOM 元素的示例：

示例：使用 useRef 访问 DOM 元素

import React, { useRef, useEffect } from 'react';function MyComponent() {const myDivRef = useRef(null);useEffect(() => {// 访问 DOM 元素if (myDivRef.current) {myDivRef.current.style.backgroundColor = 'lightblue';}}, []);return (<div ref={myDivRef}>这个 div 的背景颜色是通过 useRef 设置的。</div>);
}export default MyComponent;

在这个例子中：

1. 创建 Ref：const myDivRef = useRef(null); 创建一个初始值为 null 的 ref 对象。
2. 附加 Ref：ref={myDivRef} 属性将 ref 附加到 <div> 元素上。
3. 使用 Ref：在 useEffect 钩子中，myDivRef.current 允许你访问 div DOM 元素，从而可以直接操作它。

示例：使用 useRef 存储可变值

import React, { useRef } from 'react';function Counter() {const countRef = useRef(0);const handleClick = () => {countRef.current += 1;console.log(`计数值现在是: ${countRef.current}`);};return (<div><button onClick={handleClick}>增加计数</button></div>);
}export default Counter;

在这个例子中：

1. 创建 Ref：const countRef = useRef(0); 创建一个初始值为 0 的 ref 对象。
2. 更新 Ref：handleClick 函数更新 countRef.current 而不会引起重新渲染。

关键点

• 持久性：ref 对象在重新渲染之间保持持久。
• 无重新渲染：更新 ref 对象的 .current 属性不会引起组件重新渲染。
• DOM 访问：useRef 通常用于直接访问和操作 DOM 元素。

以上例子展示了如何在 React 中基本使用 useRef 来访问 DOM 元素和存储可变值。