react常见面试题

react常见面试题

什么是强缓存和协商缓存？

强缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码;
协商缓存：向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，
如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；

SPA（单页应用）首屏加载速度慢怎么解决？

(1)将图片进行压缩
(2)本地缓存静态资源
(3)减小入口文件的体积
(4)避免文件的重复打包
(5)按需加载，不要全局加载
(6)压缩文件

说说你对栈、队列的理解？应用场景？

栈和队列都属于一位链表，
栈是后进先出，进和出都是在同一端进行，就好像一筒羽毛球，只有把上面拿出来，下面的才能拿出来；
队列是先进先出的，进和出分别在不同的端进行，比如排队的人，排在前面的人先到柜台办理业务，后面来的人后得到服务。
栈：是一种运算受限的线性表，限定仅在表尾进行插入和删除操作的线性表
队列：跟栈十分相似，队列是一种特殊的线性表，特殊之处在于它只允许在表的前端进行删除操作，而在表的后端进行插入操作
栈应用场景：实现一个逆序数处，编译器的在对输入的语法进行分析的时候，函数调用和递归的时候
队列应用场景：需要按照一定的顺序来处理数据，而该数据的数据量在不断地变化的时候

虚拟dom和真实dom的优缺点

真实 DOM 的优势：易用缺点： 效率低，解析速度慢，内存占用量过高 性能差：频繁操作真实 DOM，易于导致重绘与回流使用虚拟 DOM 的优势如下：简单方便：如果使用手动操作真实 DOM 来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行缺点：在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，速度比正常稍慢

useMemo, useCallback做了那些性能优化？

useMemo 主要缓存复杂运算的数据的结果，第二个参数，定义监听的变量，需要返回一个结果。
当父组件的组件更新的时候会导致子组件的重新渲染，但是如果父组件的更新的数据没有传递给子组件的话，
这个时候如果还让子组件重新渲染的化，就会导致组件的更新的性能消耗比较大。

所以说这个时候我们可以使用useMemo, 或者React中内置的memo方法对子组件进行缓存，
这样的话只有父组件更新跟子组件相关联的数据的时候才会导致子组件的重新渲染，从而提高组件的渲染性能。

但是如果我们给子组件传递方法的时候，上面memo方法的缓存就不起作用了，原因是父组件每更新一次会导致方法的重新调用，
进而导致子组件的重新更新，所以这个时候我们可以使用useCallback对传递的方法进行缓存，
监听数据更新后才会重新调用方法，从而提高组件的渲染性能。

说说Real diff算法是怎么运作的？

Diff算法就是为了避免无效的dom操作，是我们页面的构建得到极大的提升，diff算法通过对比新旧虚拟dom来找出真正dom变化的地方主要遵循三个层级
(1)Dom树层，只针对同层的节点进行比较，拥有删除创建
(2)组件曾，如果是一个组件，就会继续diff算法，但是如果不 是，会将这个组件下的所有子节点进行删除，然后创建一个新的，哪怕结构有极大的类似，也会进行删除重建
(3)节点层：对于同级的节点，根据key进行增删改移动

说说你对React中虚拟dom的理解？

(1) 什么是虚拟dom：用js对象的形式，来模拟页面dom的嵌套关系；
(2) 虚拟DOM是一棵虚拟的JavaScript对象树，画重点，”虚拟的“、”JS对象“，指的是它把真实的网页文档节点，虚拟成一个个的js对象，并以树型结构，保存在内存中。
实现原理：通过JS模拟网页文档节点，生成JS对象树(虚拟DOM)，然后再进一步生成真实的DOM树，再绘制到屏幕。如果后面有内容发生改变，React会重新生成一棵全新的虚拟DOM树，再与前面的虚拟DOM树进行比对diff，把差异的部分打包成patch，再应用到真实DOM，然后渲染到屏幕浏览器。

说说package.json中版本号的规则？

(1)第一部分为主版本号，变化了表示有了一个不兼容上个版本的大更改
(2)第二部分为次版本号，变化了表示增加了新功能，并且可以向后兼容
(3)第三部分为修订版本号，变化了表示 有bug修复，并且可以向后兼容
(4)第四部分为日期版本号加希腊字母版本号，希腊字母版本号共有五种，分别为base、alpha、 bela 、RCrelease

React性能优化的手段有哪些？

(1)使用纯组件
(2)使用react的Memo方法对组件进行缓存
(3)使用Immutable
(4)将列表的渲染加key值
(5)将函数的绑定移动到构造函数中，避免不必要的渲染
(6)将传递的props设置为数组或者是对象

说说你对koa中洋葱模型的理解？

Koa是一个精简的node框架，被认为是第二代Node框架，其最大的特点就是独特的中间件流程控制，是一个典型的洋葱模型，它的核心工作包括下面两个方面：
1.将node原生的req和res封装成为一个context对象。
2.基于async/await的中间件洋葱模型机制。
Koa的洋葱模型是以next()函数为分割点，先由外到内执行Request的逻辑，然后再由内到外执行Response的逻辑，这里的request的逻辑，
我们可以理解为是next之前的内容，response的逻辑是next函数之后的内容，也可以说每一个中间件都有两次处理时机。洋葱模型的核心原理主要是借助compose方法。

说说如何借助webpack来优化前端性能？

JS代码压缩
利用CDN加速
CSS代码压缩
Html文件代码压缩
文件大小压缩
图片压缩
Tree Shaking
代码分离
内联 chunk

1、压缩代码：删除多余代码，注释，简化代码的写法等等方式。可以利用webpack的uglifyJsPlugin和ParallelUglifyPlugin来压缩js文件，利用cssnano来压缩css资源。
2、利用CDN加速：在构建过程中，将引用的静态资源修改为CDN上对应的路径。我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。
3、Tree shaking:将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 --optimize-minimize 来实现。
4、Code Splitting将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存。例如vue中的异步组件就是按需加载。
.5、提取公共第三⽅库: 提取公共第三⽅库:来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码。