基本概念：

用于创建和管理可变的引用。与 useState 和 useEffect 不同，useRef 返回的是一个可变的 ref 对象，ref 对象的 .current 属性可以用来存储任意值，它不会导致组件重新渲染。当你需要在组件中保持对 DOM 元素或任何可变数据的引用时，可以使用 useRef。

使用场景：

1. 访问 DOM 元素：用来获取对 DOM 元素的引用，从而可以直接操作这些元素（例如，设置焦点、读取滚动位置等）。

2. 存储可变数据：在组件的整个生命周期内存储不需要重新渲染的数据。例如，存储上次渲染时的状态，以进行一些自定义逻辑处理。

3. 保存定时器 ID：用于保存定时器的 ID，以便在需要时可以清除定时器。

4. 持有不变的引用：保存不需要触发组件更新的值，如防抖、节流函数等。

基本用法：

const ref = useRef(initialValue)

参数：

• initialValue: useRef 可以接受一个初始值，该值将成为 ref 对象的 .current 属性的初始值。如果不传递初始值，.current 默认为 undefined。

返回值：

• ref 对象: useRef 返回一个具有 .current 属性的对象。.current 属性可以用来存储和访问 DOM 元素或任何可变数据。ref 对象本身在组件的整个生命周期内是稳定的，不会随着组件的重新渲染而改变。

注意事项：

1. 不触发重新渲染：对 ref 对象的 .current 属性进行更改不会触发组件重新渲染。如果需要在某些数据变化时重新渲染组件，应使用 useState 或 useReducer。

2. 稳定性：useRef 返回的 ref 对象在组件的整个生命周期内保持不变。因此，ref 对象的引用是稳定的，不会因重新渲染而改变。

3. 避免过度使用：useRef 的主要用途是访问和操作 DOM 元素，以及存储不需引起重新渲染的可变数据。应避免使用 useRef 来管理需要重新渲染的状态。

4. 操作 DOM 元素：在函数组件中直接操作 DOM 元素时，可以使用 useRef，但建议将业务逻辑和 DOM 操作尽量分离，以保持组件的可维护性和可测试性。