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

都是自己常问的面试题吧… 基础问完后，测试水平（刁难）用，大家凑活看，因为是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()
  

三、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后的新特性？

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

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

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

十五、祖孙传参的方法？

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