2021届秋招哈啰出行前端面经（一面）

面试过程

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 总结

因为是秋招，整体面试难度偏低。多是一面的缘由，就连编程和算法题也没有。面试中的大多数问题都是常见的问题，中规中矩。你们查缺补漏便可。以后会给你们带来更多面经。

你们也能够关注个人公众号《脑洞前端》获取更多更新鲜的前端硬核文章，带你认识你不知道的前端。