2021届秋招哈啰出行前端面经(一面)

lucifer 2021-02-23 14:44:51
前端 端面 出行 行前 哈啰


面试过程

  1. 简单做个自我介绍吧。
  • 面试官您好。。。
  1. 看到了你的项目经验,简单介绍一下你的项目吧。
  • 。。。
  1. 你的项目中用到了 React,用的是那个版本呢?
  • 用的 React 16.5(记错了,应该是 16.8)
  1. React 16.5 已经有 Hooks 了吗?
  • 没有(场面一度十分尴尬,React 16.8.0 是第一个支持Hook 的版本)。
  1. Hooks 和 class 有哪些优势?
  • 有时 class 里不用的生命周期函数中会出现相同的逻辑,使用 Hooks 使得代码更易维护。
lucifer 注: hooks 带来的优势一方面是赋予了函数式组件更多功能,使得其从功能上可完全替代 class 组件。 另一方面 hooks 创造了一种新的代码组织方式,和以前的 mixin 以及 render props 的出发点是类似的,但其注重相同功能的代码放到一起,使得代码逻辑复用多了一种选择。当然这其中有利有弊,由于篇幅限制,不在这里展开。
  1. 你用过 Hooks 的哪些方法?哪些函数?
  • 用过 useEffect。
lucifer 注: 建议大家多讲几种,比如 useState, useCallback 等。
  1. useEffect 有什么特点?
  • 使用 useEffect 可以模拟一些生命周期函数,比如 componentDidMount,componentDidUpdate,componentWillUnmount。
  1. react 的生命周期有哪些?
  • 挂载时有 componentDidMount,更新的时候有 componentDidUpdate,shouldcomponentUpdate,卸载的时候有 componentWillUnmount 等。
  1. componentWillReceiveProps() 你了解过吗?
  • 没有了解过。后来查文档说 componentWillReceiveProps() 不太常用。
  1. 当 Redux 中的数据发生变化时,哪几个生命周期会发生变化?或者解释一下 Redux 的运行机制?
  • 乱答了一通……答得不好。其中谈到了 redux 主要用于复杂的数据流。
lucifer 注:推荐大家阅读 深入理解redux
  1. 复杂的数据流是指什么样的?
  • 给自己挖了个坑,没太说明白,原因在于不了解 Redux 的应用场景,即为什么要使用 Redux。这篇文章 讲得挺好的,意思就是当我们的状态分布在多个组件中,跟踪这些组件的状态变得繁琐时,就可以使用 Redux 来统一管理了。
  1. webpack 平时做过哪些配置?
  • 平时会设置 loader 和 plugin,用过插件 commonChunks 等。
  1. plugin 和 loader 有什么区别?
  • loader 相当于一个模块转化器,比如将 less 文件转化为 css 文件,plugin 支持一些拓展的插件,比如 HTMLWebpackplugin,commonChunks 等。
  1. loader 如何将 less 文件转化为 css 文件?
  • 这里没搞清楚是问具体配置还是问原理,结果面试官就换下一个话题了。
lucifer 注:其实就是 ast 的解析和转化,具体内容大家可以搜索下相关文章。
  1. loader 的执行顺序是什么样的?
  • 从右往左、从下往上。
lucifer 注:没看到从下到上什么意思。 不过 loader 的执行顺序是借鉴了 compose,函数式编程中的 compose 的结合顺序就是从右向左,而功能类似的 pipe 则是从左到右,大家常见的 linux 管道(pipe)就是从左到右。
  1. 我想配置一个单页应用,如何配置 entry 部分?
entry: {
// 这里写什么
}
  1. ES6 了解吗?let, const, Map, Set, 箭头函数等等。
  2. 下面的代码 b 等于什么?
let a = [1, 2, 4]
let b = a.map(v => { v= v*2 })

我先回答了 b = [1, 4, 8](脑子抽了,小学数学都算错),面试官问为什么不是 [2, 4, 8],我说说错了

然后又说这样不对,因为箭头右边有个大括号。

其实上面代码中 b 是 [undefined, undefined, undefined],面试官引导该怎么处理才能使 b 为 [2, 4, 8]。

答案就是如果箭头右边是打括号,需要在大括号内加一个 return 返回就行了。即下面的代码:


let a = [1, 2, 4]
let b = a.map(v => { v= v*2; return v; })

平时写 map 一直都没用过大括号,面试的时候才明白,我炸了!

  1. 了解事件循环吗?
lucifer 注:推荐阅读我之前写的 《一文看懂浏览器事件循环》
  1. 有什么问题?

具体工作地点看自己安排。杭州和上海。杭州主要负责算法平台的搭建和地图相关。技术栈是 React。

感受

面试官很和蔼,由于堵车来的较晚,还表示不好意思,面试时的感觉自己较长时间没有面试水平下滑,菜得一批,map 中如果是大括号应该加上 return 都不知道,纠结了半天。总体还是根据简历来提问的,所以一个好的项目至关重要,项目不在于多么宏大,而是自己真正独立做了哪些部分,有收获才是最重要的。

lucifer 总结

由于是秋招,总体面试难度偏低。可能是一面的原因,就连编程和算法题也没有。面试中的大多数问题都是常见的问题,中规中矩。大家查缺补漏即可。之后会给大家带来更多面经。

大家也可以关注我的公众号《脑洞前端》获取更多更新鲜的前端硬核文章,带你认识你不知道的前端。

版权声明
本文为[lucifer]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000039261344

  1. 对前端异常window error捕获的全面总结
  2. A comprehensive summary of front end exception window error capture
  3. 成功解决Problem while trying to mount target]\“. HTTP response code is 400
  4. Problem while trying to mount target] \ ". HTTP response code is 400
  5. 放弃okhttp、httpClient,选择了这个牛逼的神仙工具!贼爽
  6. 前端面试每日 3+1 —— 第679天
  7. How to add elements at the beginning of an array in JS?
  8. Give up okhttp and httpclient and choose this awesome immortal tool! Thief Shuang
  9. Front end interview daily 3 + 1 - day 679
  10. 【2021 第一期】日常开发 26 个常见的 JavaScript 代码优化方案
  11. Daily development of 26 common JavaScript code optimization schemes
  12. 前端的字符串时间如何自动转换为后端Java的Date属性,介绍springMVC中如何解决时间转换问题
  13. How to automatically convert the front-end string time to the back-end Java date attribute, and how to solve the time conversion problem in spring MVC are introduced
  14. 前端面试常考题:JS垃圾回收机制
  15. ReactDOM.render串联渲染链路(一)
  16. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  17. 粗涉Webpack
  18. Frequently asked questions in front end interview: JS garbage collection mechanism
  19. ReactDOM.render Serial rendering link (1)
  20. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  21. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  22. About webpack
  23. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  24. 详解vue静态资源打包中的坑与解决方案
  25. 一篇搞懂TCP、HTTP、Socket、Socket连接池
  26. 字节跳动2021前端技术岗发布+最新内部面试题
  27. Detailed explanation of Vue static resource packaging and Solutions
  28. Understanding TCP, HTTP, socket, socket connection pool
  29. 2008-2021 front end technical post release + latest internal interview questions
  30. 4. Vue基本指令
  31. 4. Vue basic instruction
  32. Java 发起 http 请求
  33. Java initiates HTTP request
  34. 网站由http升级为https图文教程
  35. Upgrade the website from HTTP to HTTPS
  36. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  37. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  38. 混合开发入门 Vue结合Android/iOS开发仿京东项目App
  39. Hybrid development entry Vue combined with Android / IOS to develop app imitating Jingdong project
  40. 无缝对接 Tableau,这家月活跃用户 5000+ 的大型银行如何实现自助式分析?
  41. Are airpods still the strongest? Horizontal evaluation of 4 true wireless headphones
  42. Seamless connection with tableau, how can this large bank with 5000 + active users realize self-service analysis?
  43. react-native版文字跑马灯
  44. React native text running lantern
  45. Java、JavaScript、C、C++、PHP、Python都是用来开发什么?
  46. What are Java, JavaScript, C, C + +, PHP and python used to develop?
  47. this.byId(SupplierForm).bindElement in SAP UI5
  48. SAP UI5 JavaScript文件的lazy load - 懒加载
  49. this.byId (SupplierForm).bindElement in SAP UI5
  50. Lazy load lazy load of SAP ui5 JavaScript files
  51. "Gnome 3" - interface elements, desktop components, part names (learning notes) @ 20210223
  52. How to connect the ground gas to the micro front end?
  53. How to transform single / micro service application into serverless application
  54. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  55. Seven array methods for JavaScript you need to master in 2021
  56. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  57. Seven array methods for JavaScript you need to master in 2021
  58. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  59. Seven array methods for JavaScript you need to master in 2021
  60. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库