阿里巴巴-社招-3年 on Last Stand

阿里巴巴-社招-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. 怎么理解回流跟重绘？什么场景下会触发？

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