前端公司面试题 博主实面 主（react）

1、为啥说react比jquery效率高

react 是一个构建前端 SPA 应用的 javaScript框架，可以结合路由、状态管理模式等直接创建包含一定处理功能的业务流程，快速搭建前端项目，内部采用JSX构建生命式UI,结合虚拟DOM提高页面的渲染性能

JQuery只是一个封装了javaScript的功能函数库，内部主要包含了选择器，DOM,BOM,Ajax等各种功能操作，在页面渲染上DOM操作相比较react虚拟DOM的渲染效率要更加浪费系统资源

2、vue和jquery的区别

1、工作原理不同

vue：Vue做到了数据和视图完全分离开，它首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。对数据进行操作不再需要引用相应的dom对象，他们通过Vue对象实现数据和视图的相互绑定。
jquery：jQuery则是要先使用选择器（$）来选取dom对象，然后对dom对象进行操作（如赋值、取值、事件绑定等）。

2、侧重点不同

vue：vue侧重数据绑定，可以应用于复杂数据操作的后台页面。如：表单填写页面

jquery：jquery侧重样式操作，动画效果等；可以应用于一些html5的动画页面，一些需要js来操作页面样式的页面中。

3、DOM操作不同

vue： Vue框架会自动把DOM元素进行更新。简单来说就是Vue帮我们做了DOM操作，节省了很多代码，它只需要做好对数据的单向绑定，就是我们常说的DOM对象绑定，如果当js对象的值也会跟着dom元素的值改变而改变，叫做双向数据绑定。

jquery：jQuery首先要获取到DOM对象,然后对DOM对象进行值的修改等操作，而Vue不直接对DOM元素进行渲染，它更多的是把值和对象（js）进行绑定，然后再修改js对象的值。

4、未来发展不同

vue：vue是一个刚兴起不久的前端框架，有一套完整的体系，是一个精简的MVVM。从技术角度讲，vue.js专注于MVVM模型的ViewModel层，通过双向数据绑定把view层和Model层连接起来，通过对数据的操作就可以完成对页面视图的渲染。vue以它独特的优势简单、快速、组合、紧凑、强大而迅速崛起。

jquery：jquery是一个类库，提供了很多方法，不能算框架。在过去和现在Jquery是最流行的web前端js库，可是现在无论国内还是国外，他的使用率正在渐渐被其他的js库所替代。随着浏览器厂商对H5规范统一遵循以及ECMA6在浏览器端的实现，jquery的使用率会越来越低。

5、操作思想不同

vue：vue是通过vue对象将数据和view完全分离开的，对数据操作不在引用相应的DOM对象；主要是操作数据。vue基于一种MVVM模式，使用数据驱动的方式，通过Vue对象将数据和View完全分离开来。对数据进行操作，不在需要引用相应的DOM对象，通过vue对象，将数据和相应的DOM对象相互绑定起来。
jquery：jQuery是使用选择器（$）选取DOM对象，并对其进行赋值、取值、事件绑定等操作；jquery是直接操作DOM；使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作；和原生的js区别只在于可以更方便的选取和操作DOM对象，数据和界面是在一起的。

3、怎么理解虚拟dom？

虚拟DOM描述的是加载到内存中的节点数对象

一般前端框架类似Vue、React、Angular这些都会读取页面视图，然后将页面视图中的DOM结构加载到内存中形成抽象节点书，然后根据树结构进行数据的查询和更新操作，用于提高前端视图的渲染效率

3.1、虚拟dom的优缺点？

优点：
保证性能下限: 虚拟DOM可以经过diff找出最小差异,然后批量进行patch,这种操作虽然比不上手动优化,但是比起粗暴的DOM操作性能要好很多,因此虚拟DOM可以保证性能下限
无需手动操作DOM: 虚拟DOM的diff和patch都是在一次更新中自动进行的,我们无需手动操作DOM,极大提高开发效率
跨平台: 虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作,例如服务器渲染、移动端开发等等

缺点：
无法进行极致优化: 在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化，比如VScode采用直接手动操作DOM的方式进行极端的性能优化

4、描述一下组件设计原则

组件设计原则(常规8大原则)
简单① 单一② 不重复③、 封闭④ 复用⑤ 要协同、稳定依赖⑥ 好莱坞⑦、 关注点上要唯一⑧

① 保持简单

码足够简单，也意味着易读、易维护，bug 比较难以隐藏。往
往简单的设计越高效和通用

• 不要过度优化
• 不重复造轮子
• 不要过度设计

② 单一职责
一个组件负责完成一个职责/功能。
单一职责可以保证组件的粒度，有利于复用和维护。如果职责过多，代码就会臃肿，可读性降低，从而变得难以维护

③ 不要重复
不要写重复的逻辑，尽量做好代码的复用性

④ 共同封闭原则
将那些会同时修改，或者因为同一个目的发生修改的代码，放到一个组件里

⑤ 共同复用原则
一个组件中的类应该一起被复用，相反，如果没有一起被复用，那就不应该放在一个组件

⑥ 稳定依赖原则
不稳定的组件应该依赖于更加稳定的组件
组件不稳定性指标 = (对别的组件依赖个数) / (对别的组件依
赖个数 + 别的组件对自己依赖个数)

⑦ 好莱坞原则
don’t call us, we’ll call you.
所有的组件都是被动的，所有的组件初始化和调用都由容器负
责。组件处在一个容器当中，由容器负责管理

⑧ 关注点分离
如果一个问题能分解为独立且较小的问题，就是相对较易解决的问题太过于复杂，要解决问题需要关注的点太多，人的精力是有限的，不能同时关注到问题的各个方面。通常实现关注点分离的方式有两种：一种是标准化，另一种就是抽象与包装

5、常用的数据结构有哪些？

常用的数据结构包含数组、链表、队列，栈、堆、散列表、哈希表、树、图表结构

6、props和state的区别，分别什么时候使用

React中props表示当前组件的自定义属性，state表示当前组件的状态数据

• props是父组件传递给子组件使用的数据，子组件内部可以直接访问但是不建议修改
• state是当前组件自己声明的状态数据，可以直接进行操作

7、讲一下redux的工作流程

redux是一个状态管理模式，可以在 javaScript应用管理和操作数据

• 可以通过ActionType进行数据操作方式的描述
• 将数据和对应的操作封装成ActionCreator对象，通过dipatch()发送请求
• Reducer操作函数接收到请求，对数据进行处理，并统一维护到state中
• 触发订阅方法subscibe(() => {}) 通知数据更新

8、dva和redux相比有什么优点

redux是一套数据状态管理模式，可以用于任何 JavaScript应用中，我在项目中主要结合react进行使用

dva是基于现有应用框架（redux + react - router + redux- sage + fetch）的一层轻量封装，没有引入任何新概念。dva是基于react+ redux最佳实践上实现的封装方案，简化了redux和redux-saga使用上的诸多繁琐操作

9、hooks的作用是什么

hooks是react16.2版本之后提供的， 主要结合函数组件进行项目构建的各种钩子模块

10、useEffect对应的生命周期有哪些？

useEffect()对应的类组件的生命周期，主要包含三个运行阶段
componentDidMount()
componentDidUpdate()
componentWillUnmount()

11、useEffect对应的依赖如果是复杂对象如何处理

1、可以直接将对象通过JSON.Stringify()、JSON.parse()进行深拷贝处理
2、可以自定义一个HOOK钩子，进行对象属性的监听处理
3、可以封装useEffect实现一个深比较的处理函数
4、直接使用内建useDeepCompareEffect钩子函数

12、react 常用的性能优化方法有哪些

1、使用纯组件
2、使用React.memo进行组件记忆
3、使用shouldComponentUnpdate生命周期函数
4、懒加载组件
5、使用react Fragments避免额外标记
6、不要使用内联函数定义
7、在Constructor的早期绑定函数
8、箭头函数与构造函数中的绑定
9、避免使用内联样式属性
10、优化React中的条件渲染
11、不要在render方法中导出
12、为组件的创建错误边界
13、组件的不可变数据结构
14、使用唯一键迭代
15、事件节流和防抖
16、使用CDN
17、用css动画代替javaScript动画
18、在Web服务器上启用gzip压缩
19、使用Web Workers处理 CPU 密集任务
20、React组件的服务器渲染

13、说一下你对 biff 算法的理解

diff算法是前端很多框架在底层更新虚拟DOM结构的时候用到的算法

通过对虚拟DOM的抽象树结构进行逐层遍历并获取节点的哈希值组成的哈希表，记录已有节点结构

如果出现结构更新，就会根据抽象树逐层比较哈希值，得到哈希值有差异的子树结构

继续综合前序遍历，后续遍历记录新树和旧树之间的节点差异，进行差异节点的数据更新，形成最终的渲染树

14、简单介绍webpack的工作原理

一个基于javaScript应用程序的静态模块打包器（module bundler），当webpack处理应用程序需要的每个模块，根据这些模块打包为一个或者多个bundle

以上为博主线下面试的真实面试题