使用 React Refs 和 useRef Hook
React 使用声明式方法。你更新状态（state），React 就会更新 UI。这对于大多数任务都有效。
但有时你需要跳出虚拟 DOM（Virtual DOM）。你可能需要直接操作真实的 HTML 元素。这就是 Refs 和 useRef hook 发挥作用的地方。
什么是 Ref？
Ref 是一个指针。它将 React 直接连接到原生 DOM 节点。
为什么要使用 useRef 而不是 useState？
State 的更新会触发重新渲染（re-render）。这意味着 React 会在屏幕上重新绘制组件。 Ref 的更新不会触发重新渲染。这使得它们非常适合那些会发生变化、但不需要立即显示在 UI 中的值。
常见使用场景：
• 自动聚焦输入框。 • 控制视频或音频元素（播放/暂停）。 • 测量元素的宽度或高度。 • 存储定时器（interval 或 timeout）的 ID。
如何使用 useRef：
- 从 React 中导入
useRef。 - 初始化它：
const myRef = useRef(null)。 - 将其绑定到元素：
<input ref={myRef} />。 - 通过
myRef.current访问其值。
示例 1：自动聚焦输入框
当用户进入页面时，你希望光标直接位于文本框中。你可以使用 useEffect 在组件挂载后调用 myRef.current.focus()。
示例 2：秒表
如果你将 setInterval 的 ID 存储在 state 中，每次定时器跳动时组件都会重新渲染。这会导致性能变慢。如果你将 ID 存储在 ref 中，组件就能保持高效。该值在多次渲染之间保持稳定，且不会给浏览器带来额外的负担。
State vs Ref：
• State：触发重新渲染。用于 UI 数据。更新是异步的。 • Ref：不触发重新渲染。用于 DOM 访问和内存存储。更新是同步的。
高级进阶技巧：
• 避免过度使用。仅在声明式逻辑无法实现时才使用 refs。
• 清理内存。务必在清理函数（cleanup function）中清除定时器或事件监听器。
• 不要在渲染期间写入 refs。仅在 useEffect 或事件处理函数中更新 ref.current。这可以防止副作用。
• 使用 forwardRef。如果你想将 ref 传递给自定义的子组件，必须使用 React.forwardRef 对该子组件进行包装。
来源：https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde