本次面经共 2 轮。每轮单独成文；轮次标题重复时，以“第 N 轮”和稳定的轮次 ID 区分。
轮次导航
- 第 1 轮 · 一面（13 道题）
- 第 1 轮 · 二面（12 道题）
阿里巴巴-社招-3年 · 第 1 轮 · 二面
← 第 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 实现代码复用 ...