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

React 中 useRef 使用方法

news 2025/8/11 13:16:23

useRef() 是 React 提供的一个 Hook，用来创建一个可变的“容器”，它可以存储一个可变的值，并且这个值的改变不会引起组件重新渲染。

1、useRef 和 useState 的区别

特点	`useRef`	`useState`
值是否引发渲染	否	是
用途	保存可变值或 DOM 引用	保存状态，用来驱动界面渲染
修改方式	直接赋值 `ref.current = ...`	用 setter 函数，如 `setState`

2、为什么说是通过 ref 访问真实 DOM 元素

1. 什么是真实 DOM 元素？
- 真实 DOM 元素就是浏览器里渲染的 HTML 元素，比如
  、这些，JS 通过 document.getElementById() 等方式可以拿到它们。
- React 把 JSX 转换成真实 DOM 渲染到页面上。
1. ref 的作用
- React 中，ref 用来“获取”这些真实 DOM 元素的引用，方便你直接操作 DOM，比如聚焦输入框、测量大小、调用原生方法等。
- React 渲染后，会自动把对应的 DOM 节点赋值给你传入的 ref.current。

function MyInput() {const inputRef = React.useRef(null);React.useEffect(() => {// 组件挂载后，inputRef.current 就是 <input> 的真实 DOMinputRef.current.focus();  // 让输入框自动获得焦点}, []);return <input ref={inputRef} />;
}
这里：
inputRef.current 是真实的 <input> DOM 元素。
你可以直接调用 DOM 原生方法，比如 focus()。

const [show, setShow] = useState(false);
function showNotice() {setShow(true);}function closeNotice() {setShow(false);}
//系统方法暴露给父组件useImperativeHandle(cRef, () => ({showNotice: showNotice,closeNotice: closeNotice,}));<Modalref={cRef}isOpen={show}/>