React中的useRef的用法

useRef 是 React 提供的一个钩子（Hook），主要用于在组件生命周期内持久存储数据或直接访问 DOM 元素，它的核心特点是：数据更新不会触发组件重新渲染，且在组件多次渲染之间保持不变。

基本用法

复制代码

import { useEffect, useRef } from 'react'; // 导入React的副作用钩子和引用钩子
import './App.css'; // 导入组件样式文件


function Bpp() {
  // 创建一个引用对象，用于关联DOM元素（此处关联input输入框）
  // useRef返回的对象在组件生命周期内保持不变，current属性用于存储DOM元素引用
  const inputRef = useRef(null);
  
  // 在组件渲染时打印ref对象（此时可能尚未关联到DOM元素，current可能为null）
  console.log('inputRef', inputRef);

  // useEffect钩子：用于执行副作用操作，第二个参数为空数组表示只在组件挂载时执行一次
  useEffect(() => {
    // 组件挂载完成后打印ref对象（此时已关联到DOM元素，current为input元素）
    console.log('inputRef 在useEffect中执行的', inputRef);
    // 调用input元素的focus方法，实现页面加载后自动聚焦到输入框
    inputRef.current.focus();
  }, []);

  return (
    <div >
      {/* 将inputRef与input元素关联，ref属性接收引用对象 */}
      <input ref={inputRef} type="text" />
      {/* 按钮点击事件：通过ref获取input元素并调用focus方法，手动触发聚焦 */}
      <button onClick={() => { inputRef.current.focus() }}> Focus input</button>
    </div>
  );
}

export default Bpp; // 导出组件供其他模块使用

两大核心用途

（1）访问 DOM 元素

通过 ref 属性将 ref 对象与 DOM 元素关联，从而直接操作 DOM（如聚焦输入框、获取元素尺寸等）。

示例：

复制代码

function InputComponent() {
  // 创建 ref 关联 input 元素
  const inputRef = useRef(null);

  // 点击按钮让输入框聚焦
  const handleFocus = () => {
    inputRef.current.focus(); // 直接调用 DOM 方法
  };

  return (
    <div>
      <input ref={inputRef} type="text" /> {/* 关联 ref */}
      <button onClick={handleFocus}>聚焦输入框</button>
    </div>
  );
}

组件挂载后，inputRef.current 会自动指向对应的 DOM 元素。

注意：在组件首次渲染时，ref 尚未关联 DOM，current 为初始值（如 null），因此若需操作 DOM，通常配合 useEffect（确保 DOM 已挂载）。

（2）存储跨渲染周期的数据

useRef 存储的数据在组件多次渲染时保持不变，且修改 current 不会触发组件重新渲染（这一点与 useState 不同）。适用场景：存储定时器 ID、上一次渲染的状态等。

示例：

复制代码

function TimerComponent() {
  const timerRef = useRef(null); // 存储定时器 ID

  const startTimer = () => {
    // 启动定时器并存储 ID
    timerRef.current = setInterval(() => {
      console.log('定时器运行中...');
    }, 1000);
  };

  const stopTimer = () => {
    // 使用存储的 ID 清除定时器
    clearInterval(timerRef.current);
  };

  return (
    <div>
      <button onClick={startTimer}>启动</button>
      <button onClick={stopTimer}>停止</button>
    </div>
  );
}

关键特性

非响应式：修改 ref.current 不会触发组件重新渲染（区别于 useState）。
持久化：ref 对象在组件的整个生命周期内保持不变（每次渲染返回的是同一个对象）。
DOM 安全：即使组件重新渲染，ref 关联的 DOM 元素也会自动更新（无需手动处理）。
总结
useRef 是 React 中操作 DOM 和存储跨渲染数据的重要工具，核心是通过 current 属性访问或修改存储的值，且不影响组件的渲染机制。