凌晨两点还在刷面试题？前端打工人懂你！今天咱们不整虚的，直接盘一盘 5 道 React 面试高频题，这些都是大厂面试官爱揪着问的 “狠角色”，吃透它们，下次面试直接拿捏全场！

先考考你，useEffect的第二个参数到底咋用？还有，函数式组件和类组件到底谁更胜一筹？别慌，这些让人挠头的问题，咱们一个一个拆解。不管你是刚入门的 “前端小白”，还是想跳槽冲大厂的 “老司机”，这篇文章都能让你收获满满干货。

高频面试题大揭秘

useEffect 的执行机制和依赖项如何理解？

这道题几乎是 React 面试的 “常驻嘉宾”，很多人在它面前吃过大亏。useEffect就像 React 组件里的 “幕后管家”，负责处理组件渲染后的副作用操作，比如数据获取、订阅事件、DOM 操作等等。

import React, { useState, useEffect } from'react';
function Example() {
// 定义一个状态变量count
const [count, setCount] = useState(0);
// useEffect会在组件挂载和count更新时执行
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

在上面的代码里，useEffect的第二个参数[count]是个关键。它就像一个 “监控清单”，只有清单里的变量（这里是count）发生变化时，useEffect里的回调函数才会重新执行。要是不传这个参数，useEffect会在每次组件渲染后都执行，很容易引发性能问题；要是传个空数组[]，它就只在组件挂载时执行一次，相当于类组件里componentDidMount的效果。

函数式组件和类组件有什么区别？

这也是面试官超爱问的 “灵魂拷问”。函数式组件和类组件就像前端世界里的 “两大门派”，各有千秋。

函数式组件简单轻便，代码量少，用起来超顺手。而且自从有了 Hook，函数式组件也能轻松实现状态管理和副作用操作了，比如上面提到的useEffect。再加上它天生支持 React 的新特性，像 React Server Components，未来发展潜力巨大。

import React from'react';
// 函数式组件
const FunctionalComponent = () => {
return <div>Hello, Functional Component!</div>;
};

类组件相对来说结构更完整，能通过生命周期方法（componentDidMount、componentDidUpdate等）更细致地控制组件的运行流程。但它的语法比较繁琐，代码量也更多，而且在使用高阶组件时容易出现嵌套地狱。

import React, { Component } from'react';
// 类组件
class ClassComponent extends Component {
render() {
return <div>Hello, Class Component!</div>;
}
}

什么是 React Fiber？

React Fiber 就像 React 团队给前端开发带来的 “秘密武器”。在以前，React 的渲染是同步阻塞的，一旦任务量大，页面就容易卡顿，用户体验超差。而 Fiber 采用了 “可中断的异步渲染” 机制，把渲染任务拆分成一个个小任务，就像把一大块蛋糕切成小块，每次只处理一小块，处理完就看看有没有更高优先级的任务要插队。如果有，就先去处理高优先级任务，处理完再回来接着切蛋糕，这样就能保证页面的流畅性，让用户操作更丝滑。

如何进行 React 性能优化？

性能优化可是前端开发的 “必修课”，面试时肯定少不了它。从组件层面来说，可以用React.memo和useMemo、useCallback来避免不必要的重新渲染。React.memo就像给函数式组件加了一道 “过滤门”，只有当它的 props 发生变化时，组件才会重新渲染；useMemo用来缓存计算结果，防止重复计算；useCallback则用来缓存函数，避免子组件因为函数引用变化而不必要地重新渲染。

从全局角度，代码分割、懒加载也是优化性能的好办法。把代码按功能拆分成多个小块，用户访问页面时只加载必要的部分，后续用到其他功能再加载对应的代码，这样能大大减少首次加载的时间，提高页面打开速度。

Redux 和 React Context 的使用场景有什么不同？

Redux 和 React Context 都是用来管理状态的，不过它们的 “脾气” 可不一样。Redux 就像一个严格的 “管家”，有一套严谨的流程和规范。它适合处理复杂的全局状态管理，比如电商应用里的购物车数据、用户登录状态等，这些数据变化频繁，而且需要在多个组件之间共享和更新，Redux 的集中式管理和严格的数据流控制能让状态管理变得井井有条。

React Context 更像是一个 “快捷通道”，它使用起来简单直接，适合传递一些不需要复杂逻辑处理的全局数据，比如主题颜色、语言设置等。虽然它也能实现状态共享，但在处理复杂的状态更新逻辑时，就有点力不从心了。

答案范本，面试稳赢

useEffect 的执行机制和依赖项如何理解？

面试官问useEffect的执行机制和依赖项，咱就这么说：“useEffect是 React 处理副作用的核心 API。它会在组件渲染完成后执行，第二个参数是依赖项数组，相当于一个‘触发开关’。只有数组里的变量发生变化，useEffect的回调函数才会重新执行。不传依赖项，每次组件渲染后都会执行；传空数组，就只在组件挂载时执行一次，这就和类组件里的componentDidMount效果类似。这样能避免不必要的重复执行，提高性能。”

函数式组件和类组件有什么区别？

被问到函数式组件和类组件的区别，别慌：“函数式组件语法简洁，代码量少，用起来很方便，而且有了 Hook 后，也能实现状态管理和副作用操作。它还天然适配 React 的新特性，发展前景好。类组件结构完整，能通过生命周期方法精细控制组件流程，但语法相对复杂，代码量多，用高阶组件时容易出现嵌套问题。现在函数式组件用得越来越多，不过在一些老项目里，类组件还是很常见的。”

什么是 React Fiber？

聊到 React Fiber，这么回答：“React Fiber 是 React 的新渲染架构，它解决了老版本同步阻塞渲染导致页面卡顿的问题。Fiber 把渲染任务拆分成小任务，采用可中断的异步渲染机制。就像一边切蛋糕一边留意有没有其他紧急事情，有就先处理，处理完再接着切，这样能保证页面流畅，用户操作不会出现卡顿，大大提升了用户体验。”

如何进行 React 性能优化？

回答性能优化问题，抓住重点：“React 性能优化可以从多个方面入手。组件层面，用React.memo、useMemo和useCallback避免不必要的重新渲染；全局层面，进行代码分割和懒加载，减少首次加载时间。比如React.memo能让函数式组件只有在 props 变化时才重新渲染，useMemo缓存计算结果，useCallback缓存函数，这些都能有效提升性能。”

Redux 和 React Context 的使用场景有什么不同？

被问到 Redux 和 React Context 的区别，清晰阐述：“Redux 适合复杂的全局状态管理，它有严谨的流程和规范，像电商应用的购物车数据、用户登录状态这些频繁变化且多组件共享的数据，用 Redux 管理很合适。React Context 使用简单，适合传递一些不需要复杂逻辑处理的全局数据，比如主题颜色、语言设置。不过在处理复杂状态更新逻辑时，Redux 更有优势。”

争议话题，等你来聊

现在函数式组件越来越火，很多新项目都只用函数式组件了，但也有人觉得类组件在一些特定场景下依然不可替代。你是 “函数式组件派”，还是 “类组件派” 呢？快来评论区聊聊你的看法，要是还有其他超难的 React 面试题，也欢迎分享，咱们一起攻克它们！

已涵盖高频知识点和解答。你若觉得某部分需补充，或想换其他类型面试题，随时和我说。