腾讯音乐前端一面凉经

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。

在实际项目中常用的设计模式有如下几种：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=1a0513f768dd42e88065708ac3b1237f单例模式（Singleton）：应用于需要保证全局只有一个实例的情况，例如数据库连接池、线程池。工厂模式（Factory）：应用于创建对象实例的场景，隐藏实际创建逻辑，提供一个统一的接口。观察者模式（Observer）：应用于一对多的依赖关系，当一个对象状态发生改变时，其依赖的对象会自动进行更新。适配器模式（Adapter）：应用于将一个类的接口转换成客户端所期望的另一种接口，常用于旧代码的升级与兼容。策略模式（Strategy）：应用于根据不同的策略做出不同的处理，例如支付方式的选择、排序算法的选择等。装饰器模式（Decorator）：应用于为对象动态添加额外的功能，而不需要修改其原始代码。模板方法模式（Template Method）：应用于定义算法的骨架，将一些步骤的具体实现延迟到子类中。命令模式（Command）：应用于将请求封装成具体的对象，使得可以用不同的请求对客户进行参数化。迭代器模式（Iterator）：应用于提供一种方法来访问一个容器对象中的各个元素，而无需暴露其内部结构。组合模式（Composite）：应用于将对象组合成树形结构以表示部分-整体的层次结构，使得用户对单个对象和组合对象的使用具有一致性。

五一前一天二面结束，状态变为hr面，可是五一结束过两天了为什么还没约面。有佬知道什么情况嘛

三个都是前端开发的岗位第一个是腾讯音乐tme的k歌直播业务，base深圳，应该是react native相关的大前端开发，比较c端，业务应该还比较核心，转正概率据说 50%第二个是美团跑腿业务，base北京，也是react native的开发，业务不知道如何，转正概率会比较高第三个是字节跳动穿山甲广告业务，base北京，开发低代码相关web平台，比较b端的，据面试官说比较缺人，但要转正应该要实习比较久，而且很卷北方人，个人后续想在北京发展，但深圳也可以，暑期实习不是很看重转正，但有转正更好，更看重经历上的提升，需要秋招的时候接着冲，应该怎么选呢，比较纠结，大家可以给点建议嘛～