面试题总结

小红书

自己自定义过 hook 吗 useOnClickOutSide
class 和 hook 的差异及 hook 的弊端，hook 什么时候容易出 bug
hook 更加利于逻辑复用，class 要使用 HOC hook 逻辑更加聚合，class 逻辑分散在各个声明周期
算法题：getValueByKeyPath(obj , 'a.b')，lodash.get
ts 声明问题
```
interface Person {
  name: Number;
  [key: string]: String;
}
```
String 是 js 的包装类型， string 是 ts 的类型

ts 声明函数

const fn = userId => `${userId}123`;

const fn: (userId: string) => string = userId => `${userId}123`;

宏任务微任务题目

const a = new Promise(resolve => {
  console.log(1);
  resolve(2);
  console.log(3);
});

a.then(value => {
  console.log(value);

  setTimeout(() => {
    console.log(4);
  });
});

setTimeout(() => {
  console.log(5);
}, 100);

setTimeout(() => {
  console.log(6);
}, 0);

console.log(7);

// 1372645

js 转 css 引出性能优化，从哪些角度去分析，排查以及优化。轮播图的宽度，移动端和 pc 端的像素清晰度
自适应图片：picture 和 img srcset。分析：借助性能检测工具(pageSpeed lightHouse)
rem 问题，假设页面根是 33rem，如何处理，用 loader 还是 plugin 处理
有没有手写过 loader
loader 是从左到右还是从右到左
从右到左，使用 reduceRight
设计模式，以及代码中使用过什么去优化过代码，发布订阅和观察者模式区别 https://juejin.cn/post/6844904138707337229
- 装饰器模式：React HOC
- 适配器模式：将不同数据结构转化成统一数据接口，例如 admin 重构时的数据结构转化
- 代理模式：事件委托
- 发布订阅模式：消息通过广播，订阅者可以获取到消息，一对多。Form 组件，有中间方
- 观察者模式：无中间方
node.js，koa，koa compose，洋葱模型
React 遍历是深度遍历还是广度遍历，两者有什么区别
深度遍历
useState 为什么不能放在 if 中
React hook 底层是依靠 hook 定义的顺序来执行的，如果声明在 if 中，会打乱顺序，链表存放
100 个网络请求，当次至多发 10，如果设计让 100 个请求尽快执行下去。Promise.all 有问题，比如第一批取 10 个，9 个 1s，剩下 1 个 100s，这样会浪费 99s
接口并发请求
低代码，100 个 input，输入一个 input，如何优化 100 个都不 render
Vue 中的 data 为什么是一个函数
手写节流、bind
原型链的题（简单）
比较有难度、收获比较大的项目、上传组件困扰的问题

XTransfer

flex：1 的含义
垂直居中

用 css 画一个三角形

div {
  width: 0;
  height: 0;
  border: 40px solid;
  border-color: transparent transparent red;
}

http2 多路复用原理
输入 url 后发生了什么，着重问了 DOM 树的构建
浏览器缓存
浏览器为什么有跨域问题以及如何解决跨域
esm 和 cjs 区别
rollup 和 webpack 区别
webpack Tree Shaking 以及实现原理
webpack 相关的优化有没有做过
性能优化：首屏加载速度，从哪些角度入手优化
是否做过埋点或者性能监控
React diff 算法，深度优先遍历的过程以及算法复杂度
- https://react.iamkasong.com/diff/prepare.html
- https://zhuanlan.zhihu.com/p/2034637
遇到的最难的项目
React Redux connect 原理
React Fiber 架构
hook 为什么不能在 if 中使用 React 底层依赖于 hooks 的顺序文档
手写函数柯里化
手写 Promise.all
banner 图加载模糊如何处理
- 渐进式 jpeg（模糊加载）
- 非渐进式（上下加载）
- 准备一张缩览图
对于加班的看法
闭包及使用场景

黑湖

遇到的最难的问题
hook 和 class 直观的区别
react 性能优化，PureComponent、memo
长列表优化
webpack loader 和 plugin 的区别
做过什么 webpack 层面的优化
js 垃圾回收机制
promise resolve 和 reject 都没有触发有问题吗
小程序偏底层
react diff 算法
Fiber 解决了什么问题
埋点，错误收集
margin 重叠，BFC

编程题

const data = [4,1,5,2];

{value: 1, next: {value: 2, next: {value: 4, next: {value: 5}}}}

写一个 react 登录框
做客户端，黑湖智造部门，维护组件库，效率后台工具，目前重构 3.0

ebay 外包

http 方法及返回状态码
restful api，什么时候用什么 http 方法
cookie、setCookie、cookie 属性
登录权限验证、页面和组件级别的权限校验
介绍 ssr，ssr 开发组件时要注意什么
ssr 中服务端如何处理 css、svg、img
- 服务端不处理，使用 ignore-loader
- react-loadable collectChunks 自动处理？然后通过 chunkExtractor.getCssString 来实现？
- client 和 server 的 bundle 配置不同
打包为什么用 rollup 不用 webpack，如何测试服务端渲染时不会出问题
介绍单元测试
class component 和 function component 的区别
hook 能不能写在条件分支里
组件重新渲染的问题
memo 引用对象对比的问题
- 可以利用 React.memo 的第二个自定义比较函数进行深层比较
- 或者使用 shouldComponent 自定义比较
- 扩展：deep equal Immutable
线上错误的追踪，错误监控系统的设计，source-map 及映射原理
koa 及中间件

小红书​

XTransfer​

黑湖​

ebay 外包​

小红书

XTransfer

黑湖

ebay 外包