小伙伴们中午休息时候是不是都累得只想瘫自己座位上？但想想升职加薪、跳槽涨薪的目标，又忍不住想学点 React 提升自己。别愁！今天咱就用轻松的方式，聊聊 3 道 React 高频面试题，帮你悄悄攒实力，面试不慌！

一、面试官：组件之间怎么通信呀？

刚入行的前端朋友可能一听到这问题就紧张，脑海里闪过各种概念却抓不住重点。别慌，咱慢慢捋。React 里组件通信方式可不少，根据组件关系选合适的方法最重要。

1. 父子组件：props 最直接

父组件给子组件传数据，直接通过 props 就行。子组件想给父组件传数据，就用回调函数。比如父组件有个按钮，点击后子组件显示内容，代码这样写：

// 父组件
function ParentComponent() {
const [message, setMessage] = React.useState('');
const handleSend = (text) => {
setMessage(text); // 子组件通过回调传过来的数据更新父组件状态
};
return (
<div>
<ChildComponent onSend={handleSend} /> {/* 父传子props，带回调函数 */}
<p>子组件传来的消息：{message}</p>
</div>
);
}
// 子组件
function ChildComponent({ onSend }) {
const handleClick = () => {
onSend('Hello from child!'); // 子组件调用回调，传数据给父组件
};
return <button onClick={handleClick}>发送消息给父组件</button>;
}

2. 兄弟组件：状态提升到共同父组件

兄弟俩要通信，就找它们的共同 “家长”。比如两个输入框，一个输入姓名，一个输入年龄，都交给父组件管理状态，再分别传给两个子组件。

3. 跨层级组件：Context 或 Redux

如果组件嵌套很深，一层层传 props 太麻烦，就用 React 自带的 Context，或者状态管理库 Redux。Context 适合简单的全局状态，比如主题切换；Redux 适合复杂的应用级状态管理。

二、面试官：useEffect 和 useLayoutEffect 啥区别呀？

这俩钩子长得像，作用可不一样，用错地方可能出问题哦。

useEffect：异步处理，适合数据获取、订阅等

它在浏览器完成渲染后执行，不会阻塞页面渲染，所以适合做一些异步操作，比如从 API 获取数据。而且可以通过依赖数组控制什么时候执行，比如依赖项变化时才执行。

useLayoutEffect：同步执行，适合操作 DOM

它和 useEffect 功能差不多，但会在浏览器渲染之前执行，也就是在 DOM 更新之后、浏览器绘制之前执行。如果你的操作涉及同步更新 DOM 并需要立即看到效果，比如测量布局、调整样式，就用它。不过要注意，它可能会阻塞页面渲染，影响性能，所以别滥用。

三、面试官：虚拟 DOM 和 Diff 算法是啥，有啥用？

这可是 React 的核心秘密武器，搞懂了能让你对 React 理解更深一层。

虚拟 DOM：用 JS 对象模拟真实 DOM

真实 DOM 操作很慢，每次更新都可能引发回流和重绘，影响性能。React 就用 JS 对象创建了一个 “虚拟 DOM”，当状态变化时，先在虚拟 DOM 上计算出变化，再把变化应用到真实 DOM 上，这样就减少了真实 DOM 的操作次数，提升了性能。

Diff 算法：找出虚拟 DOM 的变化

当虚拟 DOM 树发生变化时，Diff 算法会比较新旧两棵虚拟 DOM 树，找出具体的变化，然后只更新变化的部分到真实 DOM。它主要做了三件事：按层级比较，不跨层级移动节点；同一层级比较，用唯一 key 标识节点；对列表进行优化，减少不必要的重新渲染。

争议话题：面试被问没准备的题，如实说还是硬答？

有的小伙伴觉得如实说显得诚实，有的觉得硬答一下说不定能蒙对。你怎么看呢？快来评论区说说你的想法！

好啦，今天的 3 道 React 面试题就聊到这儿。是不是感觉没那么难了？每天学一点，慢慢就积累起来了。记得点赞关注，明天还有更多实用的前端知识分享哦！