阿里巴巴集团 on Last Stand

阿里巴巴-社招-5年 · 第 1 轮 · HR面

Mon, 28 Jul 2025 13:18:04 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 7 道题。答案默认折叠，便于先自行作答。

1. 离职的原因是什么

题目要点

略

参考答案

略

2. 你熟悉 VUE 吗

题目要点

略

参考答案

略

3. 学习一些新技术，或者是业务中碰到的一些难题，你是针对性去解决会比较多一些，还是说你有系统的学习的一些规划呢

题目要点

略

参考答案

略

4. 工作过程中哪些成长比较大，遇到过哪些难题，怎么解决的

题目要点

略

参考答案

略

5. 你们的加班强度怎么样

题目要点

略

参考答案

略

6. 你如何看待团队合作

题目要点

略

参考答案

略

7. 离职的时候你怎么处理跟前同事的关系的

题目要点

略

参考答案

略

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

阿里巴巴-社招-5年 · 第 1 轮 · 三面

Mon, 28 Jul 2025 13:14:50 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮共 7 道题。答案默认折叠，便于先自行作答。

1. 请用3分钟介绍魔方组件项目，突出技术决策过程

题目要点

略

参考答案

略

2. 项目中遇到的最大技术挑战及解决思路

题目要点

略

参考答案

略

3. 性能优化项目的ROI如何评估

题目要点

性能优化 ROI 是投入产出比的度量，结合成本和业务收益评估
需明确优化目标、估算投入、预估收益，计算合理 ROI
关注性能指标与业务指标的映射关系，结合数据分析
兼顾技术收益和用户体验提升，避免盲目优化
持续跟踪优化效果，动态调整投资策略

参考答案

一、考察点

理解性能优化的投入与收益关系
掌握定量和定性评估性能优化效果的方法
了解业务指标与性能指标的关联性
能结合项目实际情况合理规划和衡量优化价值

二、参考答案

2.1 ROI 的定义与核心思想

ROI（Return on Investment）即“投资回报率”，衡量投入资源与产出收益的比率
性能优化的 ROI 评估即衡量优化投入（时间、人力、成本）与带来的业务或技术收益是否成正比
目标是确保资源有效利用，避免盲目优化

2.2 性能优化投入的量化

开发成本：开发和测试性能优化方案所需的人力、时间
基础设施成本：可能新增的硬件资源或第三方服务开销
维护成本：优化方案上线后的维护和升级投入

2.3 性能优化收益的量化

业务指标提升：如转化率、用户留存率、页面访问量、用户满意度等
技术指标改善：首屏时间（FCP）、最大内容渲染时间（LCP）、交互响应时间、错误率降低等
运营成本降低：服务器压力减轻、带宽节省、用户投诉减少等

2.4 关联业务价值与性能指标

通过数据分析建立性能指标与业务指标的映射关系，比如：
- 首屏加载时间缩短 1 秒，转化率提升 5%
- 页面响应延迟减少，用户流失率降低
结合历史数据或行业调研，预估性能改进带来的经济效益

2.5 评估流程示例

明确优化目标：确定需优化的性能瓶颈和预期改进幅度
估算投入成本：评估开发时间、人力、资源等投入
预估收益：基于数据和业务指标推算收益大小
计算 ROI：收益 / 投入，判断是否值得投资
持续监控：优化上线后跟踪实际效果，调整策略

2.6 风险与非量化因素考虑

用户体验提升虽难量化，但对品牌和用户粘性极重要
竞争压力、市场趋势等外部因素可能影响 ROI
技术债务减少，长期维护成本降低也是重要收益

三、常见误区或面试陷阱

❌ 只关注技术指标优化，忽视业务价值转化
❌ 低估开发和维护成本，导致投入超出预期
❌ 盲目追求极致性能，忽略边际效益递减
❌ 缺乏数据支持，ROI 评估主观臆断

4. 项目风险遇到过哪些，怎么解决的

题目要点

略

阿里巴巴-社招-5年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 13:12:16 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 浏览器的缓存机制、react hooks

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 魔方组件的整体架构设计，包括其模块划分和核心功能

题目要点

略

参考答案

略

2. 你们是如何选择技术栈的？有哪些关键因素影响了决策

题目要点

略

参考答案

略

3. 魔方组件如何实现动态加载，以提升初始加载性能

题目要点

略

参考答案

略

4. 魔方组件如何管理组件的配置信息？组件之间的通信是如何处理的

题目要点

略

参考答案

略

5. 三维模型的加载性能，将加载时间从10秒缩短至3秒都做了哪些操作

题目要点

略

参考答案

略

6. 这个项目中在移动端，你们是如何处理不同设备的适配问题的

题目要点

略

参考答案

略

7. 有没有用服务端渲染（SSR）？如果有，你们是如何实现的

题目要点

SSR 是服务器预先渲染页面，提高首屏性能和 SEO
常用框架有 Next.js、Nuxt.js，也可自研实现
实现时结合服务器渲染和客户端 Hydration 完成完整页面交互
需处理代码共享、数据预取、样式加载及性能优化
了解 SSR 的局限性和优化难点，合理权衡使用场景

参考答案

一、考察点

理解 SSR 的基本概念和优势
掌握常见 SSR 实现方案及其原理
理解 SSR 与客户端渲染（CSR）的区别和协同方式
了解 SSR 在项目中的具体落地方法和技术选型

二、参考答案

2.1 SSR 的基本概念

SSR（Server-Side Rendering）是指在服务器端完成页面的 HTML 渲染，再将完整的 HTML 返回给客户端
相比纯客户端渲染，SSR 提升了首屏渲染速度和 SEO 友好性
用户拿到的是已渲染好的页面，浏览器可以更快显示内容

2.2 SSR 的优势和适用场景

首屏速度快：浏览器无需等待大量 JS 执行即可显示页面
SEO 优化：搜索引擎能抓取到完整的内容，提升排名
社交分享友好：分享链接时可显示完整预览
适合内容型或公共站点，电商、新闻、博客等场景

2.3 常见 SSR 实现方案

Next.js（React）：提供开箱即用的 SSR 支持和静态生成
Nuxt.js（Vue）：Vue 生态的 SSR 框架，支持服务端渲染和静态导出
自研 SSR：使用 Node.js 搭配 ReactDOMServer 或 Vue SSR API 手动实现
传统模板引擎：如 EJS、Handlebars 等，服务器渲染 HTML

2.4 我们项目中 SSR 的实现方式

使用了 [Next.js / Nuxt.js / 自研 SSR] 作为 SSR 框架
服务器通过 Node.js 环境调用 ReactDOMServer.renderToString 或 Vue SSR 的 renderToString，生成完整 HTML
结合路由系统，实现根据请求 URL 渲染对应页面
页面返回时携带初始数据（通过服务端数据预取），客户端接管 Hydration，实现页面交互
结合缓存策略，优化性能和响应速度
配合 Webpack 和 Babel，保证服务端代码和客户端代码一致性

2.5 实现过程中需注意的问题

服务端和客户端代码共享及差异处理（避免浏览器 API 直接调用）
初始数据的获取与注入，保证页面完整性和交互
处理样式加载，避免闪烁（FOUC）
性能优化，如页面缓存、资源压缩和异步加载
服务器负载和扩展性考虑

三、常见误区或面试陷阱

❌ 认为 SSR 只是在服务器渲染静态 HTML，忽略客户端 Hydration
❌ 忽视服务端渲染的性能开销和状态同步难题
❌ 直接复用客户端代码，未处理服务端无 DOM 的环境差异
❌ 忽略 SEO 以外的性能和用户体验提升点

8. 项目中使用了哪些状态管理工具？为什么选择这些工具

题目要点

状态管理工具选择基于项目规模、团队经验和性能需求
Redux 适合大型复杂应用，MobX 适合响应式需求
Context 适合轻量局部状态管理
结合工具生态和中间件支持，提升开发效率和维护性
合理划分全局与局部状态，避免状态管理复杂化

参考答案

一、考察点

理解不同状态管理工具的特点及适用场景
掌握项目中选择状态管理工具的决策逻辑
能清晰阐述所选工具带来的优势和解决的问题
了解状态管理的基本概念和复杂度控制方法

二、参考答案

2.1 项目中使用的状态管理工具

Redux
- 适用于大型复杂应用，状态集中管理
- 具备时间旅行调试、可预测状态变更、丰富中间件生态
MobX
- 响应式状态管理，自动追踪依赖，适合数据驱动视图更新
- 代码简洁，学习曲线较低
React Context + useReducer/useState
- 轻量级状态共享方案，适合中小型或局部状态管理
Recoil / Zustand / Valtio 等轻量方案
- 现代灵活的状态管理，适合部分场景需求
Vuex（Vue 项目）
- Vue 官方状态管理库，集中管理全局状态，支持插件扩展

2.2 选择这些工具的理由

项目规模与复杂度

阿里巴巴-社招-5年 · 第 1 轮 · 一面

Mon, 28 Jul 2025 12:42:07 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： React 生命周期、react hooks、JSX、react 渲染机制、React函数组件更新、react 组件设计模式

本轮共 38 道题。答案默认折叠，便于先自行作答。

1. 你参与的主要项目是什么？是桌面端还是移动端项目

题目要点

略

参考答案

略

2. 在项目中主要使用了哪些技术栈

题目要点

略

参考答案

略

3. 你对 Vue 有多少了解

题目要点

Vue 是数据驱动 + 响应式的组件化框架，适合快速构建中大型项目
熟悉其核心机制：响应式原理、组件生命周期、指令语法、虚拟 DOM
掌握 Vue Router、Vuex/Pinia 等配套生态工具
能区分并熟练使用 Vue 2 和 Vue 3 的开发模式
具备优化性能、提升可维护性的工程意识

参考答案

一、考察点

探查候选人对 Vue 核心原理、语法机制的理解深度
判断是否具备实战经验、组件开发能力、性能优化能力
涵盖响应式系统、组件通信、生命周期、指令系统、虚拟 DOM、Diff 等关键技术点
Vue 生态栈是否熟悉，如 Vue Router、Vuex / Pinia、Composition API、Vue 3 升级等

二、参考答案

2.1 Vue 框架的整体认知

Vue 是一个 轻量、渐进式的前端框架，核心关注 View 层，易学易用，适合快速开发中大型应用
支持响应式绑定、组件化开发、指令系统、虚拟 DOM、跨平台（如 H5、小程序）

Vue 的核心组成包括：

阿里巴巴-社招-3年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 12:38:24 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： react hooks、高阶组件、列表和key、react 渲染机制、react 组件设计模式、前端模块化、Webpack与Vite

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 讲一下你对Hooks 了解

题目要点

Hooks 是函数组件状态和副作用管理的新方案
常用 Hooks 有 useState、useEffect、useMemo、useCallback 等
Hook 调用必须遵循规则，保证顺序稳定
自定义 Hooks 用于逻辑复用，提高代码可维护性
理解 Hook 设计原理，有助于写出高质量 React 代码

参考答案

一、考察点

理解 React Hooks 的设计初衷与核心概念
掌握常用 Hooks（如 useState、useEffect、useMemo、useCallback 等）的作用与使用场景
理解 Hooks 规则及其背后的原理机制
认识 Hooks 对函数组件状态管理和生命周期的改进
了解自定义 Hooks 的设计思路及复用价值

二、参考答案

2.1 Hooks 的定义与设计初衷

定义：Hooks 是 React 16.8 引入的函数组件状态和副作用管理的特性
设计目标：
- 解决类组件中状态逻辑难以复用和组件嵌套过深的问题
- 让函数组件拥有类似类组件的状态和生命周期能力
- 简化组件逻辑，提升代码可读性和复用性

2.2 常用 Hooks 及其作用

Hooks	功能描述	典型使用场景
`useState`	在函数组件中声明状态变量	组件内部状态管理
`useEffect`	处理副作用（订阅、异步请求、DOM操作等）	替代类组件的生命周期钩子
`useContext`	订阅 React Context，实现跨组件数据传递	共享全局状态、主题、语言等
`useMemo`	记忆计算结果，避免不必要的重复计算	性能优化，避免昂贵计算重复执行
`useCallback`	记忆函数实例，避免子组件重复渲染	优化子组件性能，防止无意义的 props 变化
`useRef`	保存可变值，不触发组件重新渲染	访问 DOM 节点或保存不变引用

2.3 Hooks 的规则与原理

规则：
- 只能在函数组件或自定义 Hooks 中调用
- 只能顶层调用，不能在循环、条件或嵌套函数中调用，保证 Hook 调用顺序稳定
原理：React 通过维护一个 Hook 链表和调用顺序，关联 Hook 状态与对应组件实例，实现状态的持久化和更新

2.4 自定义 Hooks

将组件中可复用的状态逻辑抽象成函数
函数内部调用其他 Hooks，实现逻辑复用与拆分
提高代码复用性和可维护性

三、常见误区或面试陷阱

误用 Hook 规则，导致调用顺序不稳定
过度使用 useEffect，产生复杂副作用链和性能问题
误解 useMemo 和 useCallback 的使用时机和作用
忽略依赖项数组，导致副作用不正确执行
不了解自定义 Hooks 是普通函数，不能在其中调用 Hook 规则外的逻辑

2. 对比 Class 组件的 Mixin 模式，Hooks 如何解决逻辑复用问题？Mixin 的主要缺陷是什么

题目要点

Mixin 依赖多继承，存在命名冲突、状态污染、难维护等问题
Hooks 通过函数组合和自定义 Hook 实现逻辑复用，避免冲突和复杂继承
Hooks 提升代码可读性、维护性、测试性和类型支持
React 官方推荐使用 Hooks 替代 Mixin 模式

参考答案

一、考察点

理解 Class 组件中 Mixin 的工作方式及缺陷
掌握 Hooks 解决组件逻辑复用的机制和优势
比较两种方案在代码组织、维护性和复用性上的差异
理解现代 React 设计理念和组件开发最佳实践

二、参考答案

2.1 Mixin 模式及其缺陷

Mixin 定义：通过多个类混入（mixin）共享方法和状态，Class 组件通过继承或组合多个 mixin 实现代码复用

阿里巴巴-社招-3年 · 第 1 轮 · 一面

Mon, 28 Jul 2025 12:26:34 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： react 事件机制、React 生命周期、state 与 props

本轮共 13 道题。答案默认折叠，便于先自行作答。

1. 实现全屏水平垂直居中、宽高为屏幕宽度一半的正方形

题目要点

利用 vw 单位定义宽高，保证正方形且相对视口大小
Flexbox 和绝对定位 + transform 是常用居中方案
重置默认 margin 和设置容器高度保证布局准确
任选方案均可，Flexbox 代码简洁，绝对定位兼容性好

参考答案

一、考察点

掌握 CSS 布局基础知识
熟悉视口单位（vw、vh）的使用
理解水平垂直居中多种实现方式
了解盒模型和尺寸计算

二、参考答案

2.1 需求分析

元素宽度和高度为屏幕宽度的 50%（即 50vw）
元素是正方形，宽高相等
水平和垂直方向均居中显示
兼容主流现代浏览器

2.2 代码实现示例

方法一：使用 Flexbox

<div class="container">
 <div class="square"></div>
</div>

<style>
 html, body, .container {
 margin: 0;
 height: 100vh;
 display: flex;
 justify-content: center; /* 水平居中 */
 align-items: center; /* 垂直居中 */
 }
 .square {
 width: 50vw;
 height: 50vw; /* 保证正方形 */
 background-color: #4CAF50;
 }
</style>

方法二：使用绝对定位 + transform

<div class="square"></div>

<style>
 .square {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 50vw;
 height: 50vw;
 background-color: #2196F3;
 transform: translate(-50%, -50%);
 }
 html, body {
 margin: 0;
 height: 100vh;
 }
</style>

2.3 说明

50vw 表示视口宽度的一半
Flexbox 方案利用容器的弹性布局实现简单居中
绝对定位方案通过 top:50%, left:50% 定位中心点，再用 transform 修正偏移
两种方案均保证元素在视口中央且尺寸为屏幕宽度一半的正方形

三、常见误区或面试陷阱

忽略 viewport 单位，使用百分比 % 宽高导致高度受父元素限制
使用 margin: auto 只实现水平居中，未垂直居中
transform 偏移值写错方向或单位
未重置 html, body 的 margin 和高度，导致布局异常

2. 如何通过 padding-bottom 实现自适应正方形

题目要点

百分比 padding-bottom 是相对于元素宽度计算的
设置宽度，padding-bottom 等于宽度比例即可实现宽高比
纯 CSS 实现响应式正方形，无需 JS 计算
配合 position 及 transform 可实现内部内容居中

参考答案

一、考察点

理解 CSS 盒模型及百分比 padding 的计算规则
熟悉通过内边距（padding）比例实现自适应高度的布局技巧
掌握纯 CSS 无需固定高度实现宽高比控制的方法
了解响应式设计及视口适配相关概念

二、参考答案

2.1 核心原理说明

百分比 padding 的高度计算基于元素的宽度
例如，padding-bottom: 100% 表示内边距底部高度是元素自身宽度的 100%
利用这一特性，设置一个元素的宽度，然后用 padding-bottom 来控制高度，从而实现固定宽高比（正方形为 1:1）
这种方式不依赖固定高度或 JS，纯 CSS 实现响应式正方形

2.2 具体实现方式

<div class="square"></div>

<style>
 .square {
 width: 50vw; /* 宽度为视口宽度的一半 */
 padding-bottom: 50vw; /* 内边距底部为宽度的 100%，实现高度与宽度相等 */
 background-color: #f60;
 position: relative; /* 便于放置绝对定位内容（如文字） */
 }
 /* 如果需要内部内容绝对居中，可添加： */
 .square > .content {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
</style>

2.3 使用场景

自适应正方形容器
图片或视频占位框
响应式卡片、图标区域布局

三、常见误区或面试陷阱

误以为 padding 百分比是基于高度计算（实际上是基于宽度）
忽略内容本身不占高度，需要通过 position: relative 和绝对定位解决内容布局
没有设置元素的 width，导致 padding 计算无意义
使用固定 height 反而破坏响应式效果

3. 若要求正方形内嵌图片保持比例且不拉伸，如何实现

题目要点

容器用 padding-bottom 创建自适应正方形
图片使用 object-fit: contain 保持比例且不拉伸
绝对定位图片居中显示，宽高100%填充容器
设置 overflow: hidden 避免溢出

参考答案

一、考察点

理解图片的默认渲染行为及尺寸适配
掌握 CSS 中图片等媒体对象的缩放控制属性（object-fit）
熟悉容器布局，确保图片在固定宽高正方形内自适应显示
了解响应式设计和兼容性考虑

二、参考答案

2.1 核心概念说明

图片默认行为：图片按原始宽高比显示，若强制设置宽高可能导致变形
object-fit 属性：用于控制替换元素（如 img、video）内容的填充方式
object-fit: contain 保持图片比例，完整显示，可能留空白
object-fit: cover 保持比例，填满容器，超出部分裁剪
结合容器尺寸和 object-fit 可灵活控制图片展示效果

2.2 具体实现示例

<div class="square">
 <img src="your-image.jpg" alt="示例图片" />
</div>

<style>
 .square {
 width: 50vw;
 padding-bottom: 50vw; /* 自适应正方形 */
 position: relative;
 overflow: hidden; /* 防止图片溢出 */
 }
 .square img {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 height: 100%;
 object-fit: contain; /* 保持比例且不拉伸 */
 transform: translate(-50%, -50%);
 }
</style>

2.3 说明

使用 padding-bottom 创建正方形容器
position: relative + position: absolute 定位图片，方便居中
图片宽高设为 100%，配合 object-fit: contain 保持原始比例且不被拉伸
overflow: hidden 防止图片超出容器边界显示
可根据需求改为 object-fit: cover 实现填充并裁剪效果

三、常见误区或面试陷阱

不设置 object-fit，直接用 width 和 height 100%，图片可能被拉伸变形
忽略容器定位，导致图片无法居中或布局错乱
未设置 overflow: hidden，图片溢出影响页面布局
误用 background-image 和 background-size，与 img 标签区别不清

4. 怎么理解回流跟重绘？什么场景下会触发？

题库原题：怎么理解回流跟重绘？什么场景下会触发？

阿里巴巴-社招-2年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 12:14:53 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： call、apply和bind、性能优化、浏览器渲染过程、浏览器的缓存机制

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 假设现在有一个老项目需从React 17升级至React 18，你会怎么做

题目要点

先升级 react/react-dom 版本，再更改根渲染方式为 createRoot
理解 React 18 并发特性，调整相关组件代码
确认并升级第三方依赖，保证兼容性
充分测试，监控性能，平滑迁移

参考答案

一、考察点

理解 React 18 的新特性及其对应用的影响
掌握 React 18 升级步骤及兼容性处理
了解新版本的渲染机制变化（如并发特性）
熟悉常见问题排查与升级风险规避

二、参考答案

2.1 升级前准备

阅读官方升级指南（React 官方文档提供详尽升级说明）
检查项目依赖版本，确保 React 相关依赖（如 ReactDOM、react-scripts 等）兼容 React 18
备份代码及建立测试环境，保证升级过程可回滚

2.2 主要升级步骤

1）升级 React 和 ReactDOM 版本

npm install react@18 react-dom@18

或

yarn add react@18 react-dom@18

2）更新根节点渲染方式

React 18 引入了新的根 API：createRoot，替代 React 17 的 ReactDOM.render。

阿里巴巴-社招-2年 · 第 1 轮 · 一面

Mon, 28 Jul 2025 12:07:25 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： react hooks、WeakMap 和 WeakSet

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. ES6相关属性都用过那些

题目要点

熟悉 ES6 关键新特性和语法糖
了解特性设计目的，提升代码可维护性和性能
结合项目场景合理运用，避免滥用带来的副作用
使用 ESLint 及 Babel 保证兼容性和规范

参考答案

一、考察点

全面了解 ES6（ECMAScript 2015）新特性
掌握模块化、变量声明、函数、对象、数组、字符串、类、Promise 等核心特性
能说明特性使用场景、优势及与旧版本对比
具备在项目中合理应用 ES6 特性的能力

二、参考答案

1.1 变量声明

let 和 const：块级作用域，解决 var 变量提升和重复声明问题
推荐使用 const 声明常量，let 声明可变变量，避免全局污染

1.2 模板字符串（Template Literals）

使用反引号 ` 支持多行字符串和内嵌表达式 ${expr}
替代传统字符串拼接，提升可读性

1.3 解构赋值（Destructuring）

支持数组和对象解构，简化变量赋值
常用于函数参数处理、数据提取

1.4 箭头函数（Arrow Functions）

简洁函数表达式，自动绑定 this
不可作为构造函数，不绑定 arguments
常用于回调和函数简写

1.5 扩展运算符（Spread）和剩余参数（Rest）

扩展运算符 ... 用于数组和对象展开
剩余参数用于函数参数收集

1.6 对象字面量增强

属性简写、方法简写、计算属性名
支持简洁声明和动态键名

1.7 类（Class）

ES6 引入基于原型的语法糖，支持继承、构造函数、静态方法
提升面向对象编程体验

1.8 Promise 和异步编程

用于异步流程控制，解决回调地狱
支持链式调用和错误捕获

1.9 模块（Module）

import 和 export 语法，支持静态分析和按需加载
替代传统的 CommonJS、AMD 模块规范

1.10 Symbol 类型

新增基本类型，表示独一无二的值
常用于定义对象的私有属性和常量

1.11 Set 和 Map 数据结构

Set：无重复元素集合
Map：键值对集合，键可以是任意类型

1.12 Iterator 和 Generator

统一遍历接口
Generator 生成器函数，用于异步流程和惰性计算

1.13 其他

for...of 循环：遍历可迭代对象
默认参数和函数参数尾逗号
数组新增方法如 Array.from、find、findIndex

三、常见使用场景及优势

特性	使用场景	优势与改进点
`let`/`const`	代替 `var`，块级作用域变量声明	避免变量提升和作用域污染
模板字符串	拼接复杂字符串和多行文本	可读性高，减少错误
解构赋值	参数提取、数组拆包、函数返回值拆分	代码简洁，语义清晰
箭头函数	回调函数、简化函数定义	自动绑定 `this`，代码更短
扩展运算符	数组合并、对象拷贝	简化代码，避免手动循环
Promise	异步请求、链式调用	解决回调地狱，增强异步流程可读性
模块化	项目拆分、代码复用	标准化模块，支持静态分析
Set/Map	需要高效查找、去重、键值映射的场景	性能优于传统对象和数组

四、常见误区或面试陷阱

❌ 误区一：滥用箭头函数导致 `this` 绑定错误

不适合需要动态 this 的场景（如对象方法）

❌ 误区二：未充分利用解构赋值，写出冗长代码

理解解构赋值提升代码清晰度

❌ 误区三：Promise 误用未捕获异常，导致异常丢失

应正确使用 .catch 或 try...catch 包裹 async/await

2. 为什么WeakMap的键必须是对象

题目要点

WeakMap 键必须是对象，因为弱引用机制只能作用于对象
对基本类型无法进行弱引用，无法参与垃圾回收机制
WeakMap 设计用于保存对象私有数据，避免内存泄漏
与普通 Map 区别在于弱引用和不可枚举特性

参考答案

一、考察点

理解 WeakMap 的设计初衷和底层实现机制
掌握 WeakMap 与普通 Map 的区别
了解 JavaScript 垃圾回收机制与弱引用的关系
能说明 WeakMap 键限制为对象的技术原因及应用场景

二、参考答案

1.1 WeakMap 的基本概念

WeakMap 是一种键为对象，值任意的数据结构
与普通 Map 不同，WeakMap 对键对象的引用是“弱引用”
当键对象不存在其它引用时，能被垃圾回收器回收，避免内存泄漏

1.2 键必须是对象的原因

1）弱引用必须指向对象

JavaScript 的弱引用机制只能对对象类型生效
基本类型（如字符串、数字）是值类型，无法被弱引用追踪和回收

2）垃圾回收机制要求

只有对象才存在垃圾回收标记和生命周期管理
WeakMap 通过弱引用允许键对象在无外部引用时自动回收
如果允许基本类型作为键，则无法做到弱引用，违背 WeakMap 设计初衷

3）设计意图和使用场景

用于存储与对象相关联的私有数据，避免内存泄漏
例如框架中保存某个 DOM 节点的元数据，DOM 节点销毁时对应数据自动释放

1.3 WeakMap 与 Map 的区别

特性	Map	WeakMap
键类型	任意类型	只能是对象
是否可枚举	可遍历所有键值	不可遍历
引用强度	对键保持强引用，阻止垃圾回收	对键保持弱引用，不阻止垃圾回收
适用场景	普通键值映射	关联对象私有数据，自动回收

1.4 常见误区或面试陷阱

❌ 误区一：认为 WeakMap 可以用基本类型作为键

会导致运行时错误，WeakMap 只能接受对象作为键

❌ 误区二：误用 WeakMap 导致内存泄漏

忽略 WeakMap 不可遍历特性，误判数据存在与否

3. Map支持哪些非对象键

题目要点

Map 支持所有基本类型和对象作为键
包括字符串、数字、布尔值、Symbol、null、undefined
与 WeakMap 只能用对象键不同，Map 更灵活
理解键类型和对应的行为差异，避免键冲突

参考答案

一、考察点

理解 JavaScript Map 的键类型及其存储机制
掌握 Map 与 WeakMap 键的差异
了解基本类型和对象类型作为键的行为和区别
能说明非对象键在 Map 中的实际使用场景

二、参考答案

1.1 Map 键的类型支持

Map 的键可以是任意值，包括基本类型和对象类型

阿里巴巴-社招-1年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 11:54:27 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： react hooks、性能优化

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 你们项目为什么选Redux而非MobX

题目要点

Redux 强调可预测性、单向数据流、纯函数 reducer，适合复杂项目
丰富的调试工具和社区中间件支持开发效率和可维护性
MobX 响应式自动追踪，适合快速开发，但隐式依赖增加调试难度
团队规模和项目复杂度是选择状态管理方案的关键因素
现代 Redux 已大幅简化，代码冗余感降低

参考答案

一、考察点

是否理解 Redux 和 MobX 两种状态管理库的设计理念与差异
是否能结合项目实际需求，论述选择某一方案的合理性
是否掌握 Redux 在复杂状态管理中的优势与局限
是否能表达对团队协作、维护性和性能的综合考虑

二、参考答案

1.1 原理说明

Redux

基于 Flux 架构思想，使用单一全局状态树（Store）
状态只读，通过派发（dispatch）纯函数（Reducer）更新状态
强调不可变数据和纯函数，方便调试和时间旅行（time-travel debugging）
侧重于可预测性和可维护性

MobX

采用响应式编程思想，通过可观察（observable）数据和自动追踪依赖实现状态同步
支持隐式状态更新，使用更接近传统面向对象编程
适合快速开发，较少样板代码

1.2 选择 Redux 的主要理由

1）明确的状态流向和可预测性

Redux 的单向数据流和纯函数 reducer 让状态变化过程清晰、易追踪
在多人协作中，可以方便定位状态更新的具体原因，减少调试成本

2）强大的开发者工具支持

Redux DevTools 提供时间旅行、快照对比、action 日志等，极大提升调试体验
有丰富的中间件生态（如 redux-thunk、redux-saga），便于处理复杂异步逻辑

3）适合大型复杂项目

状态结构复杂时，Redux 更便于组织和维护，模块化拆分 reducer 明确职责
明确的规范和社区共识，团队成员易于理解和统一编码风格

4）可测试性强

Reducer 是纯函数，易于单元测试，保证业务逻辑可靠

1.3 不选 MobX 的考虑

1）隐式依赖难以追踪

MobX 的自动依赖追踪机制带来状态变化的隐式性，可能导致调试困难
团队成员对响应式原理不熟悉时，维护成本升高

2）状态变化不够可预测

MobX 允许任意地方修改状态，可能出现难以预料的副作用
不利于实现严格的状态管理和权限控制

3）社区规范和中大型项目生态

Redux 生态成熟且社区规范丰富
MobX 在某些复杂场景下不够透明，团队风险较大

1.4 常见误区或面试陷阱

❌ 误区一：认为 MobX 性能一定优于 Redux

实际性能差异因项目而异，合理使用 Redux 也能实现优秀性能

❌ 误区二：Redux 代码一定繁琐难写

现代 Redux 工具（如 Redux Toolkit）极大简化开发体验，减少样板代码

❌ 误区三：认为 MobX 是“魔法”，不需要学习状态管理原理

响应式原理本身也需要深入理解，否则容易导致维护难题

2. 项目中提到“首屏加载优化1.5秒”，具体如何实现

题目要点

首屏加载优化核心在于减少首屏资源体积和请求数量
结合 SSR/SSG 预渲染，缩短白屏时间
动态拆分代码，懒加载非关键资源
充分利用浏览器缓存和 CDN
监控指标涵盖 FCP、TTI，持续迭代优化

参考答案

一、考察点

理解首屏加载的定义及关键性能指标（如 FCP、TTI）
掌握多种前端性能优化手段，涵盖资源、网络、渲染等层面
能结合具体技术和业务场景，说明优化实施细节
理解优化过程中的权衡与监控方法

二、参考答案

1.1 首屏加载的概念与性能指标

首屏加载：用户打开页面到看到页面主要内容（首屏内容）完整渲染的时间

阿里巴巴-社招-1年 · 第 1 轮 · 一面

Mon, 28 Jul 2025 11:47:07 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： Webpack与Vite、事件循环、跨域通信

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 项目中遇到了哪些技术难题，是如何解决的

题目要点

STAR法则

参考答案

略

2. 在解决这些技术难题的过程中，有没有尝试过其他解决方案

题目要点

略

参考答案

略

3. 项目中是如何进行团队协作的

题目要点

略

参考答案

略

4. 在团队协作中，有没有遇到过沟通不畅或者意见不合的情况？是如何解决的

题目要点

略

参考答案

略

5. webpack 的 plugin 了解吗

题目要点

Plugin 是 Webpack 扩展机制，贯穿构建全过程
核心结构是类 + apply(compiler) + Tapable 钩子
常见生命周期钩子：compile、emit、done 等
可用于注入变量、分析构建、生成资源、操作产物等
熟悉 compiler 与 compilation 的概念
可结合实际项目经验举例说明插件使用场景

参考答案

一、考察点

是否理解 Plugin 在 Webpack 中的作用和工作机制
- Plugin 是 Webpack 最核心的扩展机制之一
是否掌握编写 Plugin 的基本方法和生命周期
- 了解 compiler、compilation、钩子（hooks）等概念
能否结合实际项目场景说明使用插件的案例和目的

阿里-蚂蚁金服-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 06:05:39 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 数组排序：实现一个函数，对包含数字和字符串的混合数组进行排序，数字在前按升序，字符串在后按字母顺序。

题目要点

JavaScript算法。

参考答案

function sortMixedArray(arr) {
 return arr.sort((a, b) => {
 const typeA = typeof a;
 const typeB = typeof b;
 if (typeA !== typeB) {
 return typeA === 'number' ? -1 : 1;
 }
 if (typeA === 'number') {
 return a - b;
 } else {
 return a.localeCompare(b);
 }
 });
}

2. 发布订阅模式：实现一个简单的EventEmitter类，包含on, emit, off方法。

题目要点

JavaScript设计模式。

参考答案

class EventEmitter {
 constructor() {
 this.events = {};
 }
 on(event, callback) {
 if (!this.events[event]) {
 this.events[event] = [];
 }
 this.events[event].push(callback);
 }
 emit(event, ...args) {
 if (this.events[event]) {
 this.events[event].forEach(callback => {
 callback(...args);
 });
 }
 }
 off(event, callback) {
 if (this.events[event]) {
 this.events[event] = this.events[event].filter(cb => cb !== callback);
 }
 }
}

3. lodash.get实现：实现一个类似lodash.get的函数，安全地获取嵌套对象属性。

题目要点

JavaScript对象操作。

阿里-蚂蚁金服-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:05:39 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 自我介绍

题目要点

自我认知。

参考答案

您好！我是一名对前端开发充满热情的工程师，拥有[X]年的开发经验。我熟练掌握HTML、CSS和JavaScript等前端技术，并在多个项目中运用Vue、React等框架构建用户友好的应用。在大学期间，我主修计算机科学，这为我打下了坚实的编程基础。通过参与各类项目，我不仅提升了技术能力，还培养了良好的团队协作和问题解决能力。我热爱学习新技术，经常阅读技术博客并参与开源项目。在之前的实习和工作中，我积累了丰富的实战经验，能够独立完成项目开发并优化性能。我期待能在贵公司继续我的前端开发之旅，为团队贡献我的技能和热情。

2. 什么时候开始接触前端？

题目要点

学习经历。

参考答案

我是在大学二年级的时候开始接触前端开发的。当时，我选修了一门网页设计与开发的课程，这让我对前端开发产生了浓厚的兴趣。从那时起，我便开始系统地学习HTML、CSS和JavaScript等前端技术，并通过大量的实践项目不断提升自己的技能。毕业后，我继续深入学习前端框架和工具，如Vue、React等，并在实际工作中不断积累经验。

3. 复杂度比较高的项目有哪些

题目要点

项目经验。

参考答案

我参与过一个大型电商平台的前端开发，该项目的复杂度较高，主要体现在以下几个方面：

1. 技术栈丰富：项目中使用了Vue.js、Vuex、Vue Router、Vite、TypeScript等技术，结合了 Vuex 进行状态管理，Vue Router 实现了复杂的路由管理，Vite 作为构建工具提高了开发效率。
2. 性能要求高：由于平台需要支持大量的商品列表和用户并发访问，对性能的要求极高。我们通过代码分割、懒加载、图片优化等手段确保了页面的快速加载和流畅交互。
3. 功能模块复杂：涉及商品展示、购物车、订单管理、用户中心等多个功能模块，各模块之间需要紧密协作和数据共享。
4. 跨团队协作：前端团队与后端团队、设计团队紧密合作，确保项目的顺利交付。

4. 实习中的全栈部分做了什么

题目要点

全栈开发能力。

参考答案

在实习期间，我参与了多个全栈开发项目，主要负责以下工作：

1. 后端接口开发：使用Node.js和Express框架开发RESTful API接口，与前端进行数据交互。我设计并实现了用户认证、商品管理、订单处理等功能的API。
2. 数据库设计与操作：负责MySQL数据库的设计和优化，包括表结构设计、索引优化和查询性能提升。编写SQL语句进行数据的增删改查操作。
3. 前端与后端的联调：确保前后端数据格式的一致性和接口的稳定性，处理可能出现的跨域问题和数据验证问题。
4. 部署与运维：参与项目的部署工作，使用Docker容器化应用，并通过Nginx进行反向代理配置。监控应用的运行状态，及时处理线上问题。

5. Vue 和 React 都是什么时候开始接触的

题目要点

技术学习历程。

参考答案

我是在大学期间开始接触Vue和React的。具体来说：

1. Vue：在大三时，我通过一个个人项目开始学习Vue。当时，我被Vue简洁的语法和强大的组件化特性所吸引，于是深入研究了Vue的文档，并通过实践项目掌握了Vue的基本使用方法，包括组件的创建、数据绑定、事件处理等。
2. React：在大四时，我为了扩展自己的技术栈，开始学习React。我通过官方文档和在线教程了解了React的组件化思想、JSX语法以及Hooks的使用。通过一个小型的社交媒体项目，我实践了React的单向数据流和状态管理。

6. 对原生 JS 如何学习的，掌握程度怎么样

题目要点

JavaScript能力。

阿里-阿里妈妈-实习 · 第 1 轮 · 一面

Fri, 27 Jun 2025 06:04:12 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 13 道题。答案默认折叠，便于先自行作答。

1. 实现第一个元素不移动后续元素与左边相隔8px（:not(:first-child）

题目要点

CSS选择器与布局。

参考答案

要实现第一个元素不移动，后续元素与左边相隔8px，可以使用CSS中的:not(:first-child)选择器来选择除第一个元素外的所有同级元素，并为其设置左边距。这在布局中非常有用，可以避免对第一个元素应用不必要的样式。以下是一个示例：

<div class="container">
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item">Item 3</div>
 <div class="item">Item 4</div>
</div>

.container {
 display: flex;
}
.item:not(:first-child) {
 margin-left: 8px;
}

在这个示例中，.item:not(:first-child)选择器匹配了所有带有item类的元素，除了第一个元素。然后，我们通过margin-left: 8px为这些元素设置了左边距，使它们与左边的元素相隔8px。第一个元素不会受到影响，因此不会产生左边距，从而实现了题目要求的布局效果。这种技术在创建水平排列的元素时非常有用，例如导航栏或标签页，可以确保第一个元素与容器的边缘对齐，而后续元素之间保持一致的间距。

2. 写一个防抖

题库原题：实现 debounce（防抖）函数

题目要点

触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。

参考答案

触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。

const debounce = (fn, time) => {
 let timeout = null;
 return function() {
 clearTimeout(timeout)
 timeout = setTimeout(() => {
 fn.apply(this, arguments);
 }, time);
 }
};

防抖常应用于用户进行搜索输入节约请求资源，window触发resize事件时进行防抖只触发一次。

3. 讲讲你的项目难点

题目要点

项目经验与问题解决能力。

阿里-阿里妈妈-实习 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:04:12 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 9 道题。答案默认折叠，便于先自行作答。

1. Flex布局中flex-grow与flex-shrink的计算规则？

题目要点

CSS布局。

参考答案

在Flex布局中，flex-grow和flex-shrink属性用于控制子元素在可用空间内的扩展和收缩行为。它们的计算规则如下：

flex-grow：
1. 定义：定义项目的扩展比例，即项目在主轴方向上可占有的额外空间的比例。
2. 计算规则：剩余空间按项目flex-grow值的比例分配。如果所有项目的flex-grow值之和大于1，则按比例分配；如果小于1，则先分配剩余空间。
3. 示例：如果有两个子元素，flex-grow分别为1和2，总剩余空间为300px，则第一个子元素获得100px，第二个获得200px。
flex-shrink：
1. 定义：定义项目的收缩比例，即项目在主轴方向上需要收缩时的比例。
2. 计算规则：当总项目大小超过容器可用空间时，项目按flex-shrink值的比例收缩。收缩的最小尺寸受min-width或min-height限制。
3. 示例：如果有两个子元素，flex-shrink分别为1和2，总超出行空间为100px，则第一个子元素收缩约33.33px，第二个收缩约66.66px。
完整计算步骤：
1. 计算总可用空间：容器主轴长度减去所有项目初始尺寸（flex-basis或未设置时的内容尺寸）。
2. 判断剩余空间：
  1. 若剩余空间为正，按flex-grow分配扩展空间。
  2. 若剩余空间为负，按flex-shrink分配收缩空间。
3. 计算比例：每个项目的比例为flex-grow或flex-shrink值除以所有项目对应值之和。
4. 分配空间：按比例将剩余空间分配或从项目中扣除。
flex属性：flex是flex-grow、flex-shrink和flex-basis的简写形式。例如，flex: 1 1 0表示flex-grow: 1、flex-shrink: 1、flex-basis: 0。这在等比例分配剩余空间时非常有用。

2. 讲一下js闭包

题库原题：说说你对闭包的理解，以及闭包使用场景

题目要点

什么是闭包

简单理解就是函数中嵌套函数。我们都知道局部变量我们是无法访问的，但是通过闭包可以做到。

// 正常访问
var lan = 'zh';
function hello(){
 var name = '前端未来';
}
console.log(name)//很明显'undefined'

// 换成闭包
function hello(){
 var name = '前端未来';
 function demo(){
 console.log(name)//打印：前端未来
 }
}

闭包的应用场景

1. 数据封装和隐私

闭包可以用来封装数据和功能，创建具有私有变量和公共接口的模块。

应用

创建具有私有状态的模块或对象。

2. 函数工厂

闭包用于创建返回函数的函数，这些返回的函数可以维持状态。

阿里-国际电商-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 06:02:07 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 19 道题。答案默认折叠，便于先自行作答。

1. 讲一下你的技术栈，为什么要学前端，如何学习前端的？

题目要点

技术栈、学习动机与方法。

参考答案

技术栈：
1. HTML/CSS：用于构建页面结构和样式。
2. JavaScript：包括ES6+特性，用于实现页面交互。
3. 框架：熟练使用Vue.js和React，了解其生态系统（如Vue Router、Vuex、React Router、Redux）。
4. 构建工具：使用Vite和Webpack进行项目构建和优化。
5. 状态管理：使用Vuex和Redux进行状态管理。
6. UI组件库：使用Element UI、Ant Design等。
7. 其他工具：Git、ESLint、Prettier、Jest等。
学习动机：
1. 前端开发结合了技术和创意，能够直接看到代码转化为用户界面，带来了即时满足感。
2. 前端领域技术更新快，充满挑战，提供了不断学习新知识的机会。
3. 对用户界面和交互设计的兴趣，希望创造良好的用户体验。
学习方法：
1. 在线课程：通过Coursera、Udemy、MDN Web Docs等平台学习基础知识。
2. 实践项目：通过个人项目和开源项目应用所学知识。
3. 阅读书籍：如《JavaScript高级程序设计》、《你不知道的JavaScript》。
4. 参与社区：在GitHub、Stack Overflow等社区与开发者交流，解决遇到的问题。
5. 技术博客：关注CSS-Tricks、JavaScript.info等博客，了解新技术和最佳实践。

2. 常见的H5标签有哪些，你是怎么用的

题库原题：常见的H5标签有哪些，你是怎么用的

题目要点

常见 H5 标签包括结构语义标签、文本语义标签、表单标签和媒体标签；实际使用中优先考虑语义表达和可访问性，而非样式；充分利用表单和媒体标签的原生能力以减少 JS 复杂度；canvas 与 svg 需根据场景选择；合理使用语义化标签能显著提升页面质量和长期可维护性。

参考答案

在实际工程中，H5 标签并不是“记住有哪些”，而是是否理解它们在语义、结构、可访问性和默认行为上的差异，并能在合适的场景中使用。对标签的理解，直接影响页面结构质量、SEO 以及后续的可维护性。

从结构层面看，最常用的一类是语义化结构标签。例如 header、nav、main、section、article、aside、footer。在页面搭建时，通常会用 header 承载页面或模块级头部信息，用 nav 明确标识导航区域，用 main 作为页面主体的唯一入口，再用 section 或 article 对内容进行分块。这类标签本身不改变样式，但会向浏览器、搜索引擎和辅助技术清晰表达“这块内容的角色是什么”，比单纯使用 div 更具表达力。

阿里-国际电商-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:02:07 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 9 道题。答案默认折叠，便于先自行作答。

1. React/Vue/Angular框架熟悉哪个？对比一下

题目要点

前端框架。

参考答案

我对React和Vue较为熟悉，以下是对这三大框架的对比：

React：
1. 优点：
  1. 组件化：React采用组件化开发，将复杂的用户界面拆分为多个可复用的组件，提高代码的可维护性和复用性。
  2. 虚拟DOM：使用虚拟DOM优化DOM操作，减少页面重绘和回流，提升性能。
  3. 生态丰富：拥有庞大的生态系统，如Redux、React Router等，可满足各种复杂的开发需求。
  4. 社区活跃：社区庞大，更新迅速，遇到问题时容易找到解决方案。
2. 缺点：
  1. 学习曲线：对初学者来说，需要学习JSX语法和组件化的思想，有一定学习成本。
  2. 配置繁琐：项目搭建和配置相对复杂，需要手动配置Webpack等构建工具。
Vue：
1. 优点：
  1. 易上手：语法简洁，文档清晰，容易上手，适合初学者快速入门。
  2. 渐进式框架：可以逐步引入Vue，与现有项目或其他技术结合使用，灵活性高。
  3. 模板语法：使用HTML模板，对熟悉HTML和JavaScript的开发者更友好。
  4. 性能优化：也采用虚拟DOM，性能表现良好。
2. 缺点：
  1. 生态不够丰富：相较于React，生态和社区稍小，插件和库的选择相对有限。
  2. 大型项目支持：在处理大型复杂项目时，可能不如React和Angular成熟。
Angular：
1. 优点：
  1. 全栈解决方案：提供从前端到后端的一整套解决方案，包括路由、状态管理、表单处理等。
  2. 强类型系统：基于TypeScript开发，具有强类型检查，有助于大型项目的代码维护和团队协作。
  3. 依赖注入：内置依赖注入系统，方便管理组件和服务之间的依赖关系。
  4. 适合企业级应用：在开发大型企业级应用时，提供了一套完整的架构和规范。
2. 缺点：
  1. 学习曲线陡峭：对初学者来说，需要掌握TypeScript、依赖注入、模块化等概念，学习成本较高。
  2. 灵活性较低：框架较为庞大，定制化程度不如React和Vue高，不适合小型项目快速开发。
  3. 社区相对较小：相较于React，社区活跃度和更新速度稍逊一筹。

2. React Hooks闭包陷阱的产生原因？

题库原题：说说你对 React Hook的闭包陷阱的理解，有哪些解决方案？

题目要点

React Hook 的闭包陷阱是一个常见的问题,它发生在使用 Hook 时,特别是在处理事件处理函数或异步操作时。

闭包陷阱的本质是,在 Hook 内部定义的函数会捕获 Hook 函数执行时的状态,而不是最新的状态。这可能会导致一些意想不到的行为,比如事件处理函数无法访问最新的状态,或者异步操作使用了过期的数据。

造成这个问题的原因是,React Hook 的设计使得组件函数在每次渲染时都会重新定义内部的函数,而这些函数会关闭当时的状态。

解决这个问题的主要方案有以下几种:

使用 useCallback Hook:

阿里-灵犀互娱-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 06:00:30 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 先简单自我介绍

题目要点

自我认知。

参考答案

您好，我叫[你的名字]，毕业于[学校名称]的[专业名称]专业。在大学期间，我就对计算机科学产生了浓厚的兴趣，尤其是前端开发领域。在学习和实践中，我积累了扎实的编程基础，熟练掌握了HTML、CSS、JavaScript等前端开发技术，并在多个项目中担任核心开发角色。我热爱前端开发工作，喜欢通过代码创造用户友好的界面和交互体验。在业余时间，我会不断学习新技术，提升自己的专业能力。我希望能够在一个富有创新和挑战的环境中工作，与优秀的团队成员共同成长。

2. 什么时候学前端？

题目要点

学习经历。

参考答案

3. 怎么学前端？

题目要点

学习方法。

参考答案

学习前端开发需要系统的学习和不断的实践。首先，我从基础的HTML、CSS和JavaScript开始，通过阅读书籍、在线教程和官方文档，打下了坚实的基础。然后，我深入学习了前端框架，如Vue和React，通过实践项目来理解框架的核心概念和使用方法。同时，我积极参与开源项目和在线社区，与其他开发者交流经验，解决遇到的问题。此外，我还关注前端技术的最新发展趋势，通过参加技术会议、观看在线课程等方式不断更新自己的知识体系。

4. 你的未来规划？

题目要点

职业规划。

参考答案

我的短期目标是在前端开发领域持续深耕，提升自己的技术能力和项目经验。我希望能够在当前的岗位上承担更多的责任，参与复杂项目的开发，并不断优化现有系统的性能和用户体验。长期来看，我希望能够成为前端技术专家，带领团队进行技术创新和项目研发。同时，我也希望能够不断提升自己的架构设计能力和团队管理能力，为公司的技术发展做出更大的贡献。

5. 你觉得你什么地方比较强？哪里比较薄弱？

题目要点

自我认知。

参考答案

我认为我的强项在于对前端技术的深入理解和实践经验。我能够快速学习新技术，并将其应用到实际项目中。同时，我具备良好的问题解决能力和团队协作精神，能够与团队成员高效合作，共同完成项目目标。然而，我也意识到自己在某些方面还有提升的空间。例如，在性能优化和大型项目的架构设计方面，我还需要进一步积累经验。此外，我还需要加强对后端技术的了解，以更好地进行前后端协同开发。

6. 一个前端架构师要有什么长处？

题目要点

职业素养。

参考答案

一个优秀的前端架构师需要具备多方面的长处。首先，需要有深厚的技术功底，对前端技术栈有全面而深入的理解，包括HTML、CSS、JavaScript、前端框架、构建工具等。其次，需要具备良好的系统设计和架构能力，能够设计出高性能、可扩展、易维护的前端系统。此外，前端架构师还需要有较强的项目管理能力，能够领导团队进行项目的规划、开发和交付。良好的沟通能力和团队协作精神也是必不可少的，能够与产品、后端团队等进行有效的沟通和协作。最后，前端架构师需要有敏锐的技术洞察力，能够关注行业动态，引入新的技术和方法，推动团队的技术进步。

7. 微前端是什么？

题库原题：什么是微前端？

题目要点

微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

参考答案

各个前端应用还可以独立运行、独立开发、独立部署。

微前端不是单纯的前端框架或者工具，而是一套架构体系，

8. SPA和MPA的区别？

题库原题：SPA和MPA的区别？

题目要点

SPA 通过前端路由在单一 HTML 中完成页面切换，交互流畅但首屏和 SEO 成本较高；MPA 每次导航请求新页面，SEO 友好且隔离性强，但交互体验有限；两者本质差异在于前后端渲染与路由职责的划分；现代项目常通过 SSR、SSG 等方式在两种模式之间折中。

阿里-灵犀互娱-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:00:30 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 13 道题。答案默认折叠，便于先自行作答。

1. 你是什么时候开始学前端的

题目要点

学习经历。

参考答案

我接触前端开发是在大学二年级的时候。当时，我选修了一门网页设计与开发的课程，这让我对前端开发产生了浓厚的兴趣。从那时起，我便开始系统地学习HTML、CSS和JavaScript等前端技术。我通过阅读书籍、在线教程和官方文档，打下了坚实的基础。同时，我积极参与实践项目，不断提升自己的技能。毕业后，我继续深入学习前端框架和工具，如Vue、React等，并在实际工作中不断积累经验。这段学习经历不仅让我掌握了前端开发的技术，还培养了我对前端开发的热爱和持续学习的态度。

2. 为什么选择前端这个方向呢，是如何学习前端的

题目要点

学习动机与方法。

参考答案

我选择前端开发是因为它结合了技术和创意，能够直接看到自己的代码转化为用户界面，这种即时反馈让我感到非常满足。同时，前端领域技术更新快，充满挑战，能够不断学习新知识。我通过在线课程（如Coursera、Udemy）、官方文档（如MDN Web Docs）和实践项目学习前端。我积极参与开源社区（如GitHub），与其他开发者交流经验，并通过阅读技术博客（如CSS-Tricks、JavaScript.info）保持对新技术的敏感度。这种多渠道的学习方式让我能够全面掌握前端开发的技能，并在实践中不断提升。

3. 说一下你觉得前端和后端有什么区别

题目要点

前后端理解。

参考答案

前端和后端在技术栈、运行环境、关注点等方面有显著区别：

技术栈：
1. 前端：主要使用HTML、CSS、JavaScript及其框架（如Vue、React、Angular）进行开发。例如，使用Vue.js构建用户界面，处理用户交互逻辑。
2. 后端：使用服务器端语言（如Node.js、Java、Python、Ruby）和框架（如Express、Spring Boot、Django、Rails）开发API、处理业务逻辑和与数据库交互。例如，使用Node.js和Express框架搭建RESTful API服务器。
运行环境：
1. 前端：代码运行在客户端浏览器中，与用户直接交互。前端开发者需要考虑不同浏览器的兼容性和用户体验。
2. 后端：代码运行在服务器上，处理请求、管理数据和执行业务逻辑。后端开发者关注服务器性能、安全性和可扩展性。
关注点：
1. 前端：注重用户体验、界面设计、响应式布局和性能优化（如页面加载速度、交互流畅性）。前端开发者需要与设计师紧密合作，实现视觉效果和交互功能。
2. 后端：关注数据存储、业务逻辑实现、API设计和安全性。后端开发者需要与数据库交互，处理并发请求，并确保系统的稳定性和可靠性。
开发工具：
1. 前端：使用VS Code等编辑器，搭配浏览器开发者工具进行调试。依赖构建工具（如Vite、Webpack）进行代码打包和优化。
2. 后端：使用IntelliJ IDEA、PyCharm等IDE，搭配数据库管理工具（如pgAdmin、MySQL Workbench）进行开发。需要配置服务器环境（如Nginx、Apache）和部署工具（如Docker、Kubernetes）。
数据处理：
1. 前端：主要处理数据的展示和用户输入的收集。通过API从后端获取数据，并将其转换为用户界面。
2. 后端：负责数据的存储、查询和业务逻辑处理。与数据库（如MySQL、MongoDB）交互，执行复杂的数据操作和事务管理。
性能优化：
1. 前端：优化页面加载时间、减少重绘和回流、提升交互响应速度。例如，通过懒加载、代码分割、图片优化等技术提高性能。
2. 后端：优化服务器响应时间、数据库查询效率、减少内存泄漏和提升并发处理能力。例如，使用缓存机制（如Redis）、数据库索引优化、连接池管理等技术提高性能。

4. 最近有在看什么技术文章吗

题目要点

学习态度。

参考答案

最近我在阅读关于WebAssembly性能优化的文章，了解如何通过WebAssembly提升前端应用的运行效率。例如，我读了一篇关于使用WebAssembly进行图像处理的文章，介绍了如何将图像处理算法编译为WebAssembly模块，从而在浏览器中实现高性能的图像编辑功能。

同时，我也在关注前端框架的新特性，如Vue 3的Composition API和React的Concurrent Mode。这些新技术有助于构建更高效、响应更快的用户界面。

此外，我还阅读了一些关于前端安全的文章，特别是关于防止XSS攻击和CSRF攻击的最佳实践，这些知识对于构建安全的Web应用至关重要。

通过这些文章，我能够不断更新自己的知识体系，保持对技术前沿的敏感度，并将所学应用到实际项目中。

5. canvas 引擎有什么优化渲染性能的方案

题库原题：canvas 有什么优化渲染性能的方案

阿里-智能产品事业部-暑期实习 · 第 1 轮 · 一面

Fri, 27 Jun 2025 05:57:10 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 18 道题。答案默认折叠，便于先自行作答。

1. 请介绍一下你在 [具体项目名称] 中主要做了哪些工作？

题目要点

项目经验。

参考答案

回答参考：

项目架构设计：参与设计项目的整体架构，选择前端技术栈。考虑到项目规模和性能需求，选择了 Vue.js 作为前端框架，Vuex 进行状态管理，Vue Router 实现单页面应用的路由管理，Vite 作为构建工具。这些技术的选择旨在提高开发效率和应用性能。
核心模块开发：负责开发用户认证模块，实现了基于 JWT（JSON Web Token）的登录、注册和权限管理功能。通过与后端 API 的紧密协作，确保了用户数据的安全传输和存储。同时，开发了数据可视化模块，利用 ECharts 库展示复杂的业务数据，帮助用户更直观地理解和分析数据。
性能优化：通过分析页面的性能瓶颈，实施了一系列优化措施。例如，采用代码分割技术将应用拆分成多个小块，实现按需加载；使用懒加载技术延迟加载非首屏资源；对图片资源进行压缩和格式优化，减少页面加载时间。这些优化显著提升了页面的加载速度，改善了用户体验。
代码审查与测试：积极参与代码审查过程，遵循项目编码规范，确保代码质量。编写了大量的单元测试和集成测试用例，使用测试框架（如 Jest）进行自动化测试，确保代码的稳定性和可靠性，减少上线后的潜在问题。

2. 在 [具体项目名称] 中，遇到了哪些技术难点？你是如何解决的？

题目要点

问题解决能力。

参考答案

回答参考：

跨浏览器兼容性：项目需要支持多个主流浏览器，包括一些旧版本的浏览器。为了解决这一问题，使用 Babel 将 ES6+ 代码转译为 ES5，确保大部分现代 JavaScript 特性能够在旧浏览器中运行。同时，引入 Polyfill 库来补充那些浏览器原生不支持的 API，例如 Promise、fetch 等。此外，使用 Autoprefixer 工具为 CSS 添加必要的浏览器前缀，确保 CSS 样式在不同浏览器中的一致性。
性能优化：随着项目规模的扩大，页面的加载时间和交互响应时间面临着挑战。通过分析，发现主要的性能瓶颈在于大量的初始 JavaScript 包和未优化的图片资源。为解决此问题，实施了代码分割策略，将应用的代码分割成多个小块，按需加载，减少了初始加载的包大小。同时，将图片资源转换为 WebP 格式，并实现了图片的懒加载，只有在用户滚动到图片位置时才加载图片，从而显著缩短了页面的初始加载时间。
后端 API 集成：在开发过程中，遇到了 API 响应数据格式不一致的问题，这给前端的数据处理带来了困难。为了解决这个问题，设计了一个统一的数据处理中间层，对后端返回的数据进行预处理和格式化，使其符合前端的要求。同时，与后端团队进行了深入沟通，推动他们优化 API 设计，以更好地满足前端的需求。

阿里-阿里云-暑期实习 · 第 1 轮 · 一面

Fri, 27 Jun 2025 05:49:45 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 一共三轮面试，经过整理后形成该面经。

主要考察了候选人的实习经历、项目经验以及对前端工具和技术的理解。问题涵盖了从Vite插件开发到模块管理等多个方面，重点测试了候选人的实际操作能力和对技术细节的掌握。

本轮要点： 本次面试深度考察工程化全链路能力（Vite插件开发/预构建/HMR原理）、性能优化实战（INP项目包体积↓40%/LCP时间↓50%）、跨端架构设计（JavaScript Bridge通信/兼容性治理）及模块化高级应用（单例设计/循环依赖检测）。难点聚焦于pnpm幽灵依赖治理、Vite HMR全流程解析及Node.js运行时设计思想。

本轮共 32 道题。答案默认折叠，便于先自行作答。

1. 请介绍你在乾象、腾讯的实习经历，包括实习期间遇到的难点和亮点。

题目要点

实习经历, 项目背景, 技术挑战, 解决方案, 成绩, 亮点

参考答案

可以从项目背景、具体职责、遇到的技术挑战及解决方案等方面进行阐述。同时，可以分享一些在实习中取得的成绩或亮点，比如优化效果、团队协作等。

2. 现场实现一个最近开发的模块/组件，例如 URL Filter。

题目要点

设计思路, 实现过程, 单元测试, 代码示例

参考答案

可以详细描述这个模块/组件的设计思路、实现过程以及如何进行单元测试。如果可能的话，还可以展示一些代码片段来说明关键部分。

3. 在实习期间开发的 Vite 插件的功能是如何实现的？

题目要点

架构兼容性：理解 Vite 插件如何复用 Rollup 钩子并扩展开发环境特有的 Server 钩子。
钩子应用场景：能够准确区分 config（配置修改）、resolveId/load（路径解析）、transform（代码改写）的应用边界。
AST 与代码转换：掌握如何通过 AST 操纵实现对代码的无损增强，并维持 SourceMap 的连续性。
环境控制：利用 configureServer 扩展中间件，以及通过 handleHotUpdate 实现精准的热更新控制。
虚拟模块技术：利用虚拟模块机制实现编译时信息的动态注入。

参考答案

Vite 插件的实现本质上是基于 Rollup 插件接口的扩展，并结合了 Vite 特有的开发服务器钩子。可以从插件系统的架构设计、生命周期钩子（Hooks）的执行时序、以及针对开发环境与生产环境的差异化处理三个维度进行回答。

阿里-盒马-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 05:48:59 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 聚焦前端基础深度：虚拟DOM性能边界（复杂DOM场景优劣）、响应式布局实现（媒体查询/弹性布局）、浏览器兼容性实战（Polyfill/Babel）、微信小程序架构设计理念。难点在于Rem计算优化策略和O(1)空间复杂度的字符串逆序算法设计。

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 自我介绍

题目要点

个人背景、技能、经验、职业规划等。

参考答案

参考模版如下，一般3分钟以内即可。
面试官您好！我叫[姓名]，毕业于[毕业院校]，专业是[专业名称]。我有XX段前端开发实习经验，熟练掌握HTML、CSS、JavaScript等前端技术栈，主要的技术栈是React。在XX公司实习期间，主要参与过供应链管理系统和微信小程序开发，学习了前端相关专业技术，以及熟悉了项目的整体流程，同时积累了丰富的项目经验。

2. React 的虚拟 DOM 解决了什么问题？

题库原题：React 的虚拟 DOM 解决了什么问题？

题目要点

跨平台能力：通过对象层的抽象，实现了 UI 描述与具体渲染平台的解耦。
开发范式转换：将命令式的 DOM 操作转变为声明式的数据驱动，提升了复杂业务的可维护性。
性能兜底：通过批处理和 Diff 算法，在不增加开发者负担的情况下，减少了不必要的真实 DOM 操作开销。
研发效率：让开发者专注于业务逻辑而非底层 DOM 树的增删改查，降低了出错概率。

参考答案

在探讨 React 虚拟 DOM（Virtual DOM）所解决的问题时，不能简单地将其归结为“性能更快”，这实际上是一个常见的误区。

从长期的工程实践和框架演进来看，虚拟 DOM 核心解决了以下几个维度的挑战：

1. 解决跨平台与抽象层的问题

虚拟 DOM 最本质的贡献在于建立了一层声明式的抽象。在传统的 Web 开发中，代码直接耦合在真实的 DOM 环境中。而虚拟 DOM 将复杂的 UI 转换成了一种轻量级的 JavaScript 对象结构（即 VNode）。

这种抽象层使得 React 脱离了浏览器的物理限制。因为 VNode 只是普通的 JS 对象，它不仅可以被渲染为浏览器的 DOM，也可以被渲染为移动端的原生控件（React Native）、服务端字符串（SSR）甚至是 Canvas 绘制指令。它解决了 UI 描述与底层渲染引擎之间的强耦合问题，实现了“一次学习，随处编写”的愿景。

阿里-盒马-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 05:48:59 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 深入框架原理与工程化：小程序加载流程（缓存/渲染机制）、Vue路由动态加载（Code Splitting）、全局状态管理（Vuex模块化）、生命周期资源管理（mounted/beforeDestroy）。难点在于手势识别算法（滑动速度计算）和可控动画引擎（开始/暂停/取消）。

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 小程序的页面加载流程是怎样的？请简要描述从用户点击小程序图标到页面显示的整个过程。

题库原题：小程序的页面加载流程是怎样的？请简要描述从用户点击小程序图标到页面显示的整个过程。

题目要点

双线程并行：启动过程是渲染层（UI）和逻辑层（JS）同步初始化的过程。
离线包机制：通过本地缓存和分包加载策略，极大减少了网络传输对首屏的影响。
预加载优化：微信客户端通过预热环境和提前下载包来压榨启动耗时。
数据驱动渲染：首屏显示依赖于逻辑层到渲染层的初始数据传输（setData 机制的前身）。

参考答案

小程序的加载是一个多线程协作的过程，主要可以分为环境准备、代码下载、注入运行以及首屏渲染四个阶段。

1. 运行环境准备（准备阶段）

当用户点击小程序图标时，微信客户端会立即启动一个原生容器。

进程启动：微信会为小程序分配独立的进程或线程。
双线程环境初始化：微信会同时初始化两个运行环境，即逻辑层（AppService）和渲染层（WebView）。为了提速，微信通常会预先启动一个通用的空白 WebView（预加载机制），从而缩短环境搭建的时间。

2. 代码包下载与加载（资源阶段）

在环境准备的同时，微信会根据小程序的 AppID 去服务端请求最新的代码包。

增量更新与缓存：如果本地已有缓存，则直接校验版本；若无或版本过旧，则下载加密的代码包。
分包加载优化：如果开发者配置了分包，此时只会下载“主包”内容，从而减少首次下载的数据量，提升启动速度。

3. 代码注入与逻辑初始化（初始化阶段）

代码包下载完成后，微信会开始解析并执行代码。

逻辑层注入：执行 app.js 和各页面的 JS 逻辑。此时，小程序会触发 App.onLaunch 和 App.onShow 生命周期回调。
配置解析：解析 app.json 和页面配置，确定全局样式、路由关系及初始页面。

4. 渲染层视图构建与首屏渲染（渲染阶段）

这是用户肉眼感知页面出现的关键时刻。

视图层初始化：渲染层载入 WXML 转换后的模板和 WXSS 样式。
初始数据传输（First Paint）：逻辑层在实例化页面后，会将初始数据（Initial Data）通过微信底层提供的 evaluateJavascript 方式，跨线程传递给渲染层。
动态渲染：渲染层接收到数据后，结合模板生成最终的 DOM 树，并交由浏览器引擎进行绘制。

5. 交互就绪（Finish 阶段）

生命周期触发：页面初次渲染完成后，逻辑层会收到反馈，并触发页面的 onReady 回调。此时，逻辑层与渲染层已经建立了稳定的双向数据绑定，用户可以开始进行交互操作。

2. 小程序页面间有哪些传递数据的方法？

题库原题：小程序页面间有哪些传递数据的方法？

阿里巴巴集团 on Last Stand

阿里巴巴-社招-5年 · 第 1 轮 · HR面

1. 离职的原因是什么

题目要点

2. 你熟悉 VUE 吗

题目要点

3. 学习一些新技术，或者是业务中碰到的一些难题，你是针对性去解决会比较多一些，还是说你有系统的学习的一些规划呢

题目要点

4. 工作过程中哪些成长比较大，遇到过哪些难题，怎么解决的

题目要点

5. 你们的加班强度怎么样

题目要点

6. 你如何看待团队合作

题目要点

7. 离职的时候你怎么处理跟前同事的关系的

题目要点

阿里巴巴-社招-5年 · 第 1 轮 · 三面

1. 请用3分钟介绍魔方组件项目，突出技术决策过程

题目要点

2. 项目中遇到的最大技术挑战及解决思路

题目要点

3. 性能优化项目的ROI如何评估

题目要点

一、考察点

二、参考答案

2.1 ROI 的定义与核心思想

2.2 性能优化投入的量化

2.3 性能优化收益的量化

2.4 关联业务价值与性能指标

2.5 评估流程示例

2.6 风险与非量化因素考虑

三、常见误区或面试陷阱

4. 项目风险遇到过哪些 ，怎么解决的

题目要点

阿里巴巴-社招-5年 · 第 1 轮 · 二面

1. 魔方组件的整体架构设计，包括其模块划分和核心功能

题目要点

2. 你们是如何选择技术栈的？有哪些关键因素影响了决策

题目要点

3. 魔方组件如何实现动态加载，以提升初始加载性能

题目要点

4. 魔方组件如何管理组件的配置信息？组件之间的通信是如何处理的

题目要点

5. 三维模型的加载性能，将加载时间从10秒缩短至3秒都做了哪些操作

题目要点

6. 这个项目中在移动端，你们是如何处理不同设备的适配问题的

题目要点

7. 有没有用服务端渲染（SSR）？如果有，你们是如何实现的

题目要点

一、考察点

二、参考答案

2.1 SSR 的基本概念

2.2 SSR 的优势和适用场景

2.3 常见 SSR 实现方案

2.4 我们项目中 SSR 的实现方式

2.5 实现过程中需注意的问题

三、常见误区或面试陷阱

8. 项目中使用了哪些状态管理工具？为什么选择这些工具

题目要点

一、考察点

二、参考答案

2.1 项目中使用的状态管理工具

2.2 选择这些工具的理由

阿里巴巴-社招-5年 · 第 1 轮 · 一面

1. 你参与的主要项目是什么？是桌面端还是移动端项目

题目要点

2. 在项目中主要使用了哪些技术栈

题目要点

3. 你对 Vue 有多少了解

题目要点

一、考察点

二、参考答案

2.1 Vue 框架的整体认知

阿里巴巴-社招-3年 · 第 1 轮 · 二面

1. 讲一下你对Hooks 了解

题目要点

一、考察点

二、参考答案

2.1 Hooks 的定义与设计初衷

2.2 常用 Hooks 及其作用

4. 项目风险遇到过哪些，怎么解决的

❌ 误区一：滥用箭头函数导致 `this` 绑定错误