React useRef 实际用例

探索 useRef 的多种用途：访问 DOM 节点、存储可变值、保存前一次状态等。 · 难度：入门 · +15XP

useRef 概览

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数。返回的对象在组件的整个生命周期内保持不变。useRef 主要有两个用途：

1. 访问 DOM 元素

将 ref 传递给元素的 ref 属性，即可直接访问该 DOM 节点。

function TextInput() {
  const inputRef = useRef(null);
  const focusInput = () => inputRef.current.focus();
  return (
    <>
      <input ref={inputRef} type='text' />
      <button onClick={focusInput}>聚焦输入框</button>
    </>
  );
}

2. 存储可变值

与 state 不同，改变 ref 的 current 属性不会触发重新渲染。适合存储定时器 ID、滚动位置等。

3. 保存前一次状态

结合 useEffect，可以轻松获取前一次渲染的值。

练习提示

在下方代码中，实现一个计时器：点击开始按钮后，每秒计数加一，使用 useRef 保存定时器 ID 以便停止。