前端三阶段里React 这关到底怎么过我把新增面试题和踩坑记录一次整理完了如果你是正在培训机构学前端、刚好走到第三阶段 React 的朋友或者你已经在用 React 写项目但总感觉自己面试时说不清楚原理那这篇内容应该能帮上忙。我这些年看过不少从培训机构出来的候选人也带过实习生发现大家在三阶段 React 上的问题其实特别集中基础语法大家都会一碰到原理题、工程化题、跨端题就露怯。所以这篇文章我打算结合机构课程里三阶段 React 的学习路径再把我最近整理的新增面试题一并拆开讲包括 React 18 的更新批处理机制、Hooks 闭包陷阱、路由和 Vue 的差异、React Native 启动白屏这些高频考点全部用大白话加实操案例说清楚。1. 为什么前端课程到了第三阶段一定要学 React1.1 从培训机构课程设置看 React 的定位我不止一次被学员问过一个问题前面学了 HTML、CSS、JavaScript又学了 Vue为什么第三阶段还要再学一个 React是不是机构为了拖课时赚钱说实话课程这么安排确实有商业考量但从技术成长角度看React 这一关是绕不过去的。国内中小公司用 Vue 多大厂和外包项目里 React 的占比非常高而且一旦你开始接触 React Native、Taro 这类跨端方案底层全是 React 的思维。培训机构把 React 放在第三阶段恰恰是因为它需要你具备一定的 JavaScript 功底——尤其是 this 指向、闭包、数组方法、异步编程这些学完前面两个阶段再上手 React理解成本会低很多。还有一个很现实的原因面试。不管是校招还是社招React 相关问题的出现频率一点不比 Vue 低。你去看那些 2026 前端面试题汇总React 的考点永远占一大块从生命周期到 Fiber 架构从 setState 同步异步到函数式组件的渲染时机全是筛人利器。所以第三阶段的 React 不仅仅是学一个框架它是在帮你建立“框架思维”学完它再看 Vue、Taro、React Native都会觉得顺手很多。1.2 React 到底解决了什么问题很多人学 React 第一周会觉得莫名其妙不就是写个页面吗为什么要搞组件、搞状态、搞虚拟 DOM我用原生 JS 不也能写我用一个生活化的例子解释一下。你去餐厅吃饭如果是路边摊老板一个人记住你要什么就完事了但如果是连锁餐厅几十桌客人、几十道菜老板必须有一套标准化的点单流程——服务员记单、后厨按单出菜、传菜员上菜各司其职。原生 JS 写页面就像路边摊代码全堆在一起改一处可能牵动全身React 的组件化开发就像连锁餐厅的标准化流程每个组件只负责自己的 UI 和逻辑数据流清晰了多人协作不打架。React 的核心价值可以归纳成三点组件化把 UI 拆成独立、可复用的零件复杂页面变成搭积木。声明式 UI你只需要描述“界面应该长什么样”不需要关心 DOM 每一步怎么操作。Virtual DOM通过内存中的 DOM 对比减少真实 DOM 操作提升性能。1.3 适合谁来读这篇内容这篇文章不是纯理论教程更像是我结合培训机构三阶段教学内容和面试真题整理的一份“复习地图”。适合下面几类人正在培训机构学前端、马上要进入第三阶段 React 的学员可以先预习重点。学完 React 但面试总卡壳的求职者可以直接看第五部分的面试题解析。工作中从 Vue 转 React 的开发者重点关注路由差异和状态管理部分。用 Taro 或 React Native 做跨端开发、被各种诡异问题折磨的工程师第六部分整理了常见坑。2. 三阶段学习路线从 JSX 到工程化每一步该怎么走2.1 第一阶段JSX、组件、props 和 state三阶段课程一般会先用一周左右的时间讲 React 基础核心就四件事JSX 语法、函数组件和类组件、props 传参、state 状态管理。这个阶段最常见的误区是把 JSX 当成模板引擎实际上它本质是 JavaScript 的语法扩展。你写的div classNamebox{count}/div经过 Babel 编译后就是一个React.createElement(div, { className: box }, count)调用。理解这一点非常重要因为它解释了很多面试题为什么 JSX 里要用className而不是class因为class是 JavaScript 的保留字JSX 是 JS 的语法糖不能冲突。为什么 style 要传对象而不是字符串因为React.createElement的第二个参数就是一个 props 对象style 必须也是对象结构。props 和 state 的区别也是必考题。一句话总结props 是父组件传给子组件的数据子组件不能修改state 是组件自己内部的数据通过setState或useState的更新函数来修改。很多新手容易犯的错是在子组件里直接this.props.xxx yyy或者在函数组件里直接state.xxx yyy这在 React 里不会报错但也不会触发重新渲染属于典型的“改了没反应”问题。2.2 第二阶段Hooks、路由、状态管理第二阶段是整个 React 学习的核心也是最容易劝退的阶段。课程会系统讲 Hooks 里的常用 APIuseState、useEffect、useContext、useReducer、useMemo、useCallback、useRef然后是 React Router 路由最后是 Redux 或 Zustand 状态管理。这个阶段我建议大家不要急着背 API而是先建立一个认知Hooks 的出现是为了解决类组件里逻辑复用难、this 指向混乱、生命周期函数里塞了太多无关逻辑这三大痛点。用函数组件加 Hooks你可以把相关联的逻辑抽到自定义 Hook 里多个组件共用代码一下子干净了很多。学 Hooks 时有一个必踩的坑就是 useEffect 的依赖数组。课程里会讲“空数组表示只在挂载时执行”但很多人没理解透如果 effect 里用到了某个 props 或 state但依赖数组里没写那闭包捕获的就是第一次渲染时的值后面怎么更新都不会变。这就是经典的“闭包陷阱”面试时特别爱考第六部分我再详细说。路由和状态管理这两块我建议对比着学。React Router 的核心逻辑跟 Vue Router 很像都是“URL 变化 - 路由匹配 - 渲染对应组件”但具体写法不同我会在 5.4 单独对比。状态管理的话如果项目不大用 useContext 加 useReducer 就够了没必要一上来就上 Redux ToolkitRedux 真正解决的是跨组件共享状态和复杂状态逻辑的问题项目没到那个复杂度用 Redux 反而是负担。2.3 第三阶段工程化、性能优化、跨端开发到了培训机构的第三阶段后半程课程重心会从“会写 React”转向“写好 React”。这时候要重点关注四块内容第一是项目工程化。Webpack 或 Vite 怎么配置、Babel 怎么转译 JSX、ESLint 和 Prettier 怎么集成、环境变量怎么管理这些虽然不是 React 本身的 API但进公司第一天就要接触。我见过太多学员组件写得溜一让他配置一个开发环境就懵了这种情况面试官会直接判定为“只学会了框架没学会工程”。第二是代码分割和懒加载。React.lazy 和 Suspense 怎么用为什么路由级别要按需加载这些是性能优化的基础题。第三是组件的渲染性能优化。React.memo、useMemo、useCallback 三者的区别和适用场景几乎是面试必问。简单来说React.memo 缓存组件useMemo 缓存计算结果useCallback 缓存函数引用。它们的本质都是“减少不必要的重新渲染或重复计算”但用多了反而会造成性能下降因为缓存本身也有开销。第四是跨端开发。现在很多培训机构在 React 阶段末尾会加 Taro 或 React Native 的入门课让学员体验一套代码多端运行。这部分我会在 6.1 和 6.2 里重点讲因为跨端项目里的坑和 Web 端完全不一样都是血泪经验。3. React 18 的更新批处理机制到底是怎么一回事3.1 先说清楚什么是批处理React 18 这是一道新题也是网上讨论最多的话题之一里最核心的点。批处理Batching这个词听起来很玄乎其实就是指React 会把多个状态更新合并到一次重新渲染中完成。举个例子你在一个事件处理函数里连写三个 setStatefunction handleClick() { setCount(c c 1); setFlag(f !f); setName(hello); }如果没有批处理React 会渲染三次有了批处理React 只渲染一次。这在性能上的差别是非常明显的尤其是组件树很大的时候。那 React 18 之前没有批处理吗其实是有的React 17 及更早版本在 React 事件系统内部也会自动批处理。但它的局限是只有在 React 自己管理的合成事件处理器里才会批处理像 setTimeout、Promise 回调、原生事件监听器里是不会批处理的。这就导致了很多奇怪的行为——你明明在同一个函数里连续 setState但 React 却渲染了多次。3.2 React 18 的自动批处理是怎么实现的React 18 最大的变化就是不管你在哪里更新状态——事件处理器、定时器、Promise 回调、原生事件监听器、甚至异步函数里——React 都会自动帮你做批处理。用一个常见的场景来感受一下function fetchData() { setLoading(true); fetch(/api/data).then(() { setData(result); // 18 之前这里会单独渲染一次 setLoading(false); // 18 之前这里又会单独渲染一次 }); }在 React 17 里Promise 回调中的两个 setState 会触发两次渲染React 18 自动批处理之后这两个 setState 会被合并成一次渲染。页面的 Loading 状态和 Data 状态会在同一个渲染周期里完成切换不会出现“Loading 闪一下”的中间状态。这个机制在面试里怎么答才能拿高分关键要讲清楚底层原理React 18 是在整个应用层面引入了一个统一的调度器所有的更新都会被推入一个更新队列调度器会在当前同步任务执行完之后统一处理队列里的所有更新然后触发一次重新渲染。这里可以提一下并发特性里的调度优先级React 会根据更新的紧急程度决定谁先执行但这是一个更深的点面试时如果你能提到“update lane 优先级”这个概念面试官会觉得你是真读过源码的。3.3 批处理在实际开发里要注意什么自动批处理听起来很美好但有几个副作用需要留意这些也是面试题里容易出现的变种第一如果你需要强制同步渲染可以使用flushSync。场景很典型你在事件处理里先 setState 把一个弹窗打开然后马上要读取这个弹窗的 DOM 节点位置。自动批处理会让setState延迟生效导致你读不到最新的 DOM。这时候用flushSync(() setOpen(true))就能强制 React 同步执行这次更新。第二React 18 在开发模式下如果你在更新函数里直接修改了 state 对象控制台会警告因为 React 18 引入了更严格的 StrictMode 检查。很多人刚升级 React 18 时发现组件渲染了两次以为是 bug其实那是 StrictMode 故意做的副作用检查面试时也经常被问到。第三批处理只针对“同一个同步任务”中的多个 setState。如果两个 setState 分布在不同的宏任务里比如分别在两个 setTimeout 里那它们还是会被拆成两次渲染。批处理不是合并一切的魔法它合并的是同一轮事件循环里的更新。4. 实操项目复盘用 React 构建一个加减法计算器4.1 项目需求和设计思路热搜里有“react项目构建加减法计算器”这个词很多人觉得这题目太简单了不值得做。但实际上这个项目特别好地覆盖了 React 的核心知识点状态管理、事件处理、条件渲染、组件拆分。培训机构用这个项目作为 React 入门练习是非常合理的我也建议初学者不要眼高手低能把计算器做到极致基础就不会差。我们先定义需求两个数字输入框支持负数和小数。选择运算符加、减点按钮计算结果。显示历史运算记录。支持清空结果和历史记录。这个需求很简单但它涉及的核心知识点却很多表单受控组件、useState 管理多个状态、数组状态更新追加历史、条件渲染空历史时提示、key 的正确使用。4.2 核心代码实现与状态设计先设计 state。这里有个很容易犯的错一开始就想着把结果、输入值、历史记录全部塞到一个 state 对象里然后用一个setCalculatorState更新整个对象。这没错但可读性差。我更推荐按职责拆分const [num1, setNum1] useState(); const [num2, setNum2] useState(); const [operator, setOperator] useState(); const [result, setResult] useState(null); const [history, setHistory] useState([]);计算逻辑function calculate() { const a parseFloat(num1); const b parseFloat(num2); if (isNaN(a) || isNaN(b)) { alert(请输入有效数字); return; } const res operator ? a b : a - b; setResult(res); setHistory(prev [ ...prev, { expression: ${num1} ${operator} ${num2} ${res}, id: Date.now() } ]); }这里有一个非常关键的实践点也是很多人容易忽略的更新数组/对象类型的 state 时永远不要直接操作原 state而是要创建一个新的数组或对象。上面setHistory(prev [...prev, ...])的写法就是标准的不可变更新方式。如果你写了history.push(...)然后setHistory(history)React 比较新旧 state 时会发现引用没变不触发重新渲染页面就不更新——这个问题在培训学员的项目里出现率极高。历史记录的每条 item 需要有唯一 key我用了Date.now()。在生产环境里这不够严谨因为同一毫秒内可能生成两条相同 key但对于练习项目来说足够了。如果要做得更专业可以用crypto.randomUUID()或者自己写一个 id 生成函数。4.3 这个项目还可以怎么扩展成面试亮点很多学员交完计算器作业就结束了其实这个项目是展示 React 基本功的绝佳舞台稍微扩展一下就能在简历上写“独立开发了一个基于 React 的计算器应用覆盖状态管理、组件复用、性能优化”。我建议做三个方向的扩展第一个方向是用 useReducer 重构。把 num1、num2、operator、result、history 统一到一个 reducer 里管理action 分为setNum1、setNum2、setOperator、calculate、clear。这样做的意义是让你向面试官展示——我不仅会用 useState我还知道什么时候该用 useReducer 来集中管理复杂状态。第二个方向是抽离自定义 Hook比如useCalculator把所有的计算逻辑都封装进去。这能展示你对逻辑复用的理解面试官如果再追问“Hooks 为什么比 HOC 好”你就可以拿这个例子来说明。第三个方向是给计算器加上键盘事件监听用 useEffect 监听 keydown 事件让用户可以通过键盘输入数字和符号。这个扩展涉及 useEffect 的事件绑定与清理是一个非常好的 Hook 实战训练。5. 新增面试题整理这些题不会答三阶段等于白学5.1 React 基础高频题先整理几道最基础但淘汰率很高的题Q1React 中 key 的作用是什么为什么不能用 index 作为 key这是培训机构学员最容易被问倒的一道题。key 是 React 用来识别列表中每个元素的唯一标识它的核心作用是在 diff 阶段复用节点。如果列表只是单纯展示用 index 做 key 没问题但一旦列表有序操作插入、删除、排序用 index 会导致 React 误判元素身份从而引发状态错乱的 bug。经典的例子是一个列表项内部有输入框在中间插入一项后输入框里的文字会被带错行。这是因为 React 按 index 复用组件导致组件的状态被错误地映射到了另一项上。Q2类组件和函数组件的区别这道题在 React 16.8 Hooks 出来之后有了新答案。类组件有生命周期函数、this 指向问题、代码复用靠 HOC 和 render props函数组件配合 Hooks 后逻辑复用更简单没有 this 的困扰代码更简洁。面试时最好再加一句函数组件每一次渲染都会重新执行整个函数体类组件则只有实例化一次这个区别导致了闭包陷阱和渲染时机的不同。Q3setState 是同步还是异步这是一个经典陷阱题。正确回答是在 React 18 里setState 在 React 事件处理函数中是异步的会被批处理在 setTimeout、原生事件、Promise 回调里也是异步的因为自动批处理只有通过flushSync强制同步。React 18 之前setState 在 React 事件处理函数中是异步的、在 setTimeout 和原生事件中是同步的。最严谨的回答方式是setState 本身不是异步的它只是把更新加入了调度队列真正的更新时机由 React 的调度器决定。5.2 Hooks 必问系列Q4useEffect 的依赖数组不写会怎么样不写依赖数组则在每次渲染后都执行相当于 componentDidMount 加 componentDidUpdate。很多人偷懒不写依赖数组结果发现 effect 里做了 setState引发了无限循环渲染页面直接卡死。正确的做法是依赖数组要列出 effect 里所有用到的外部变量如果你确实不希望每次渲染都执行就把它写对。Q5闭包陷阱是怎么产生的用一个代码示例说明function Counter() { const [count, setCount] useState(0); useEffect(() { setInterval(() { console.log(count); }, 1000); }, []); }这个 effect 只在挂载时执行一次但 count 是从第一次渲染时捕获的永远是 0。即使后来 count 更新了定时器里打印的还是 0。解决方案有两种一是把依赖数组加上[count]这样 count 变化后 effect 会重新执行、重新创建定时器二是用useRef保存最新的 count 值。Q6useMemo 和 useCallback 有什么区别useMemo 缓存“值”useCallback 缓存“函数”。注意 useCallback 其实是 useMemo 的语法糖useCallback(fn, deps)等价于useMemo(() fn, deps)。使用场景也不同当子组件使用了 React.memo 时父组件传给它的函数如果不缓存每次渲染都会生成新的函数引用导致子组件 memo 失效。5.3 React 18 和架构相关题Q7React 18 除了自动批处理还有哪些新特性常见的回答是并发特性startTransition、useTransition、useDeferredValue以及 Suspense 的改进。startTransition 用于标记一个更新为“可中断的低优先级更新”典型场景是输入框实时搜索。用户输入是高优先级更新搜索结果列表是低优先级更新如果用 startTransition 包裹即使搜索结果计算量很大用户的输入响应也不会卡顿。Q8虚拟 DOM 一定比真实 DOM 快吗这是一个反套路面试题。答案是不一定。虚拟 DOM 的价值不在于“快”而在于“用可预测的方式减少真实 DOM 操作”。对于极简单的页面直接操作真实 DOM 可能更快虚拟 DOM 的优势体现在复杂应用上——它让跨平台的渲染成为可能React Native 就是因为虚拟 DOM 层可以把组件映射到原生控件也让开发者不需要手动优化 DOM 操作顺序。5.4 React Router 和 Vue Router 的差异对比这个热搜词很典型说明问的人很多。我把两者的核心差异整理成一个表格对比项React RouterVue Router路由配置JSX 组件形式用Routes和Route声明对象配置形式routes 数组加 createRouter路由传参useParams、useSearchParams、location.state$route.params、$route.query、props 传参导航方式编程式用 useNavigate声明式用Link声明式用router-link编程式用 router.push路由守卫无内置守卫需要自定义高阶组件或封装有全局前置守卫、路由独享守卫、组件内守卫动态路由路径参数用 :id 写法通过 useParams 获取路径参数用 :id 写法通过 route.params 获取核心差异在哪里React Router 把路由当“组件”来看待所以你能在 JSX 中直接声明路由Vue Router 把路由当“配置”来管理所以更接近传统后端路由的概念。React Router 没有内置路由守卫因为 React 本身就是组件化思维——你只需要写一个RequireAuth组件内部判断用户是否登录未登录就重定向到登录页然后把这个组件包裹在需要鉴权的路由外面就行。5.5 跨端和工程化面试题Q9React Native 启动白屏怎么排查这个热搜词出现的频率很高说明很多人在实际开发中踩过坑。白屏问题从现象上分两类一类是启动时白屏过一会儿才显示。这通常是因为在入口组件里做了同步的耗时操作比如同步读取本地存储、在主线程上执行了复杂计算导致 JS Bundle 执行完毕但在原生层渲染之前被阻塞了。React Native 的启动流程是原生容器启动 - 加载 JS Bundle - 执行 JS - 渲染组件。任何一个环节耗时过长都会出现白屏。解决办法是把非必要的初始化操作放到异步线程用 react-native-splash-screen 做一个原生启动页检查是否使用了 console.log 等调试代码生产环境下这些日志会拖慢 JS 执行。另一类是进入特定页面时白屏。这种情况常见于内存不足被系统回收或者导航库和组件库的版本不兼容。优先检查 React Native 版本和第三方库版本是否匹配特别是 reanimated、gesture-handler 这类原生依赖很强的库版本不一致很容易在真机上白屏。Q10Taro 开发印象最深的一个坑是什么Taro 的坑我在 6.2 里详细讲这里先给面试一个关键回答Taro 的 H5 端和微信小程序端的渲染机制不同不能把 H5 端的某些 DOM 操作直接搬到小程序里比如直接操作 window、document、获取元素 offsetWidth 等。在 Taro 里应该使用 Taro.createSelectorQuery() 这类 API 来获取元素信息。6. 避坑指南我在实际开发里踩过的 React 相关的坑6.1 React Native 启动白屏的排查实录我在 5.5 里提到了白屏问题这里展开说一下我实际的排查过程。有一次项目在 Android 真机上启动后白屏 3 秒左右iOS 上只有 0.5 秒非常明显。一开始我怀疑是 JS Bundle 体积太大于是检查 bundle 大小——确实有 8MB但删掉不必要的依赖后降到 5MB白屏时间没有太大改善。后来我打开 Android Studio 的 Logcat 才发现原生模块初始化时有一个第三方 SDK 在同步做网络请求网络超时导致主线程阻塞了 2 秒多。解决办法是把 SDK 初始化放到子线程并用一个启动页兜底白屏问题基本解决。这个案例给到大家的经验是排查白屏时不要一上来就怀疑 React 层面的问题先看原生日志确认原生容器有没有准备好再看看 JS 层面的耗时操作最后才考虑图片缓存、字体加载这些资源问题。6.2 Taro 跨端开发的三大常见坑用 Taro 写 React 语法然后编译到多端这个设计本身很棒但实际开发中很容易踩到这三个坑第一个坑是样式兼容性。H5 端支持很多 CSS 属性和选择器但小程序端不支持比如*通配符选择器、position: fixed在某些小程序端的表现也不一致。我的经验是遵循 Taro 的样式规范尽量用类选择器避免标签选择器和通配符flex 布局是最稳妥的Web 端和小程序端支持度都很好。第二个坑是路由参数的长度限制。小程序的路由参数是通过 URL 传递的有长度限制如果你用 navigateTo 传了一个很长的 JSON 字符串在某些平台上会被截断。解决方法是把大对象存入全局状态或本地存储只在路由参数里传一个 id。第三个坑是 setState 的异步渲染时机。Taro 的 setState 在小程序端的实现是异步的当你调用this.setState后立刻读取this.state拿到的还是旧值。这个问题在培训学员刚上手 Taro 时几乎人人都会遇到解决方法其实 React 文档里早就写了——不要依赖 setState 后的同步读取要么在回调里读取要么用await包裹Taro 支持 promise 化的 setState要么直接用 useState 配合 useEffect 监听状态变化。6.3 大文件上传时怎么用 Worker 不卡页面热搜里还有“前端使用 worker 上传大文件”这个虽然不是 React 专属但在 React 项目里做起来有一些注意事项。大文件上传时如果你在主线程里计算文件的分片哈希大文件会让页面卡死——因为哈希计算是 CPU 密集型任务。正确做法是用 Web Worker 在线程里计算哈希再把结果传回主线程主线程通过 axios 发分片请求。在 React 里使用 Worker 要注意两点第一Worker 文件路径问题。用 Webpack 或 Vite 时不能直接用字符串路径去 new Worker因为构建工具会重命名文件。推荐用 Vite 的?worker后缀导入或者用 Webpack 的new Worker(new URL(./worker.js, import.meta.url))写法。第二Worker 里的数据是拷贝传递的不是引用传递。如果你在 Worker 里修改了一个对象主线程里的原对象不会变。所以设计 Worker 通信协议时尽量减少大对象的频繁传递用 transferable objects比如 ArrayBuffer可以避免拷贝带来的性能损耗。6.4 useState 的“批处理陷阱”和“懒初始化”最后一个坑是 useState 的初始化函数。很多人写useState(expensiveFunction())以为这样只执行一次实际上这个函数在每次渲染时都会被调用只是 React 只取第一次调用的结果——但昂贵函数的执行开销是白白浪费了。正确写法是useState(() expensiveFunction())传一个函数进去React 才会在首次渲染时才真正执行它。这就是懒初始化lazy initial state。还有一个批处理相关的坑在同一个事件处理里如果你对新旧 state 都用了同一个变量名容易写出“这次更新覆盖上次更新”的 bug。比如const [count, setCount] useState(0); function add() { setCount(count 1); setCount(count 1); }上面这段代码的结果是 count 只加了 1不是 2。因为两次 setCount 读取的是同一个旧的 count。正确写法是setCount(prev prev 1)连续调两次。这个知识点在面试里也叫“函数式更新”是一个必问的考点。7. 最后再分享几个面试和学习建议我不太喜欢在文章结尾写那种“总结一下”的套话但作为带了几年新人、也面试过不少候选人的从业者有几个真实的经验想分享给你。第一培训机构三阶段课程节奏很快React 部分往往不到两个月就讲完了但框架这东西靠听课是学不会的一定要自己动手做项目。不用做多复杂的项目把计算器、TodoList、简单的后台管理系统这三个项目吃透React 的常见面试题就基本都能答上来了。第二面试时遇到不会的问题诚实说不会但可以补充自己的思考过程。比如面试官问 Fiber 架构你没读过源码可以说“我知道 Fiber 是 React 16 引入的增量渲染机制我平时更多是使用层面的开发但我知道它解决了递归渲染导致的主线程阻塞问题具体原理我还需要深入学习”。这种回答比胡编乱造要好得多。第三不要只盯着框架本身JavaScript 基础决定你的天花板。React 的闭包陷阱、this 指向、事件循环、异步编程这些全是 JavaScript 的底层知识。我面试过的候选人里凡是 JavaScript 基础扎实的框架上手都非常快凡是靠背 API 和模板代码的换个场景就露馅。第四如果你马上要参加前端面试建议把 React 18 的新特性、Hooks 闭包陷阱、setState 批处理原理、路由对比这四类题作为重点复习对象。这些题在 2026 年的前端面试题里出现频率非常高而且最能区分“只会用”和“理解原理”的候选人。希望这篇整理对你有帮助。如果后面你在学 React 或者准备面试时遇到具体的问题欢迎在评论区留言我看到会尽量回复。祝大家都能顺利度过第三阶段拿到心仪的 offer。