React useRef 典型用例

学习 useRef 的多种用途：访问 DOM 节点、保存可变值、实现计时器 · 难度：入门 · +15XP

什么是 useRef？

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数。它有两个主要用途：访问 DOM 元素和保存可变值（不会触发重渲染）。

核心特性

• 持久化：在组件的整个生命周期内保持不变。
• 不触发渲染：修改 .current 值不会导致组件重新渲染。

代码示例：DOM 访问与计时器

import React, { useRef, useEffect, useState } from 'react';
function Timer() {
  const intervalRef = useRef();
  const [count, setCount] = useState(0);
  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(intervalRef.current);
  }, []);
  const stopTimer = () => {
    clearInterval(intervalRef.current);
  };
  return (
    <>
      <p>计数: {count}</p>
      <button onClick={stopTimer}>停止</button>
    </>
  );
}

常见用例

练习提示

创建一个输入框，使用 useRef 在页面加载时自动聚焦。再添加一个按钮，点击后打印当前输入框的值。