问答内容

大概讲讲你项目用的技术栈

👦🏻：脚手架 Vite、组件库 Antd、图表 G2Plot、状态管理 Mobx 和 Redux

你上家用的是 Vue 2 全家桶是吧，那 Vue 3 你了解过吗，他们之间有什么区别

👦🏻：了解过但还没实际用过，可以考虑自学。区别主要是模板编写方面不一样（❌ 其实应该扯扯性能方面有提升

你觉得 Vue 3 和 React 有啥相似的地方？

👦🏻：模板语法方面有些更贴切了，Vue 3 也可以用 JSX 语法来写了（❌ 也许应该回答别的

Vue 和 React 你实际使用中感觉有什么差别

👦🏻：我现在肯定是写 React，毕竟项目经验更多（❌ 回答的不算太吻合，其实可以说说 React SetState 和 Vue 直接修改对象值这个问题

像 React 你有使用过别人的类似 CRA 这样的脚手架吗

👦🏻：我一开始就是用这个学习的，后面就改成了 Vite 自己搭的，自己组装路由、状态管理、接口请求一类的

React 你常用的是 Antd 是吧

👦🏻：其他组件库调研过，感觉还是 Antd 的业务场景涵盖最好

你使用哪个状态管理，为什么要使用状态管理，它解决了什么问题

👦🏻：目前个人偏向使用 Mobx，简单的会用 useReducer。跨组件穿参，复杂数据状态调整（未答出），以及类全局的用户登录状态一类的数据托管

React 16 开始才会有 Hooks 的哈，你觉得 Hooks 解决了什么问题

👦🏻：主要是多个组件相同业务逻辑的提取，减少重复代码的编写

如果不用 Hooks 的话你会怎么处理呢

👦🏻：class 写法的话那就可能会有些重复了，我现在都会偏向于用 Hooks 写（❌ 其实算没答出来，正确回答应该是 HOC 高阶组件，多个组件包装一个这个

TS 看你会写，那 TS 和 JS 有什么区别？

👦🏻：我也是在公司写的第一个项目开始用的 TS，入坑之后一发不可收拾，TS 主要还是类型检查为主（代入了我之前博文提到的组件参数混乱，用途不明的问题

ES6 有哪些新的语法特性有了解吗？

👦🏻：也就是给对象扩展了一些语法糖方法像 map reducer 那些吧，还是有了解的，总比用 for while 要好吧（其实还可以补充下 Promise、Async）

let、var 和 const 的区别有哪些？

👦🏻：const 的话就是不可修改（对象还可以）let 和 var 涉及到变量提升的问题，当然大多数都是用 let 和 const 写的。

变量提升你能举个例子？

👦🏻：写函数的时候一般情况都会把声明放在最前面，如果是 var 的话就会有提升，用 let 的话就必须先定义再使用（其实还可以说 var 的话允许声明多次，就难以发现可能存在的问题

Promise 你怎么使用的？

👦🏻：主要是解决异步场景为主，例如可以实现多张图片按顺序依次上传

await 出现异常你会怎么处理？

❌ 没答好，其实就是 try 和 catch，但自认为这种形式没有用 Promise 的 catch 更优雅一些

你写过原生 JS 吧，原生的构造函数这些怎么写的？

👦🏻：ES5 的话就是一个函数然后 new XXXX 这样子，方法的话里面写 this.XXXX
🧔🏻：可能你们新的是那样写，新的还有 constructor 这样子，我们以前老一点的还有用 prototype 的
👦🏻：对的，这个是 ES6 的，prototype 就是原型链的一种写法

那原型链又是什么东西呢？

👦🏻：简单点其实就是对象基于什么东西构造的

JS 函数你怎么传参的，按值还是引用（其实没听懂，问的应该是指基本对象和引用对象

👦🏻：看你传了什么，如果是基本对象 string number 什么的就是它本身，如果是数组对象那就是个引用
🧔🏻：这只是你表面上看着这样子嘛，那你传参就是复制的，就是按值传递啊，复杂的就是传递的它的引用地址
👦🏻：对的，如果是完整复制一个的话，那就只能深拷贝一个了呀

那深拷贝浅拷贝区别是什么

👦🏻：最简单的办法就是 ... 扩展运算符这种，也就是对象最基本的复制，如果里面还有子对象的话就还是没复制出来（❌ 其实可以扯需要递归
🧔🏻：三个点那个是类似 Object.assign 这种吧
👦🏻：那个是浅拷贝吧
🧔🏻：那我也不记得了，很久没写了，但我知道有这样一个东西

你 CSS 写的多吗

👦🏻：我一开始其实就是 CSS 写的最多，写了很多静态页面，但是发现并没有什么用，公司还是对 JS 这块要求更多，写业务逻辑什么的
🧔🏻：我面过很多都是只会用框架，一些样式写的很少，组件那些基本都是用 Antd 这些样式这些
👦🏻：对，但有时候可能会遇到些很奇怪的问题，我在上家发现 Antd 日期的移动端上有问题把页面撑开了，这种情况就得魔改下样式让它换行

我看你提到了 Float、Flex、Grid 这些布局，讲讲它们之间的区别？

👦🏻：Float 历史最悠久，但其实是围绕文章排版设计的，感觉是比较 Hack 的方式用来布局了，它的话有个致命问题就是高度没法统一控制，可能会有错乱和塌陷的情况
👦🏻：Flex 相较于 Float 更灵活，是按行的方式设计的，可以随便让子元素上下左右对齐，更自由，写个 100% 的高就能让每个块都一样高度更美观

HTTP 请求你有了解么，包括一些常用的请求头？

👦🏻：请求头的话主要还是 CORS 跨域这个场景用的多吧，客户端和服务端都要有个约定，不然会被阻止，解决办法一个是反向代理，或者服务端设置具体域名或 *
🧔🏻：跨域你们很常见吗
👦🏻：我公司项目有两种，一个是前后端 2 个域名，这种就会跨域，还有一种就是 Nginx 反代前后端就没有了
🧔🏻：那你这样配置不就好了
👦🏻：那后端有些可能不太乐意啊，那我就只能看别人心情了

那还有其他你常用的请求头？

👦🏻：那就是 Token 或者缓存控制这些了

缓存控制方式有多少种？

👦🏻：我自己比较熟悉的有 Expire 和 Cache-Control 两种，但现在貌似都是 Cache-Control 更多一些
🧔🏻：一个是强制缓存，一个是协商缓存，强制缓存有个固定的时间，协商缓存就是后端返回给前端进行约定和协商

那你对页面优化方面还有哪些建议？

👦🏻：就我个人经验的话，其实也就是图片一类的资源占比较大，图片这块不考虑兼容性就用 webp，兼容性高的话就自己选择 jpg png，gif 比较差，用视频做替代。然后用压缩工具提高压缩比，降低分辨率就行。除此之外的话工程化项目里面就还是代码分割，动态加载这样子。页面多的情况下分割出来，按需加载。不分割的话首屏会比较久，打包的文件也大。

一些补充

感谢 @Mather 提出的，对以上面试内容的一些补充：

关于 ES6 有什么新的内容，面试官可能想问你，关于 JS 语言的规范和新语法
Promise 那题，确实是可以说用来解决异步问题，但其实是问你懂不懂函数回调 Callback 的坑（就是回调陷阱，改善这种反复嵌套的代码写法，这点确实没答出来有点可惜）
jQuery 有个叫 Deferred Object 的实现，就是早期解决这种问题的一种（涨姿势了，没听过的 API）
下次聊到 Promise，可以顺着 Callback 函数是什么，JQ 里头的实现。甚至 NodeJS 在服务端使用异步的编程方式，这几种说法去聊
有异步那么又会有同步 await，大概率会让你举例子，实现一个 await sleep(3000) 这种就基本 OK（其实就 Promise 里面一个 setTimeout）
如果要求手写代码，可能会出冒泡一类的题，八股文会几条总会更吃香的
接下来还可能会有业务的考察，就算答对了所有，也未见得其他能力有多好
我最近总结出来的，还是个人的项目、时间管理能力、沟通能力是最重要的，技术可以用时间来弥补，但管理和沟通能力，决定了你在团队中能发挥多少效益（是产品经理的感觉，膜拜大佬）