面试题总结
小红书
自己自定义过 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);
// 1372645js 转 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 算法,深度优先遍历的过程以及算法复杂度
遇到的最难的项目
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 及 中间件