深圳某某某跨境电子商务前端开发面试

面试时间： 2020年12月10日下午3点-5点
面试形式： 技术面+项目面+HR面

技术面

1. 自我介绍
   参考模板：
   你好，我是XX，毕业于XX大学。现就职于XX公司，有X年开发经验，公司主要使用技术栈为React+AntDesign+Redux进行开发

2. react-router类型及区别？

区别	HashRouter	BrowserRouter
原理	路径中包含了#，相当于HTML的锚点定位	使用的是HTML5的新特性History，没有HashRouter(锚点定位)那样通用，低版本浏览器可能不支持
用法	组件跳转时不能传递参数(除非手动拼接URL字符串)，因此一般配合Redux使用，实现组件间的数据通信。	组件跳转时可以传递任意参数实现组件间的通信
生产实践		如果后端没有覆盖到路由就会产生404错误，解决：加入中间件，放在服务器端路由匹配的最后，如果前面的API接口都不匹配，则返回index.html页面。

3. react生命周期
   目前公司项目使用的react版本生命周期：
   挂载阶段：
   componentWillMount
   componentDidMount： 组件渲染之后调用，只调用一次；发送ajax请求获取数据在此，原因：在 componentWillMount 里进行网络请求会阻碍组件的渲染；componentWillMount 调用 setState 不会出发重新渲染；componentDidmount 是在组件完全挂载后才会执行，在此方法中调用setState 会触发重新渲染，最重要的是，这是官方推荐的！
   更新阶段：
   componentWillReceiveProps：组件接受新的props时调用
   shouldComponentUpdate： react性能优化重要一环；组件接受新state或者新props调用；再次比较前后两个state和props是否相同，如果相同，则返回false阻止更新
   componentWillUpdate
   componentDidUpdate
   销毁阶段
   componentWillUnmount：事件监听和定时器需要在此清除
   有了解到react升级后的声明周期：
   去掉了 componentWillMount
   去掉了 componentWillReceiveProps 使用getDerivedStateFromProps
   去掉了 componentWillUpdate 使用getSnapShotbeforeUpdate

4. react组件间通讯
   父组件向子组件通信：父组件向子组件传递props，子组件得到props后进行相应的处理
   子组件向父组件通信：利用回调函数：父组件将一个函数作为props传递给子组件，子组件调用该回调函数
   跨级组件之间通信：中间组件层层传递props；使用context对象：上级组件声明自己支持context，并提供一个函数来返回一个context对象；子组件需要声明自己需要使用context
   非嵌套组件间通信：利用二者共同父组件context进行通讯；使用自定义事件方式：典型的发布/订阅模式，通过向事件对象上添加监听器和触发事件来实现组件通讯
   状态管理工具 Redux

5. 组件封装注意事项（抽离组件注意事项）
   可扩展性强：如果不能拓展，失去代码的灵活性
   文档详细清楚：适当的注释
   颗粒度合适，适度抽象：尽量保证一个组件完成的功能是单一的，不是多个功能的结合体
   留一个slot：组件完成80%功能，剩余20%让父组件通过slot完成
   异常处理：可疑区增加try catch；全局监控js异常window.onerror；React的componentDidCatch

6. react-router里的Link标签和a标签有什么区别
   Link标签是react-router里实现路由跳转的链接，一般配合Route使用，react-router接下了其默认的链接跳转行为，区别于传统的页面跳转，Link标签的"跳转"行为只会触发相匹配的Route对应的页面内容更新，而不会刷新整个页面
   Link标签做的三件事情：
   • 1.有onclick那就执行onclick
   • 2.click的时候阻止a标签默认事件
   • 3.根据跳转href(即使是to)，用history(web前端路由两种方式之一，history&hash)跳转，此时只是链接变了，并没有刷新页面
   而标签就是普通的超链接了，用于从当前页面跳转到href指向的里一个页面(非锚点情况)

7. 讲下webpack
   描述了项目中webpack的配置和每项的作用

const path = require('path