The front end experience of the 2021 autumn recruitment

lucifer 2021-02-23 15:00:41
end experience autumn recruitment

The interview process

  1. Let's introduce ourselves .
  • Hello, interviewer ...
  1. Seeing your project experience , Briefly introduce your project .
  • ...
  1. Your project uses React, Which version is used ?
  • With React 16.5( remember wrongly , Should be 16.8)
  1. React 16.5 There has been a Hooks Did you? ?
  • No, ( There was an awkward moment ,React 16.8.0 Is the first to support Hook Version of ).
  1. Hooks and class What are the advantages ?
  • Sometimes class The same logic appears in life cycle functions that are not used in , Use Hooks Make the code easier to maintain .
lucifer notes : hooks On the one hand, it gives more functions to functional components , So that it can be completely replaced in function class Components . On the other hand hooks Created a new way to organize code , And the old mixin as well as render props The starting point is similar , But it focuses on the same function of the code put together , So that code logic reuse has one more choice . Of course, there are advantages and disadvantages , Due to space limitation , Not here .
  1. You used Hooks Which methods of ? Which functions ?
  • Used to useEffect.
lucifer notes : I suggest you talk more about it , such as useState, useCallback etc. .
  1. useEffect What are the characteristics of ?
  • Use useEffect You can simulate some life cycle functions , such as componentDidMount,componentDidUpdate,componentWillUnmount.
  1. react What are the life cycles of ?
  • There are componentDidMount, When it's updated, there are componentDidUpdate,shouldcomponentUpdate, There are componentWillUnmount etc. .
  1. componentWillReceiveProps() Do you know ?
  • I don't know . Later, I checked the documents and said componentWillReceiveProps() Less commonly used .
  1. When Redux When data in changes , Which life cycles will change ? Or explain Redux Operation mechanism of ?
  • A random answer …… Bad answer . It's about redux Mainly for complex data streams .
lucifer notes : Recommended for reading In depth understanding of redux
  1. What does a complex data stream mean ?
  • Dig a hole for yourself , I don't quite understand , The reason is that I don't understand Redux Application scenarios of , That is, why to use Redux. This article It's very good , It means that when our states are distributed across multiple components , When tracking the state of these components becomes cumbersome , You can use Redux To unify management .
  1. webpack What kind of configuration have you done ?
  • I usually set up loader and plugin, Used plug-ins commonChunks etc. .
  1. plugin and loader What's the difference? ?
  • loader Equivalent to a modular converter , For example, will less File to css file ,plugin Support some extended plug-ins , such as HTMLWebpackplugin,commonChunks etc. .
  1. loader How to integrate less File to css file ?
  • I don't know whether to ask about the specific configuration or the principle , As a result, the interviewer changed the topic .
lucifer notes : In fact, that is ast Analysis and transformation of , Specific content you can search under the relevant articles .
  1. loader What is the execution order of ?
  • From right to left 、 From bottom to top .
lucifer notes : I don't see what it means to go from bottom to top . however loader The order of execution is borrowed from compose, In functional programming compose The order of combination is from right to left , And similar pipe From left to right , It's very common linux The Conduit (pipe) From left to right .
  1. I want to configure a single page app , How to configure entry part ?
entry: {
// What's written here
  1. ES6 Understand? ?let, const, Map, Set, Arrow functions and so on .
  2. The following code b What does it mean ?
let a = [1, 2, 4]
let b = => { v= v*2 })

I answered first b = [1, 4, 8]( It's brain pumping , Math in primary school is wrong ), The interviewer asked why not [2, 4, 8], I'm wrong

And then he said it's not right , Because there's a brace to the right of the arrow .

In fact, in the code above b yes [undefined, undefined, undefined], The interviewer guides how to deal with it b by [2, 4, 8].

The answer is if the right side of the arrow is in parentheses , You need to put a... In braces return Just go back . The following code :

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

At ordinary times to write map I've never used braces , It was only during the interview that I realized , I blew it up !

  1. Understand the event cycle ?
lucifer notes : I recommend reading what I wrote before 《 Read the browser event loop 》
  1. What's the problem? ?

The specific work place depends on your own arrangement . Hangzhou and Shanghai . Hangzhou is mainly responsible for the construction of algorithm platform and map related . The technology stack is React.


The interviewer is very kind , Because the traffic jam came late , I'm sorry , I feel like I haven't been interviewed for a long time , We need a batch of dishes ,map If it's braces, you should add return I don't know , For a long time . In general, it's still based on the resume , So a good project is crucial , The project is not about how grand , It's about what you've really done on your own , Harvest is the most important thing .

lucifer summary

Because it's autumn , The overall interview difficulty is low . Maybe it's one side , Not even programming and algorithms . Most of the questions in the interview are common , The compasses . We can check and fill the gaps . After that, it will bring you more experience .

You can also pay attention to my official account. 《 Anterior part of brain hole 》 Get more fresh front-end hardcore articles , Take you to the front end you don't know .


  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架构的网络封装类库