面试题

一句话：用 JS 对象描述真实 DOM 树的轻量副本——状态变化先算出新虚拟 DOM，和旧的对比（diff），只把差异应用到真实 DOM。

展开：

• 解决的问题：直接操作真实 DOM 代价高（重排/重绘），虚拟 DOM 把「找出最小改动」的逻辑集中到 diff 层；
• 本质是中间层：声明式 UI 的基石——开发者只描述「UI 应该长什么样」（状态 → 虚拟 DOM），怎么高效更新交给框架；
• 面试加分：虚拟 DOM 不是性能银弹——它牺牲一点计算换来可维护性（声明式）和跨平台能力（虚拟 DOM 也能渲染到 Native/Canvas，如 React Native）。

一句话：同层比较（不跨层）+ 类型不同直接重建 + key 标识同节点——把 O(n³) 的树对比降到 O(n)。

展开：

• 三条前提假设（React diff 的设计依据）：不同类型元素 → 重建子树；同类型 → 只更新变化的属性；同层子节点靠 key 识别移动/复用；
• React：单向从左到右遍历（不可回退）；
• Vue 3：双端对比（头头/尾尾/头尾/尾头四指针）+ 新节点乱序时用最长递增子序列算最小移动——比 React 的策略更精细；
• key 的作用（必考）：给同层节点稳定身份——不要用数组下标当 key（删除/插入时下标错位 → 状态错乱），用唯一稳定 id。

一句话：Vue 的内置组件——缓存不活跃组件的实例（不销毁），切回来时恢复而不是重建（保留状态、跳过重新渲染）。

展开：

• 场景：列表页 ↔ 详情页往返，列表的滚动位置/筛选条件要保留；
• 配套钩子：onActivated / onDeactivated（进入/离开缓存的时机）；
• React 没有官方等价物：社区方案（状态上提/store、条件渲染 + CSS 隐藏），React 19 的 Activity（原 Offscreen）实验性组件是对应方向——「Vue 内置 vs React 演进中」的又一案例。

一句话：memo 缓存组件（props 浅比较不变则跳过重渲染）；useCallback 缓存函数引用；useMemo 缓存计算结果。

展开：

• 三件套的联动：父组件用 useCallback 稳定回调引用 + 子组件用 memo——缺一不可（回调引用每次变，memo 就白包了）；
• 正确用法是「按需」不是「到处包」：测量到真有性能问题再优化（React DevTools Profiler 验证）——到处包是反模式（缓存本身有成本）；
• 对应 Vue：不需要这些——响应式系统天然精确更新（Proxy 知道谁依赖谁），这正是两套更新机制的性能策略差异。

一句话：服务端渲染——在服务器把组件渲染成 HTML 字符串直接返回（客户端拿到即可见），再由客户端 JS「接管」（hydration 水合）获得交互能力。

展开：

• 解决两个问题：首屏速度（不用等 JS 下载执行完才渲染）和 SEO（爬虫拿到完整 HTML）；
• 代价：服务端压力、开发复杂度（生命周期双端兼容、window 不存在）、hydration 开销；
• 生态：Next.js（React）/ Nuxt（Vue）——面试说清「SSR 不是银弹，管理后台等内部系统用 CSR 就够」；
• 延伸词：SSG（构建时生成静态页）、ISR（增量再生）——知道概念即可。

一句话：把一个大前端应用拆成多个独立开发、独立部署的子应用，在运行时由主应用聚合——团队/技术栈各自独立。

展开：

• 解决的问题：巨石前台的多团队协作（各自发布节奏）、技术栈共存（老系统 jQuery/新系统 React 共存）、渐进式迁移；
• 核心机制：子应用加载（HTML entry）、样式隔离（Shadow DOM / scoped）、JS 隔离（沙箱/Proxy）、通信（自定义事件/共享状态）；
• 生态：qiankun（蚂蚁，基于 single-spa）、micro-app、Module Federation（Webpack 5 原生模块联邦）；
• 诚实定位：微前端是组织问题的技术解——小团队单应用没必要上（复杂度不划算）。

一句话版速览：

• Actions：表单动作与异步过渡的原生支持（<form action={...}> + useActionState/useFormStatus）——表单提交的 pending/错误/乐观更新收口；
• use() API：在组件中读取 Promise/Context（可在条件语句里用——突破 hooks 规则，因为它是运行时函数不是静态 hook）；
• ref 作为普通 prop：函数组件不再需要 forwardRef 包裹（ref 直接进 props）；
• useOptimistic：乐观更新官方化（请求发出先展示预期结果，失败回滚）；
• 文档/元数据：组件里直接写 <title>/<meta> 自动提升到 head；
• 配套：React Compiler（自动 memo，减少手动 useMemo/useCallback）仍是重要方向。

面试策略：提 2-3 个说透（推荐 Actions + ref as prop + use()），并补一句「React 18 的并发渲染（Suspense/transition）是 19 这些特性的地基」——展示版本演进的连续理解。

建议准备 2 个「技术决策型」故事（STAR 结构：场景 → 任务 → 方案对比 → 结果）：

• 故事 A（状态架构）：为什么 React 侧拆成 React Query + Zustand + Context 三层——服务器状态/高频客户端状态/低频全局状态各归其位（模块 1/6 的决策链）；
• 故事 B（踩坑成长）：catch(() => {}) 静默吞错、baseUrl 废弃、Table 双分页器——「现象 → 原因 → 解决 → 沉淀」的完整闭环（.learnings 里都有真实记录）；
• 答辩心法：主动讲「当时对比过哪些方案、为什么选这个」——面试官要的是决策能力，不是结论。