第2章 高频面试问题与回答框架
面试官对组件库工程师的考察，不仅看技术深度，更看重工程化思路和设计决策能力。本章提炼3个最高频的面试问题，并提供可直接复用的回答框架，帮助你在30秒内建立结构化表达。
Q1: 请描述 React 组件的生命周期（函数组件中）
面试官考察点是否理解 Hooks 如何映射 class 生命周期，能否区分 useEffect 的依赖与清理机制。
回答框架① 点明函数组件没有直接的生命周期，但通过 useEffect 模拟；② 按挂载、更新、卸载三个阶段分层说明；③ 对比 class 的 componentDidMount / componentDidUpdate / componentWillUnmount。
示例回答“函数组件通过 useEffect 实现副作用管理。挂载阶段：useEffect(fn, []) 相当于 componentDidMount；更新阶段：useEffect(fn, [deps]) 在 deps 变化时执行；卸载阶段：useEffect 返回的清理函数。注意：严格模式下会触发两次，但生产环境正常。”
可能追问useLayoutEffect 与 useEffect 的区别？依赖数组为空时如何获取最新状态？
避坑提醒不要只说“没有生命周期”，要展示你理解等价映射；同时避免遗漏清理函数的执行时机（重新渲染前卸载）。
Q2: 你设计一个通用 Dialog 组件需要考虑哪些点？
面试官考察点考察组件设计能力：API 易用性、可扩展性、无障碍、样式隔离、Portal 使用。
回答框架① 先概括核心职责（展示弹窗、管理显隐、承载内容）；② 从 API 设计、DOM 结构、样式方案、交互细节四个维度展开；③ 最后提无障碍（role="dialog"、焦点管理）和测试重点。
示例回答“我会分四层：API 层通过 visible/onClose/children 控制；DOM 层使用 createPortal 渲染到 document.body；样式层支持 className 和 style 覆盖；交互层处理点击遮罩关闭、Escape 键关闭、焦点锁定。额外会用 context 提供关闭方法给内部子组件。”
可能追问如何防止滚动穿透？多个 Dialog 叠加时如何处理 z-index？
避坑提醒不要只谈功能不提边界情况（如关闭动画、ssr 兼容、非模态支持）。缺失焦点管理是常见扣分项。
Q3: 如何优化一个渲染性能差的列表组件？
面试官考察点是否掌握 React.memo、useMemo、虚拟列表、key 优化等常用手段，能否区分问题根因。
回答框架① 先诊断：用 Profiler 或 Console 定位是渲染次数多还是渲染内容重；② 给出分层优化方案：减少渲染次数（memo、shouldComponentUpdate）、减少计算量（useMemo）、减少 DOM 节点（虚拟列表）；③ 提工具：React DevTools Profiler、why-did-you-render。
示例回答“我会先确定瓶颈。如果是列表项无关父组件状态变化，用 React.memo 包裹列表项；如果列表数据量大（>1000项），采用 react-window 虚拟滚动；如果列表项包含复杂计算，用 useMemo 缓存结果。同时确保列表项有稳定唯一 key，避免不必要的重建。”
可能追问虚拟列表如何保证滚动位置精确恢复？React.memo 的深层比较如何做？
避坑提醒不要只列技术名词，要说清楚“什么场景用什么方案”；避免过度优化——先测量再优化是核心原则。
面试官公司侧重点速查
| 公司类型 | 考核重点 | 典型追问方向 |
|---|---|---|
| 字节/美团 (中大型业务) | 真实业务场景设计能力、性能优化 | “你的组件在 10 万数据量表现如何？” |
| 蚂蚁/腾讯 (基建/平台) | API 设计、TypeScript 类型推导、工程化 | “如何让组件支持泛型继承 props？” |
| 创业公司/中小团队 | 快速交付能力、自研组件库落地经验 | “你如何在 2 周内搭建一套基础组件库？” |
| 外企/全球化产品 | 国际化、无障碍、多主题 | “如何支持 rtl 布局和 i18n？” |
💡 面试加分提示：回答任何组件设计问题，主动提及
TypeScript 泛型、测试覆盖率、无障碍 可快速拉高印象分。
📌 每章一练：请用本章“回答框架”结构，口头演练问题“如何实现一个主题切换功能的组件库？”限时 2 分钟，逐层展开。