忙了一上午，大脑是不是像被塞满文件的旧抽屉，有点转不动了？别急着趴在桌上补觉，来和我一起享受一段 “知识下午茶”！今天咱们用一杯茶的时间，拆解一道超高频的 React 面试题，没有枯燥的理论，只有轻松有趣的干货，让你在午休时光悄悄变强～最近不少前端小伙伴都在面试时被问懵了：“React 组件中，refs 到底怎么用？和 props、state 有啥区别？” 别慌，这就为你揭开它的神秘面纱！

一、认识 refs：React 里的 “快速直达通道”

如果说 props 是组件间传递数据的 “快递”，state 是组件的 “私人小账本”，那 refs 就是一条能直接访问 DOM 元素或组件实例的 “快速直达通道”。它就像你给家里的每个房间都装了一个专属门铃，不用绕路就能直接找到对应的房间。在 React 里，我们一般用useRef钩子来创建 ref。

import React, { useRef } from'react';
function InputComponent() {
// 创建一个ref对象，用来引用input元素
const inputRef = useRef(null);
const handleFocus = () => {
// 通过ref.current获取真实的DOM元素，并调用focus方法
inputRef.current.focus();
};
return (
<div>
<input type="text" ref={inputRef} /> {/* 将ref绑定到input元素 */}
<button onClick={handleFocus}>聚焦输入框</button>
</div>
);
}

在这段代码里，inputRef就是一个 ref，它就像给input元素配了一把 “专属钥匙”。点击按钮时，通过inputRef.current拿到真实的input DOM 元素，然后调用focus方法，就能让输入框自动获得焦点。

二、refs 的常见使用场景

1. 操作 DOM 元素

除了上面让输入框聚焦的例子，还可以用 refs 获取元素的尺寸、滚动位置等信息。比如实现一个自动滚动到顶部的按钮：

import React, { useRef } from'react';
function ScrollComponent() {
const divRef = useRef(null);
const handleScrollToTop = () => {
// 通过ref获取div元素，并将其滚动到顶部
divRef.current.scrollTop = 0;
};
return (
<div>
<div ref={divRef} style={{ height: '200px', overflow: 'auto' }}>
{/* 这里放很多内容，模拟可滚动区域 */}
{Array.from({ length: 50 }).map((_, index) => (
<p key={index}>这是第 {index + 1} 行内容</p>
))}
</div>
<button onClick={handleScrollToTop}>回到顶部</button>
</div>
);
}

2. 访问子组件实例

有时候我们想调用子组件里的方法，就可以通过 refs 来实现。比如子组件有一个打印日志的方法：

import React, { useRef } from'react';
function ChildComponent() {
const printLog = () => {
console.log('子组件打印日志');
};
return null;
}
function ParentComponent() {
const childRef = useRef(null);
const handleCallChildMethod = () => {
// 通过ref调用子组件的printLog方法
if (childRef.current) {
childRef.current.printLog();
}
};
return (
<div>
<ChildComponent ref={childRef} />
<button onClick={handleCallChildMethod}>调用子组件方法</button>
</div>
);
}

三、refs 与 props、state 的区别

props 就像 “外部快递”，用来实现组件间的数据传递；state 是组件的 “内部账本”，存储组件自身变化的数据；而 refs 是 “快速通道”，用来直接访问 DOM 元素或组件实例。props 和 state 的变化会触发组件重新渲染，但修改 refs 不会触发重新渲染，它更像是一种 “偷偷摸摸” 的直接操作。

面试回答范本

当面试官问 “React 组件中，refs 到底怎么用？和 props、state 有啥区别？”，你可以这样回答：

“refs 在 React 里就像一条快速通道，能直接访问 DOM 元素或组件实例。比如想让输入框自动聚焦，或者获取元素的滚动位置，就可以用useRef创建 ref 来实现。和 props、state 比起来，props 是组件间传递数据用的，state 用来存组件自己变化的数据，它们变了会触发组件重新渲染；而 refs 主要是直接操作，它的修改不会触发重新渲染，使用场景不太一样。”

午休时光转瞬即逝，但这几分钟的学习，说不定就能成为你面试时的加分项！如果觉得今天的内容对你有帮助，别忘了点赞、关注～明天同一时间，还有更多有趣的 React 面试题等你来探索！你在实际项目中，用 refs 解决过哪些有意思的问题呢？欢迎在评论区分享，咱们一起交流～