腾讯音乐前端实习一面 30min

1. display: none 和 visibility: hidden 的区别

• 渲染层面：

◦ display: none：元素完全从渲染树移除，不占据空间（回流+重绘）。

◦ visibility: hidden：元素仍在渲染树中，占据空间但不可见（仅重绘）。

• 子元素影响：

◦ display: none：子元素也会被隐藏。

◦ visibility: hidden：子元素可通过 visibility: visible 单独显示。

2. 三列布局（两边固定，中间自适应）

方案1：Flex 布局
.container { display: flex; }  
.left, .right { width: 200px; }  
.center { flex: 1; }  
方案2：Calc 计算
.center { width: calc(100% - 400px); margin: 0 200px; }  
方案3：绝对定位 + margin
.container { position: relative; }  
.left, .right { position: absolute; width: 200px; }  
.center { margin: 0 200px; }  
3. 闭包

• 定义：函数内部引用外部作用域变量，且变量在外部作用域释放后仍被保留。

• 作用：实现私有变量、函数防抖/节流等。

• 注意：过度使用可能导致内存泄漏。

4. React 状态管理方案及区别
方案 特点 
** useState** 组件级状态，适合简单逻辑。 
** useContext** 跨组件状态，适合全局轻量级状态（避免逐层传递 props）。 
** Zustand** 轻量级全局状态管理，基于 Context + immer，支持订阅和模块化。 
** Redux** 复杂全局状态管理，需手动配置 reducer、action 等，适合大型应用。 

5. 虚拟列表实现

• 核心原理：仅渲染可见区域内的列表项，通过滚动事件动态计算并更新显示内容。

• 关键步骤：

1. 计算可见区域起始索引和结束索引。

2. 渲染对应索引的列表项。

3. 通过 transform 或 padding 模拟滚动位置，保持滚动条正常显示。

6. React 性能优化

• 组件优化：

◦ 使用 React.memo 缓存函数组件，避免无必要重渲染。

◦ useCallback 缓存回调函数，避免子组件因引用变化重渲染。

• 状态优化：

◦ 避免在 useState 中存储不必要的状态（如临时计算值）。

◦ 使用 useReducer 处理复杂状态逻辑，减少重复更新。

• 其他：

◦ 虚拟列表/表格（长列表优化）。

◦ 懒加载（React.lazy + Suspense）。

◦ 避免内联函数在渲染中重复创建。

7. React 的状态（补充常见问题）

• 状态更新异步性：

◦ 合成事件和生命周期中，setState 异步更新，需通过回调获取最新值。

◦ 原生事件（如 setTimeout）中，setState 同步更新。

• 状态穿透问题：

◦ 多层组件传递状态时，可用 useContext 或状态管理库简化。

8. 代码题：生成有效括号组合（回溯法）
var generateParenthesis = (n) => {  
  const res = [];  
  const backtrack = (path, left, right) => {  
    if (path.length === 2 * n) res.push(path);  
    if (left < n) backtrack(path + '(', left + 1, right);  
    if (right < left) backtrack(path + ')', left, right + 1);  
  };  
  backtrack('', 0, 0);  
  return res;  
};  
思路：通过回溯法枚举所有可能，用 left 和 right 控制左右括号数量，确保任意时刻 right ≤ left 且总数不超过 n。