2021前端面试题总结（主React）

太过爱你忘了你带给我的痛 2023-01-02 11:21 125阅读 0赞

都是自己常问的面试题吧… ，大家凑活看，因为是2021总结的所以是2021年前端面试题，不断更新（没有排序，想起什么写什么）

## 一、粘性定位通常在什么场景下使用，使用方法，使用条件？ ##

*  场景：场景自定义，我通常用在header，很好用
 *  使用方法：设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可
 *  使用条件：
    
    1.  父元素不能overflow:hidden或者overflow:auto属性。
    2.  必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
    3.  父元素的高度不能低于sticky元素的高度
    4.  sticky元素仅在其父元素内生效

## 二、css有哪些内置函数？举两个具体用法？ ##

*  calc()
 *  cubic-bezier()
 *  hsl()
 *  hsla()
 *  linear-gradient()
 *  radial-gradient()
 *  repeating-linear-gradient()
 *  repeating-radial-gradient()
 *  rgb()
 *  rgba()
 *  var()  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkODEzMjU_size_16_color_FFFFFF_t_70]

## 三、setState 什么时候同步什么时候异步？ ##

*  setState 只在合成事件（react为了解决跨平台，兼容性问题，自己封装了一套事件机制，代理了原生的事件，像在jsx中常见的onClick、onChange这些都是合成事件）和钩子函数（生命周期）中是“异步”的，在原生事件和 setTimeout 中都是同步的
 *  setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果
 *  setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新

## 四、react渲染机制？ ##

*  当页面一打开，就会调用render构建一棵DOM树
 *  当数据发生变化（ state | props ）时，就会再渲染出一棵DOM树
 *  此时，进行diff运算，两棵DOM树进行差异化对比，找到更新的地方进行批量改动

## 五、diff算法？ ##

*  diff：计算一棵树形结构转换成另一棵树形结构的最少操作
 *  把树形结构按照层级分解，只比较同级元素
 *  给列表结构的每个单元添加唯一的 key 属性，方便比较
 *  React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）
 *  合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制
 *  选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能

## 六、shouldComponentUpdate是做什么的，（react性能优化是哪个周期函数？） ##

*  shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新绘制dom
 *  因为DOM的描绘非常消耗性能，如果我们能在shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能

## 七、虚拟dom ##

*  虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能
 *  Virtual DOM 工作过程有三个简单的步骤
    
    1.  每当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲
    2.  然后计算之前 DOM 表示与新表示的之间的差异
    3.  完成计算后，将只用实际更改的内容更新 real DOM

## 八、calc, support, media各自的含义及用法？ ##

*  @support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
 *  calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “\*”, “/” 运算；
 *  @media 查询，你可以针对不同的媒体类型定义不同的样式。

## 九、如何中断ajax请求？ ##

*  一种是设置超时时间让ajax自动断开，另一种是手动停止ajax请求，其核心是调用XML对象的abort方法，ajax.abort()

## 十、什么是会话cookie,什么是持久cookie? ##

*  cookie是服务器返回的，指定了expire time（有效期）的是持久cookie,没有指定的是会话cookie

## 十一、hooks useMemo 和 useCallback的区别 ##

*  useMemo:  
    用来缓存数据，当组件内部某一个渲染的数据，需要通过计算而来，这个计算是依赖与特定的state、props数据，我们就用useMemo来缓存这个数据，以至于我们在修改她们没有依赖的数据源的情况下，多次调用这个计算函数，浪费计算资源。
 *  useCallback  
    缓存一个函数，这个函数如果是由父组件传递给子组件，或者自定义hooks里面的函数【通常自定义hooks里面的函数，不会依赖于引用它的组件里面的数据】，这时候我们可以考虑缓存这个函数，好处：
    
    1.  不用每次重新声明新的函数，避免释放内存、分配内存的计算资源浪费
    2.  子组件不会因为这个函数的变动重新渲染。【和React.memo搭配使用】

## 十二、hooks的规则？ ##

*  只能在顶层调用 Hook，不要在循环、条件或嵌套函数中调用 Hook。
 *  仅从 React 函数式组件中调用 Hook。不要从常规 JavaScript 函数调用 Hook。（还有另一个有效的地方来调用 Hook，即你的自定义 Hook。）

## 十三、react16.8后的新特性？ ##

*  太多啦，我通常只会问详细的生命周期新特性 [全的看这里吧][Link 1]

## 十四、（实战/坑）antd中，upLoad上传图片组件有批量上传功能，接口是挨个调取，请问如何在不知道用户上传了几张图片的情况下获取全部上传完毕的状态？ ##

*  promise.all
 *  配合上传时onChange的回调中fileList的结果

## 十五、祖孙传参的方法？ ##

*  context
 *  redux
 *  localstorage
 *  （根据前提场景回答)

## 十六、什么是无状态组件，与有状态组件的区别 ##

*  无状态组件主要用来定义模板，接收来自父组件props传递过来的数据，使用\{props.xxx\}的表达式把props塞到模板里面
 *  有状态组件主要用来定义交互逻辑和业务数据，使用\{this.state.xxx\}的表达式把业务数据挂载到容器组件的实例上（有状态组件也可以叫做容器组件，无状态组件也可以叫做展示组件），然后传递props到展示组件，展示组件接收到props，把props塞到模板里面

## 十七、redux本身有什么不足？ ##

*  向事件池中追加方法时，没有做去重处理
 *  把绑定的方从在事件池中移除掉时，用的是arr.splice(index,1)，这样可能会引起数组塌陷
 *  reducer中state，每次返回都需要深克隆，可以在redux中获取状态信息时，深克隆，这样就不用在reducer里深克隆了

## 十八、从 URL 在浏览器被被输入到页面展现的过程中发生了什么？ ##

*  DNS 解析：将域名解析成 IP 地址
 *  TCP 连接：TCP 三次握手
 *  发送 HTTP 请求
 *  服务器处理请求并返回 HTTP 报文
 *  浏览器解析渲染页面
 *  断开连接：TCP 四次挥手

## 十九、JS 中构造函数和普通函数的区别 ##

*  这个建议理解，不要硬背，所以[具体看这个叭][Link 2]

## 二十、如何清除浮动？ ##

clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式 \{clear:both;height:0;overflow:hidden;\}  
给浮动元素父级设置高度 父级同时浮动（需要给父级同级元素添加浮动）  
父级设置成inline-block，其margin: 0 auto居中方式失效  
给父级添加overflow:hidden 清除浮动方法  
万能清除法 after伪类 清浮动

## 二十一、event loop 事件循环机制 ##

*  先执行同步任务
 *  微任务调用栈 resolve reject await
 *  宏任务(macrotask): setTimeout setInterval I/O(异步操作) DOM渲染

## 二十二、链表（计算机基础） ##

*  单向链表: 单向链表包含两个域 一个是信息域 一个是指针域
 *  双向链表: 每个节点有2个指针域 一个是指向前一个节点 另一个则指向后一个节点
 *  循环链表: 循环链表就是首节点和末节点被连接在一起
 *  循环链表中第一个节点之前就是最后一个节点

## 数组和链表的区别 ##

*  链表是链式的存储结构 数组是顺序的存储结构
 *  链表通过指针来连接元素 数组则是把所有元素按次序依次存储
 *  链表的插入删除元素相对数组较为简单 但是寻找某个元素较为困难
 *  数组寻找某个元素较为简单 但插入与删除比较复杂

（简单回答，最好再复习下堆栈，最近发现好多前端答不出这个）

## 二十三、一道关于箭头函数的笔试题 ##

**关于箭头函数，下面说法错误的有哪些？（多选） （ ）**  
A. 箭头函数没有自己的 this，而是会继承上层作用域的 this，就像其他普通的变量一样  
B. 箭头函数还可以通过 .call()、.apply()、.bind() 方法来重新绑定它的 this 值  
C. 箭头函数可以像普通函数一样使用 arguments 对象  
D. 过度追求箭头函数的“单行代码”写法可能会降低代码可读性  
E. 箭头函数虽然表面上看是匿名的，但它可以根据前面的变量名和属性名自动推断出同名的 name 属性  
F. 箭头函数不可以被 new，也不会像普通函数一样自动拥有 prototype 属性

这道题都会选C然后带几个其他选项，正确答案是BC，经常会有人把ADF也选上，D不说了就当没有读通题目，剩余的就直接看ES6官网箭头函数的使用注意点，熟记  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkODEzMjU_size_16_color_FFFFFF_t_70 1]

希望求职的大家仔细读题谨慎选择，这道题选错了真的会非常掉分

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkODEzMjU_size_16_color_FFFFFF_t_70]: /images/20221119/a40bd2cb128d4aa5828b614e69852ef5.png
[Link 1]: https://blog.csdn.net/qq_26976669/article/details/90475186
[Link 2]: https://blog.csdn.net/weixin_41796631/article/details/82939585
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkODEzMjU_size_16_color_FFFFFF_t_70 1]: /images/20221119/17e3f808dd7041a7a11d545acdde291b.png