React & Vue 资深工程师面试题

React & Vue 资深工程师面试题（附详细解答）

以下题目聚焦核心原理、性能优化、工程化、进阶特性等资深工程师考察维度，覆盖 React（含 React 18）和 Vue3 核心考点，解答兼顾原理与实践。

一、React 资深面试题

1. React Fiber 架构的设计原理及解决的核心问题

解答：

Fiber 是 React 16 重构的核心协调（Reconciliation）引擎，解决了传统 Stack Reconciler 的核心痛点：

  • 旧架构问题：递归遍历虚拟 DOM 树，更新过程不可中断，长任务（如复杂列表渲染）会阻塞主线程（UI 渲染、事件响应），导致页面卡顿。
  • Fiber 核心设计：
    1. 数据结构：将递归的树结构改为链表结构（Fiber 节点包含 child/sibling/return 指针），支持“中断-恢复”遍历；
    2. 可中断调度：基于时间切片（Time Slicing，React 18 内置），每次只执行一个小任务，剩余时间交还主线程，超过 5ms 则暂停；
    3. 优先级调度：通过 Lane 模型（React 18 替代旧的 expirationTime）区分任务优先级（如用户输入 > 动画 > 数据请求 > 低优渲染），高优任务可抢占低优任务；
    4. 双缓存 Fiber 树：当前渲染的 current Fiber 树 + 待更新的 workInProgress Fiber 树，更新完成后切换，避免中间状态。
  • 执行流程：
    • 调度阶段（Scheduler）：接收任务，按优先级分配时间片；
    • 协调阶段（Reconciliation）：遍历 Fiber 树，对比虚拟 DOM，标记更新（可中断）；
    • 提交阶段（Commit）：将协调阶段的更新应用到真实 DOM（不可中断）。

2. React Hooks 闭包陷阱的成因及解决方案

解答：

  • 成因：函数式组件每次渲染都是独立闭包，Hooks 会“捕获”当前渲染周期的变量/状态；若异步操作（定时器、网络请求）引用了旧状态，会导致读取到过期值。
    示例：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function Counter() {
      const [count, setCount] = useState(0);
      useEffect(() => {
        const timer = setTimeout(() => {
          console.log(count); // 点击按钮后，定时器仍输出 0（旧值）
        }, 1000);
        return () => clearTimeout(timer);
      }, []); // 依赖为空，闭包捕获初始 count
      return <button onClick={() => setCount(count + 1)}>点击</button>;
    }
  • 解决方案：
    1. useRef 保存最新值：ref 的 .current 不受闭包影响，始终指向最新值；
    2. useCallback/useMemo 缓存依赖：补全 useEffect 依赖项，结合 useCallback 缓存回调；
    3. 函数式更新：useState 的更新函数接收旧状态，避免直接引用闭包变量；
    4. useEvent（React 18+）：封装异步回调，自动绑定最新状态（替代自定义 ref 方案）。

3. React 18 并发渲染（Concurrent Rendering）的核心思想及应用场景

解答：

  • 核心思想：“渲染可中断”，React 可在渲染过程中暂停、放弃、恢复渲染，优先处理高优先级任务（如用户输入、动画），而非一次性完成所有渲染，提升交互流畅度。
  • 核心特性：
    • startTransition：标记低优先级更新（如搜索结果渲染），不阻塞高优操作；
    • useDeferredValue：延迟更新值，为高优任务让路；
    • Suspense 增强：支持数据请求 Suspense（结合 React Query/SWR）、流式 SSR；
    • 自动批处理（Automatic Batching）：合并多个 setState，减少渲染次数。
  • 应用场景：
    1. 搜索框输入：输入（高优）即时响应，搜索结果（低优）延迟渲染；
    2. 大数据列表：滚动加载时，列表渲染不阻塞滚动事件；
    3. 模态框/弹窗：弹窗渲染不阻塞页面交互。

4. React SSR（服务端渲染）与 Next.js 核心实现原理

解答：

  • SSR 对比 CSR：
    维度 SSR（服务端渲染） CSR（客户端渲染）
    首屏加载 快（服务端返回完整 HTML） 慢（需下载 JS 后渲染）
    SEO 友好（HTML 含完整内容） 差（初始 HTML 为空）
    交互体验 需 hydrate 注水后交互 交互流畅（客户端渲染）
    服务端压力 大（每次请求生成 HTML） 小（仅提供静态资源）
  • Next.js 核心原理：
    1. 文件路由：基于 pages/app 目录自动生成路由，无需手动配置；
    2. 数据获取：
      • getServerSideProps：每次请求时服务端获取数据，纯 SSR；
      • getStaticProps+getStaticPaths：构建时预渲染（SSG），适合静态页面；
      • ISR（增量静态再生）：缓存 SSG 页面，定时/按需更新，兼顾性能与实时性；
    3. 渲染流程：
      • 服务端：ReactDOMServer.renderToString 生成 HTML 字符串，返回给客户端；
      • 客户端：ReactDOM.hydrate 复用服务端 HTML，绑定事件（注水），完成交互激活。

二、Vue 资深面试题

1. Vue3 响应式系统重构原理（对比 Vue2）

解答：

  • Vue2 响应式：基于 Object.defineProperty，存在天然缺陷：
    1. 只能监听对象属性，无法监听数组下标/长度、新增/删除属性（需 $set/$delete）；
    2. 需递归遍历对象所有属性，初始化性能差；
    3. 无法监听嵌套对象的新增属性。
  • Vue3 响应式：基于 Proxy + Reflect，重构后优势显著：
    1. 代理整个对象：无需遍历属性，支持数组（下标/长度）、新增/删除属性的监听；
    2. 懒监听：嵌套对象仅在访问时才递归代理，初始化性能提升；
    3. 类型友好：兼容 ES6 语法，更好支持 TypeScript；
    4. 原始值处理：通过 ref 包裹原始值（value 访问），弥补 Proxy 无法代理原始值的缺陷。
  • 核心流程：
    1. 依赖收集（track）：组件渲染时访问响应式数据，触发 get 拦截，收集当前组件的 effect（副作用函数）；
    2. 触发更新（trigger）：数据修改时触发 set 拦截，执行收集的 effect，重新渲染组件。

2. Vue3 Composition API 设计初衷及与 Options API 的对比

解答：

  • 设计初衷：解决 Options API 的核心痛点：
    1. 复杂组件逻辑分散（data/methods/computed/watch），难以维护；
    2. 逻辑复用只能通过 mixin（命名冲突、来源不清晰）；
    3. 对 TypeScript 支持差（Options API 无法精准推导类型）。
  • 核心对比：
    维度 Options API Composition API
    逻辑组织 按选项分类，分散 按功能聚合，可抽离 Composables
    逻辑复用 mixin（易冲突、难溯源） 组合函数（Composables，无冲突）
    TS 支持 弱（需手动类型标注） 强（自动类型推导）
    学习成本 低（新手友好） 稍高（需理解闭包/响应式）
  • 最佳实践：
    1. 抽离通用逻辑为 Composables（如 useRequest、usePagination）；
    2. 避免 setup 函数过于臃肿，拆分多个组合函数；
    3. 优先使用 ref（原始值）/shallowRef（浅层引用），减少不必要的深层响应式。

3. Vue3 虚拟 DOM 与 diff 算法的优化点

解答：

Vue3 重写了虚拟 DOM 模块，核心优化围绕“减少不必要的对比”：

  1. 静态提升（hoistStatic）：
    • 静态节点（如 <div>文本</div>）被提升到渲染函数外，避免每次渲染重新创建 VNode；
    • 静态属性（如 class="btn"）同样被缓存，减少内存占用。
  2. PatchFlags（补丁标记）：
    • 为动态 VNode 标记更新类型（如 TEXT/CLASS/STYLE/PROPS），diff 时仅对比标记的属性，无需全量对比；
    • 示例：<div :text="msg">文本</div> 会被标记为 TEXT，仅对比文本内容。
  3. 缓存事件处理函数（cacheHandlers）：
    • 避免每次渲染重新创建事件回调（如 @click="handleClick"），减少 VNode 差异。
  4. 双端对比优化：
    • 延续 Vue2 的双端 diff 算法，新增“最长递增子序列”优化，减少节点移动次数（针对列表渲染）。

4. Nuxt3 核心特性及 SSR 实现原理

解答：

  • Nuxt3 核心特性：
    1. 基于 Vue3 + Vite，构建速度大幅提升；
    2. 自动导入：组件、Composables、API 无需手动 import；
    3. 服务器组件（Server Components）：组件逻辑运行在服务端，减少客户端 JS 体积；
    4. 孤岛架构（Island Architecture）：仅交互组件在客户端激活，静态组件保持服务端渲染状态；
    5. 数据获取：useAsyncData/useFetch 统一处理异步数据，支持 SSR/CSR 兼容。
  • SSR 实现原理：
    1. 客户端请求 → Nuxt 服务端执行 useAsyncData 获取数据；
    2. 通过 vue/server-renderer 的 renderToString 生成 HTML 字符串；
    3. 服务端返回 HTML + 数据（序列化到 window.__NUXT__）；
    4. 客户端执行 hydrate 注水，复用服务端 HTML，绑定事件，完成激活。

三、通用进阶考点（React/Vue 均会考察）

1. 前端性能优化（全维度）

  • 渲染层：虚拟列表（react-window/vue-virtual-scroller）、避免重渲染（memo/useMemo/keep-alive）、骨架屏；
  • 网络层：接口缓存（SWR/React Query/useRequest）、HTTP/2、预加载（preload/prefetch）、接口合并；
  • 构建层：代码分割（Code Splitting）、Tree Shaking、Vite 按需编译、压缩混淆（Terser）；
  • 运行层：防抖节流、懒加载（图片/组件）、Web Worker 处理耗时计算。

2. 跨端方案对比（React Native vs Vue3 + UniApp）

  • React Native：基于 JSX，原生组件渲染，生态丰富，性能接近原生，但需适配多端；
  • UniApp：基于 Vue3，一次编写多端编译（小程序/APP/H5），开发效率高，但复杂场景性能略逊于 RN。
React_Vue
#React #TypeScript #性能优化 #缓存 #面试 #Vue #TreeShaking #React_Vue
React & Vue 资深工程师面试题
https://zjw93615.github.io/2025/12/06/React_Vue/React & Vue 资深工程师面试题/
作者
嘉炜
发布于
2025年12月6日
许可协议