2020春招总结，已收到阿里意向书

最新推荐文章于 2024-04-15 11:59:59 发布

原创

最新推荐文章于 2024-04-15 11:59:59 发布 · 2.3k 阅读

本文分享了作者2020年春招的面试经历，包括阿里巴巴、字节跳动和美团的面试流程及部分技术问题。阿里巴巴获得意向书，字节跳动和美团完成了全部面试，最终收到字节跳动的offer。面试涉及React生命周期、事件循环、Cookie SameSite属性、前端工程化等技术点。

2020春招总结，已收到阿里意向书

本人19年年末来到百度实习（已离职），作为第一份工作，带给我的收获蛮大的。几个月的实习生活让我了解到了公司的开发流程、代码规范、团队沟通的能力等等，在这里先感谢老东家。下面是春招总结：

面试情况

阿里巴巴(淘系技术部) - 意向书
字节跳动(懂车帝) - offer
美团(到店餐饮) - HR面结束
网易雷火 - 未开始流程
快手 - 未开始流程

面试记录

阿里巴巴

阿里巴巴是通过师兄内推投递的，在系统开之前提前面了一轮，一共四轮技术面（含一轮交叉面）+ 一轮HR面。总的流程还算是比较快，一个月左右走完流程。内推的好处就是如果流程卡住，内推人可以帮忙催一催面试官尽早安排面试。

一面、二面（50min）

因为最开始没有做面试记录，凭靠记忆想到了下面几个题

promise的原理，catch之后能调用then方法吗？
- 略，可以。

let promise = new Promise((resolve, reject) => {
   
   
    reject(1);
});

// catch与then方法相同，都会返回一个promise对象，存在显式返回和隐式返回两种情况
// 1.隐式返回：返回一个resolve值为undefined的promise
promise.catch(err => {
   
   
    console.log(err); // 1
}).then(resolve => {
   
   
    console.log(resolve); // undefined 
});

// 2.显式返回一个promise
promise.catch(err => {
   
   
    return new Promise(resolve => {
   
   
        console.log(err); // 1
        resolve(2);
    })
}).then(resolve => {
   
   
    console.log(resolve); // 2
});

cookie有哪些属性？知道SameSite吗？
- Domain、Path、Max-Age、Secure、HttpOnly
- SameSite：把三个值Strict、Lax、None的作用讲一下，chrome80版本把默认值None改为Lax造成什么影响。推荐阮一峰老师的文章：Cookie 的 SameSite 属性
浏览器事件循环和Node事件循环的区别
- node11以下版本与浏览器事件循环的区别
讲一下React新生命周期（16.3之后版本）
- 旧版生命周期
- 新版生命周期
- 废弃了componentWillMount、componentWillReceiveProps、componentWillUpdate。React17将推出新的异步渲染方式，dom挂载之前将可以被打断，因此上述三个生命周期不能保证在需要执行的时候只执行一次
- 新增getDerivedStateFromProps、getSnapshotBeforeUpdat
优化首屏加载，讲一下代码分割
- 使用suspense配合lazy封装动态引入模块组件

const myComponent = lazy(
    () => import(
        /* webpackChunkName: "index" */
        './index'
    );
);
 
const myAsyncComponent = props => (
  <Suspense fallback={
   
   <Loading />}>
    <myComponent {
   
   ...props} />
  </Suspense>
);

讲一下React错误边界
- 错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。 ——react16开发文档

class ErrorBoundary extends React.Component {
   
   
    constructor(props) {
   
   
        super(props);
        this.state = {
   
    hasError: false };
    }

    static getDerivedStateFromError() {
   
   
        return {
   
    hasError: true };
    }

    render() {
   
   
        // 如果捕捉到子组件错误，渲染回退页ErrorComponent
        if (this.state.hasError) {
   
   
            return <ErrorComponent />;
        }
        
        // 如果未捕捉到子组件错误，渲染子组件
        return this.props.children;
    }
}

// 用法
<ErrorBoundary>
  <Child1 />
  <Child2 />
  ...
</ErrorBoundary>

项目中有一个场景如何实现的（点击地图上一个县，找到所在的省、市）

// 数据结构如下，点击一个地址获取到该地址的id，通过广度遍历去找到它所在的路径
const data = [{
   
   
    id: '1',
    name: '四川省',
    children: [
        {
   
   
            id: '2',
            name: '阿坝藏族自治州',
            children: [
                {
   
   
                    id: '3',
                    name: '汶川县'
                }
            ]

        }
    ]
}];

// 当时考虑到提高点击一级、二级地点（省、市）的遍历速度。实际在这里两种遍历差别不大。
function bfs(target, id)