React面试题30道 | 流年石刻

准备这样一份全面且深度的前端框架面试题库是一个庞大的工程。不仅要考察对API的熟练度，更要深入底层架构、性能调优以及设计模式。

受限于单次文本输出的物理极限，直接铺开60道题目的长篇代码会导致内容被截断。为了保证逻辑的深度和事实的严谨性，我将为你梳理出React和Vue各30道核心面试题的全局图谱，并从中提取出最具代表性、最能体现框架第一性原理的题目，进行配有代码的深度解构。

第一部分：React 核心与进阶 (30题)

1-10：底层架构与核心机制

React Fiber 架构的本质是什么？解决了什么问题？ (深度解析见下文)
Virtual DOM 的 Diff 算法时间复杂度为什么是 O(n)？ (树的同级比较、组件类型判断、Key的唯一性)
React 合成事件 (Synthetic Event) 的工作原理是什么？React 17+ 有何改变？ (事件委托从 document 移到 root 节点)
React 18 的并发渲染 (Concurrent Rendering) 是如何运作的？ (时间分片与优先级调度)
React 状态更新的批处理 (Batching) 机制是怎样的？ (React 18 的 Automatic Batching)
JSX 的本质是什么？React 17 后为什么不需要显式引入 React？ (_jsxRuntime)
Hydration (水合) 机制在 SSR 中的作用与潜在的 Mismatch 问题？
Hooks 的底层数据结构是什么？为什么不能在条件语句中调用 Hooks？ (基于单向链表)
什么是 React Server Components (RSC)？它与 SSR 有何本质区别？
React 的 StrictMode 在开发模式下为什么会执行两次渲染？ (暴露副作用)

11-20：Hooks 与状态管理

useEffect 的闭包陷阱 (Stale Closure) 产生的原因及解法？ (深度解析见下文)
useEffect 与 useLayoutEffect 的执行时机差异？ (DOM 更新后与浏览器绘制前)
useMemo 与 useCallback 的性能损耗陷阱？何时不该用？ (缓存本身的成本 vs 子组件渲染成本)
useRef 除了获取 DOM 节点，在维持可变状态方面与 useState 有何不同？ (不触发渲染)
React Context API 导致不必要的重渲染如何优化？ (状态拆分或结合 useMemo)
Zustand / Jotai 与 Redux 的设计哲学差异是什么？ (原子化状态 vs 集中式单一状态树)
如何自定义一个 useFetch Hook 处理竞态条件 (Race Conditions)？
useTransition 和 useDeferredValue 在复杂交互中的应用场景？
forwardRef 和 useImperativeHandle 的组合使用场景？
Redux Middleware (如 Thunk/Saga) 的洋葱模型原理？

21-30：组件设计、路由与性能

HOC (高阶组件)、Render Props 与 Hooks 的演进脉络？ (逻辑复用的范式转移)
React.memo 是浅比较还是深比较？如何自定义比较函数？
React Router 中 BrowserRouter 与 HashRouter 的底层实现差异？ (History API vs hashchange)
如何实现一个 Error Boundary 捕获组件树的异常？
Suspense 与 React.lazy 如何配合实现代码分割 (Code Splitting)？
Portals 的作用及事件冒泡在 Portals 中的特殊表现？ (DOM树分离，但React事件树未分离)
受控组件 (Controlled) 与非受控组件 (Uncontrolled) 的边界在哪里？
如何定位和排查 React 应用的内存泄漏？ (清理定时器、解绑事件监听)
大型 React 项目的首屏加载优化策略有哪些？
大型列表的虚拟滚动 (Virtual Scrolling) 原理及实现要点？

React 深度解构示例

Q: React Fiber 架构的本质是什么？解决了什么问题？

分析： React 16 之前的 Reconciler 是同步的、递归的。如果组件树庞大，JavaScript 线程会被长时间阻塞，导致页面掉帧、卡顿。Fiber 是一种基于时间分片的协作式多任务调度机制。它将渲染工作拆分成微小的任务单元（Fiber Node），允许 React 在执行完一个任务单元后，将控制权交还给浏览器，判断是否有更高优先级的任务（如用户点击、动画）。
代码视角： Fiber 节点本身是一个 JavaScript 对象，构成了一个双向链表树（包含 return, child, sibling 指针），这使得遍历过程可以随时中断和恢复。

JavaScript

// 简化的 Fiber 结构
const fiber = {
  type: 'div', // 组件类型
  props: { children: [] },
  stateNode: null, // 对应的真实 DOM
  child: null,     // 指向第一个子节点
  sibling: null,   // 指向下一个兄弟节点
  return: null,    // 指向父节点
  alternate: null, // 双缓存树（用于对比更新）
};

Q: useEffect 的闭包陷阱 (Stale Closure) 产生的原因及解法？

分析： 这是 React 开发中最常见的问题。本质是 JavaScript 的词法作用域与 React 函数组件的执行机制碰撞的结果。每次渲染，组件内部的函数都有自己独立的闭包，捕获了当次渲染时的状态。如果 useEffect 的依赖数组未正确设置，其内部的定时器或异步回调引用的将永远是旧渲染帧的变量。
代码解法： 使用依赖数组、使用函数式更新，或利用 useRef 保持最新值的引用。

JavaScript

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      // 错误做法：如果不加依赖，count 永远是 0
      // setCount(count + 1); 
      
      // 正确做法 1：函数式更新（推荐）
      setCount(prev => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []); // 依赖为空数组，只执行一次

  return <div>{count}</div>;
}

第二部分：Vue 核心与进阶 (30题)

1-10：响应式原理与底层机制

Vue 2 的 Object.defineProperty 与 Vue 3 的 Proxy 响应式原理深度对比？ (深度解析见下文)
Vue 的依赖收集 (Track) 与派发更新 (Trigger) 流程是如何运转的？
Vue.nextTick 的底层实现逻辑？为什么优先使用微任务 (Microtask)？ (深度解析见下文)
Vue 3 的编译时优化 (Compiler-Informed Runtime) 包括哪些？ (PatchFlags, 静态提升, 块级树)
v-model 的语法糖本质是什么？在自定义组件上如何实现双向绑定？
虚拟 DOM 的作用到底是什么？在 Vue 中它是如何转化为真实 DOM 的？
Vue Router 的全局守卫、路由守卫、组件守卫的执行顺序？
Vue 的 Diff 算法 (双端对比算法 vs Vue 3 快速 Diff) 原理？
什么是 Vue 的生命周期？Keep-Alive 相关的特有生命周期是什么？
SSR/SSG/CSR 的抉择？Nuxt.js 解决的核心痛点是什么？

11-20：组合式 API (Composition API) 与特性

ref 和 reactive 的本质区别？为什么 ref 需要 .value？ (基本类型包装与 Proxy 代理)
computed 和 watch、watchEffect 的使用边界和底层差异？ (缓存计算 vs 副作用侦听)
Vue 3 中 setup 函数的执行时机？它为什么没有 this？ (在 beforeCreate 之前)
在 Composition API 中如何替代 Vue 2 的 Mixins 进行逻辑复用？ (Composables 函数)
shallowRef 和 shallowReactive 的性能优化场景？
Vue 3 中如何精确控制 watch 的触发时机 (flush: 'pre' | 'post' | 'sync')？
Teleport 组件的作用和底层逻辑？ (将 DOM 挂载到外部结构中)
Suspense 在 Vue 3 中的异步组件处理机制？
如何编写一个自定义指令 (Custom Directive)？
<script setup> 语法糖中的 defineProps, defineEmits, defineExpose？

21-30：架构、通信与性能优化

Vue 组件间通信的 8 种以上方式全解？ (Props, emits, Provide/Inject, Pinia, EventBus, v-model, Refs, attrs)
Provide / Inject 与 Pinia (全局状态管理) 的使用场景界限？
Pinia 为什么比 Vuex 更适合 Vue 3？ (移除 Mutations，完善的 TS 支持，扁平化架构)
v-if 和 v-show 的本质区别及性能考量？ (DOM 节点的销毁/重建 vs CSS display 切换)
v-for 中 key 的作用？为什么强烈不建议使用 index 作为 key？ (破坏就地复用策略，导致状态错乱)
Vue 项目的 Tree-Shaking 是如何实现的？ (基于 ES Module 的静态分析)
如何优化大型 Vue 应用的首屏加载时间？ (异步组件、路由懒加载、资源预加载)
长列表渲染优化：v-once 和 v-memo 的作用及虚拟滚动策略？
Vue 中的错误处理机制 (errorCaptured, app.config.errorHandler)？
Scoped CSS 的原理是什么？深度作用选择器 (:deep()) 的底层实现？ (生成 data-v-xxx 属性)

Vue 深度解构示例

Q: Vue 2 的 Object.defineProperty 与 Vue 3 的 Proxy 响应式原理深度对比？

分析： 这是 Vue 响应式迭代的核心。Vue 2 采用 defineProperty 劫持对象的 getter/setter。局限性：它只能劫持已存在的属性，无法检测对象属性的添加和删除（需借用 $set/$delete）；对数组的索引修改和长度变化无能为力（Vue 2 内部重写了数组的 7 个变更方法来兜底）；并且需要递归遍历整个对象，对深层嵌套对象有较大的初始化性能开销。
改进： Vue 3 采用 Proxy。它直接代理整个对象（而非属性），拦截对象上的多达 13 种操作（包括属性增删、原型查找等）。数组的所有操作也能天然响应。并且按需代理（只有在访问到深层属性时才包装成 Proxy），极大提升了初始化性能。

JavaScript

// Vue 3 Proxy 核心思想的简化模型
function reactive(target) {
  if (typeof target !== 'object' || target === null) return target;
  
  const handler = {
    get(target, key, receiver) {
      // 依赖收集 (Track)
      track(target, key);
      const result = Reflect.get(target, key, receiver);
      // 懒代理：访问到嵌套对象时才将其转化为响应式
      return typeof result === 'object' ? reactive(result) : result;
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        // 派发更新 (Trigger)
        trigger(target, key);
      }
      return result;
    }
  };
  return new Proxy(target, handler);
}

Q: Vue.nextTick 的底层实现逻辑？为什么优先使用微任务？

分析： Vue 的 DOM 更新是异步的。当我们修改状态后，Vue 不会立即更新 DOM，而是将所有的状态变更推入一个队列（缓冲批处理同一事件循环中的多次修改），然后在下一个事件循环 tick 中统一执行 DOM 更新。nextTick 就是用于在 DOM 更新完毕后执行回调的方法。
优先级： 浏览器事件循环中，微任务（Microtask）总是在当前宏任务（Macrotask）结束后、UI 渲染之前执行。如果用宏任务（如 setTimeout），会导致浏览器先渲染一次旧数据，然后再执行宏任务更新渲染新数据，造成页面闪烁。因此 Vue 优先采用 Promise.then 或 MutationObserver 等微任务实现异步队列。

JavaScript

// nextTick 核心思想简化
let isFlushing = false;
const queue = new Set(); // 使用 Set 保证任务唯一，实现批处理去重
const p = Promise.resolve();

function nextTick(fn) {
  return fn ? p.then(fn) : p;
}

function queueJob(job) {
  queue.add(job);
  if (!isFlushing) {
    isFlushing = true;
    // 利用微任务，在同步代码执行完毕后清空队列
    p.then(() => {
      queue.forEach(job => job());
      queue.clear();
      isFlushing = false;
    });
  }
}

由于篇幅限制，上述列表展现了完整的知识网络框架，并对最关键的底层原理进行了带代码的剖析。如果你正在准备特定方向的面试（比如你想重点突破“React 的性能优化策略”或是“Vue 3 的编译时优化原理”），你可以指定上面的任意几道题目，我可以继续为你提供极为详尽的包含代码分析的解答。

你想先深入探讨哪一个方向的技术细节？

// 简化的 Fiber 结构 const fiber = { type: 'div', // 组件类型 props: { children: [] }, stateNode: null, // 对应的真实 DOM child: null, // 指向第一个子节点 sibling: null, // 指向下一个兄弟节点 return: null, // 指向父节点 alternate: null, // 双缓存树（用于对比更新） };

function Counter() { const [count, setCount] = useState(0); useEffect(() => { const timer = setInterval(() => { // 错误做法：如果不加依赖，count 永远是 0 // setCount(count + 1); // 正确做法 1：函数式更新（推荐） setCount(prev => prev + 1); }, 1000); return () => clearInterval(timer); }, []); // 依赖为空数组，只执行一次 return <div>{count}</div>; }

// Vue 3 Proxy 核心思想的简化模型 function reactive(target) { if (typeof target !== 'object' || target === null) return target; const handler = { get(target, key, receiver) { // 依赖收集 (Track) track(target, key); const result = Reflect.get(target, key, receiver); // 懒代理：访问到嵌套对象时才将其转化为响应式 return typeof result === 'object' ? reactive(result) : result; }, set(target, key, value, receiver) { const oldValue = target[key]; const result = Reflect.set(target, key, value, receiver); if (oldValue !== value) { // 派发更新 (Trigger) trigger(target, key); } return result; } }; return new Proxy(target, handler); }

// nextTick 核心思想简化 let isFlushing = false; const queue = new Set(); // 使用 Set 保证任务唯一，实现批处理去重 const p = Promise.resolve(); function nextTick(fn) { return fn ? p.then(fn) : p; } function queueJob(job) { queue.add(job); if (!isFlushing) { isFlushing = true; // 利用微任务，在同步代码执行完毕后清空队列 p.then(() => { queue.forEach(job => job()); queue.clear(); isFlushing = false; }); } }