前端面试题

1、说说你对React的理解？有哪些特性？

react是当前最流行的一个渐进式的框架，也是用于构建JavaScript用户界面的库，只提供了UI层面的解决方案
遵循组件设计模式，声明式编程范式和函数式编程概念
特性：jsx语法，单向数据流，声明式编程，虚拟dom。component

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

分为三个层级：tree层级，component层级，element层级
Tree层级：跨层级不做优化，只对相同层级的节点进行优化
Component层级：如果是同一类的组件，就继续进行diff算法，如果不是一个类的组件，就删除他这个组件下的所有子节点
Element层级：对于比较同一层级的节点们，每个节点在对应的层级用唯一的key作为标识，提供了3种节点操作，分别是插入，移动，删除

3.说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？

创建阶段：constructor，getDerivedStateFromProps，render，componentDidMount
更新阶段：getDerivedStateFromProps，shouldcompontentUpdate，render，getSnapshotBeforeUpdate，componentDidUpdate
卸载阶段：componentWillUnmound

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

虚拟dom实际上只是一层对真实dom的一种抽象，以js对象作为基础树，永对象的属性来描述节点，最后可以通过一系列操作使这棵树映射到真实的环境上，
创建虚拟dom是为了更好的将虚拟dom的节点渲染到页面视图中，所以虚拟dom对象的节点与真实dom的属性一一对应

5.说说你对react hook的理解？

Hook是react16中的新增特性，可以使我们在不编写类组件的情况下使用state以及其他的react特性，每调用一次都会生成一份独立的状态，
通过自定义useHook能够更好的封装我们的功能
在编写hooks为函数式编程，每个功能都包裹在函数中，使整体的风格更加优雅
Hook是函数组件的功能得到了扩充，拥有了类组件的功能，还实现了代码的复用功能

6.React组件之间如何通信？

父传子：子组件标签内传递一个参数，子组件通过props属性来接收父组件传递过来的参数
子传父：父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传递过来的值
兄弟传值：父组件作为中间层来实现数据的互通，

7.说说你对受控组件和非受控组件的理解？应用场景？

受控组件：组件的状态全程响应外部数据
非受控组件：不受状态的影响，一般情况是初始化的时候接收外部数据，然后自己在内部存储自身状态
受控组件可以用于进行操作后页面立刻发生变动的功能中
非受控组件可以用在根据用户的操作来实现某一个区域的变动效果
Connect组件的本质是一个高阶函数，他是真正与store进行数据交互的组件，
首先传入mapState、mapDispatchToProps，然后返回一个生产component的函数，然后再将真正的component作为参数传入wrapWithConnect，这样就生产出一个经过包裹的connect组件
Jsx本质上就是react.createElement的语法糖，不再使用react.createElement的繁琐写法，而是使用更加直观的声明式语法，与html结构相同，降低了react的学习成本，提高了开发效率，接收三个参数：type，config，children

8.说说Connect组件的原理是什么？

Connect本质上就是一个高阶函数，他是真正和store进行数据交互的组件，首先传入mapStateToProps，mapDispatchToProps，然后返回一个生产component的函数，在将真正的component作为参数传入到wrapWithconnect，这样就生产出了一个经过包裹的connect组件

9.说说react 中jsx语法糖的本质？

Jsx本质上就是react。createElement的语法糖，不再使用react.createElement的这种麻烦的写法，而是使用更加直观的声明式语法和html结构相同，降低了react的学习成本，也提高了开发效率，也接收三个参数

10.说说你对redux中间件的理解？常用的中间件有哪些？实现原理？

Redux中间件是应用系统和软件系统中间的一款软件，他是用于dispatch过程中，在分发给action进行拦截处理的
常用的中间件：redux-thunk：用于异步操作；redux-logger：用于日志记录
实现原理：redux中间件被放入到一个数组中，嵌套执行，然后执行store.dispatch方法，这一执行返回getState和dispatch这两个方法，然后根据dispatch进行判断，最后根据判断来决定执行

11.说说AMD、CMD、commonJS模块化规范的区别？

AMD：使用规范requireJS
CMD：运行在浏览器模块化开发，使用sea
CommonJS：只在服务器端运行，不能再浏览器运行

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

分为四个部分：
第一部分主版本号，表示有一个不兼容上个版本的比较大的更改
第二部分次版本号，增加了新的功能
第三部分修订版本号，修复bug
第四部分日期版本号+希腊字母版本号

13.说说React jsx转换成真实DOM的过程？

CreateElement或jsx编写的react组件，实际上就是将所有的代码转换成create Element，babel会帮助我们完成这一个转换
createElement函数对key和ref等特殊的props处理，获取defaultProps对默认props进行赋值，并对传入的孩子节点进行处理，最后构成一个虚拟dom
将虚拟dom渲染到容器上，并对特定的浏览器进行性能优化，最终转换成真实dom

14.说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？

@reduxjs/toolkit是react对redux的进一步的封装，可以使我们更方便快捷的创建一个全局状态管理仓库，更方便的使用store和改变store
React-redux是react一个全局字体管理插件
@reduxjs/toolkit相对于react-redux来说比较方便，不需要额外的配置，
@reduxjs/toolkit也集成了immutable的功能，也不需要安装配置，提高了开发效率
@reduxjs/toolkit也集成了redux-thunk功能
@reduxjs/toolkit将types，actions，reducers放在一起组成了全新的slices中，方便了我们的使用

15.React render方法的原理，在什么时候会触发？

Render在类组件和函数组件中是不一致的
在类组件中render指的是方法，在函数组件中render指的是整个函数组件
类组件通过state修改状态，函数组件通过useState hook修改状态

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

使用Immutable
避免使用内联函数
避免使用额外标记
服务器渲染
事件绑定
懒组件加载

17.如何通过原生js实现一个节流函数和防抖函数？

节流函数：在n秒内只执行一次，若在n秒内重复触发，只有这一次有效
防抖函数：n秒后执行该操作，若在n秒内被重复触发，就重新计时
节流函数：通过定时器、闭包的方式，定义一个变量用于存储上一个事件执行完的时间，在闭包函数中获取执行前的时间，在获取执行后的时间，只要这个时间大于上依次执行完的时间时才会执行节流函数

防抖：也是通过闭包定时器来实现，在闭包中定义一个timer便来用于存储定时器，在闭包返回函数中对timer进行判断，是否存在，存在则表示上一个事件还没有执行完则清除定时器，否则开启定时器执行方法

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

洋葱模型的每一层都相当于是一个中间件，用来处理特定的功能，处理顺序：先执行next()前请求，执行next()函数，后next()响应，每个中间件都有两次处理的时机

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

Html代码文件压缩
Css代码压缩
Js文件压缩
文件大小压缩
文件分离
内联thunk

20.说说你对webSocket的理解？

webSocket是一种网络传输协议，用于OSI模型的应用层，可以在单个ICP连接上进行全双工通信，能更好的节省服务器资源
客户端和服务器只需要一次握手，就可以创建持久性的连接，进行双向数据的传输