useRef 引用钩子

最后更新：2026-10-28

useRef 返回一个 { current } 容器：跨渲染持久保存任意值，修改它不会触发重渲染。最常见用途是拿到 DOM 节点（聚焦、测量、滚动），其次是存放定时器 id 等不参与渲染的可变数据。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

const ref = useRef(initialValue)
ref.current          // 读取
ref.current = ...    // 写入：合法，但不触发渲染

<input ref={ref} />  // 挂到 DOM 后 ref.current 就是节点本身

initialValue	current 的初始值，只在首次渲染生效；之后修改参数不会重新赋值。

返回值：返回稳定的 { current: initialValue } 对象：组件整个生命周期内是同一个引用。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

点「聚焦」光标跳入输入框；点「清空并聚焦」输入清空且光标自动回到框内——这些 DOM 操作 state 做不到。

💡 提示 声明式能做的（渲染内容）用 state；命令式必须做的（聚焦、滚动、测量）才用 ref。

ℹ️ 说明 修改 ref.current 不会重渲染——ref 是「逃逸舱」，别拿来存会影响 UI 的数据。

⚠️ 注意 渲染期间读写 ref 会破坏纯函数约定（惰性初始化除外），操作 ref 放在事件处理器或 effect 里。

更多案例整理中，敬请期待。

Q ref 和 state 的区别？

A state 变化触发重渲染，ref 变化不会；state 是「渲染用的数据」，ref 是「过程用的数据」。

Q ref.current 初始值什么时候生效？

A 首次渲染创建 ref 时生效；后续组件重渲染不会因参数变化而重置 current。

Q 能拿到子组件内部的 DOM 吗？

A 默认不能（ref 不是普通 prop）。用 forwardRef 转发，或让子组件暴露 useImperativeHandle 接口。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。