当前位置：首页 > article >正文

React-useRef

article 2025/9/14 3:30:55

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])