「前端」快手一面面经

面经

一开始简单聊了一下项目，问我 react 和 Vue 哪个比较熟，我说 React，然后就开始问我 React 面经了

1. React 有哪些 Hooks？
   1. 答了useRef, useState, useMemo, useCallback
2. 你了解类组件的生命周期吗？
   1. 只用过函数组件，没答上来
   2. 其实跟 Vue 一样，挂载/更新/卸载（同时也提供一些生命周期钩子）
3. 对于 React 的组件，我希望在挂载之后执行一段逻辑，应该写在哪儿？
   1. 写一个 watchEffect，放在回调里，依赖数组传一个空的
4. 那如果希望卸载的时候执行呢？
   1. 在这个回调的 return 里写一个函数体
5. Hooks 有什么限制吗，比如不能在什么场景下用？
   1. 不能在 if 和 for 里写，因为 React 的响应式实现严格依赖 Hooks 的调用顺序来管理状态，if/for 里写会导致这个顺序发生改变
6. 继续追问：具体是怎么影响的？
   1. 答的不太好，其实是因为 React 依据 Hooks 的调用顺序来识别每个 Hook，一但这个顺序发生改变可能导致状态错位等问题
7. React 在什么地方保存这个 Hooks 的顺序？
   1. 那更是答不出来了
   2. React 在 Hook 调用栈追踪了每个组件在一次渲染中调用的所有 Hooks，每当组件渲染时，React 就会开始重新填充这个栈；由于 Hook 的位置是固定的，就可以通过索引去匹配到之前存储的状态和副作用x
8. 之前提到的 useCallback 和 useMemo有什么区别？
   1. 前者用于缓存回调函数，避免匿名的回调函数被重新创建，或者传递给子组件时导致子组件重新渲染；
   2. 后者用于缓存计算结果，只在依赖项变化时重新计算
9. 用过 useLayoutEffect 吗？
   1. 没用过
   2. 就是一个在 DOM 发生改变后，页面重绘前触发的一个 Hook
10. React 组件通讯有几种方式？
    1. 父子通讯：传 state, setState
    2. 兄弟通讯：提升状态到父组件
    3. 深层通讯：Context
    4. 复杂的状态管理：Redux
11. 你提到了 Redux，那 Redux 的更新是怎么触发视图更新的？
    1. 没答上来
    2. Action 被 Dispatch
    3. Reducer 处理 state
    4. store 更新并通知所有订阅者
    5. 通过 react-redux 的 connect 或 useSelector 来通知 React 组件发生改变（最重要的其实是这一点）
12. 你了解事件总线吗？
    1. 没答上来
    2. 通过一个中央总线来管理和分发事件，通过在中央总线上订阅发布事件，从而避免复杂的组件间通讯
13. 了解 React18 的 Fiber 架构吗？
    1. 也没答上来
    2. 这个一句两句也说不清楚了，贴个链接吧https://fe.azhubaby.com/React/Fiber.html
14. 我说我比较熟悉 Vue3 的性能优化手段，面试官说你可以说说
    1. Proxy 代替 getter/setter
    2. 使用 patch flag 标记更新内容，依赖数组追踪依赖，加上树结构打平，实现了高效的 diffing 算法
    3. 静态提升、事件缓存和 slot 生成优化
15. 你提到 Proxy 比 getter、setter 性能更好，那好在哪儿？
    1. 对于大型的对象，proxy 可以直接对整个对象进行代理，但 getter、setter 需要遍历整个对象去添加 getter、setter
16. Proxy 是深层还是浅层的？
    1. 答了 reactive 反正是深层的
    2. 又追问了 Proxy 呢？答成了深层的，但应该是浅层的
17. 了解过 Vue2 中数组是怎么代理的吗？
    1. 没有
    2. Vue 2 通过拦截数组的原型来实现响应式（一般使用 Object.defineProperty，但对于数组这个方法不能拦截数组的索引变化或者方法）
18. ES 6 中 Promise 有哪些方法？
    1. all, catch, finally, then
19. 追问了 all 方法里 catch 行为，如果一个 promise 被拒绝了，还会等待其他的吗？
    1. 不会
20. then 方法是会每一个 Promise 完成了执行一次，还是等所有 Promise 执行完了再执行一次？
    1. 后者
21. 了解 WeakMap 吗？
    1. WeakMap 与 Map 不同的点在于前者只能用对象类型作为 key，并且是弱引用的，所以不提供遍历方法，且一旦作为 key 的对象失去引用就会被垃圾回收
22. 聊聊箭头函数？
23. 了解 V8 的垃圾回收机制吗？
    1. 聊了比较简单的引用计数法垃圾回收机制，聊了这个算法会受循环引用的限制；
    2. 现在的浏览器使用的是标记-清除算法，即会从根出发，所有无法从根取得的对象都会被垃圾回收
    3. 详细的可以参考这个：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Memory_management
24. 开始问 css，怎么居中一个元素？
25. css 中的定位
26. 手撕：
    1. 手写一个 compose 函数，返回一个函数，能够对传入的不定量个函数进行链式调用
    2. 二叉树的 Z 型遍历（一层从左到右输出，一层从右到左输出）

总结

大部分问题就算答不出来也能跟面试官聊两句，有些问题提前准备到了但是没有准备的那么深，有的问题明明看过文档，但还是答的不够完善；总体来说八股部分还算过得去，手撕也很快，看起来面试官还是比较满意的，希望后续能收到二面吧