React-useRef

news2025/5/20 21:37:31

useRef
useRef 是 React 的一个 Hook，用来创建一个可变的引用对象，这个引用对象在组件的整个生命周期内保持不变。
翻译成人话就是，用useRef创建一个相对共享的对象管理器，它里面装的内容的读写是不会引起界面渲染的。
典型的应用就是将某个界面控件放到里面，然后在适当的时候调出操作，比如获取 DOM 元素的引用，可以像原生 JavaScript 的 document.getElementById 一样，获取 DOM 元素。

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();  // 获取 input 元素并聚焦
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>点击聚焦</button>
    </div>
  );
}

如果要手动存放，则直接 const handlerRef = useRef(null); handlerRef.current = ‘abcd’/1234/handlerRef.current = handler; current可以装任何类型

比如如果在页面初始化时需要调用后端api，我一般将操作放在useLayoutEffect里面，但是useLayoutEffect会被至少执行两次！下面用useRef防止重复调用:

// 使用 ref 确保 updateCounter 只执行一次
  const counterUpdatedRef = useRef(false);
  // 使用 useLayoutEffect 确保在渲染完成后再设置返回处理函数
  useLayoutEffect(() => {
    const doit = async () => {
      // 确保 updateCounter 只执行一次
      if (!counterUpdatedRef.current && curTask?.id) {
        await updateCounter();
        counterUpdatedRef.current = true;
      }
      ...
    };

    doit();
  }, [curTask, setBackHandler])