前端面试题整理.2

1.说说React生命周期中有哪些坑？如何避免？

ComponentWillReceiveProps方法被改为getDeriveStateFromProps方法，在旧版本中ComponentWillReceiveProps方法可用，很多人其实并不明白这个方法到底数如何触发的，触发条件是父组件修改传递给子组件的属性的时候这个修改会带动子组件修改触发ComponentWillReceiveProps生命周期方法

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

用js对象来表示真实的dom数结构。当页面中的数据发生改变的时候，在创建一个新的虚拟dom节点，比较新旧虚拟dom的差异，找出差异，把他更新到真实的dom树结构上

3.调和阶段setState干了什么？

一个组件的显示状态是由数据状态和外部参数决定，数据状态就是state，当需要修改值时必须通过setstate来改变，从而达到更新组件内部数据的作用

4.说说redux的实现原理是什么，写出核心代码？

在react组件需要获取或者更新页面数据时，通过dispatch调用actions到reducer函数中，对state进行数据内容的修改，state更新数据后，组件更新页面

5.React合成事件的原理？

合成事件是模拟原生dom事件左右能力的一个对象，浏览器的原生事件：浏览器包装器，兼容所有的浏览器，拥有与浏览器原生事件相同的接口

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

常用的组件通讯方式有父传子、子传父、兄弟组件传值

父传子就是在父组件中的子组件标签上绑定一个自定义数据，子组件通过props进行接收传递过来的数据

子传父就是在父组件的子组件标签绑定一个方法，将方法传递给子组件，子组件拿到这个方法就父组件接收这个方法

兄弟组件传值就是通过他们的上一层组件作为父组件，将数据共享给父组件，最后再实现兄弟之间专递

7.为什么react元素有一个$$type属性？

因为json不支持symbol类型，所以即使服务器存在用json作为文本返回，react会检测element$typeof，如果元素丢失或者无效，会拒绝处理该元素

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

Connect有四个参数，一般只用到前两种

第一个参数是将store中的数据作为props绑定到组件上，主要原理就是将需要绑定的props作为一个函数传过来，在connect传给一个真实的数据

第二个参数是用于更改数据必须要触发action，在这里的主要功能是将action作为props绑定到组件上

9.说说你对fiber架构的理解？解决了什么问题？

Fiber框架的应用目的，按照react官方的说法，是事件增量渲染，增量渲染就是把一个渲染任务分解成多个渲染任务，然后将其分散到多个帧里面，fiber的核心就是可中断、可恢复优先级

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

Redux中间件就是放在dispatch的过程，在分发axtion进行拦截处理，redux的整个工作流程是当action发出后，reducer一级算出state，整个过程是一个同步操作，如果需要异步操作或者错误日志，这个过程就需要加上中间件，

常用的中间件：redux-thuck用于异步操作、redux-logger用于日志记录

实现原理：中间件都需要你通过applyMiddleware进行注册，作用就是将所有的中间件组成一个数组，一次执行然后作为第二个参数传入到createStore

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

避免使用内联函数、事件的绑定方法、懒加载组件、服务器渲染

减少不必要的组件更新，

Hooks组件中的useMemo实现缓存

12.说说你对事件循环event loop的理解？

Js设计之初就是便携式单线程，在程序运行调的时候只有一个线程，同一时间只能做一件事，为了解决这个运行阻塞的问题，javaScript用刀计算机系统的一种巡行机制，就是事件循环event loop

13.前端跨域的解决方案？

浏览器将cors请求分成两类，简单请求和预检请求，解决方法就是在服务器响应头加入字段Access-control，

给前端设置服务器代理

14.数组常用方法及作用，至少15个？

Push添加、pop删除末尾、splice添加或者删除元素、foreach遍历数组、filter从数组中找出符合条件的元素、sort排序、reverse颠倒数组中元素顺序、unshit头部添加、shift头部删除

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

Render方法里面可以将jsx转换成creeateelement这种格式运行，用于生成虚拟dom，最终转换成真实dom，在类组件中只要执行了setstate方法就一定会触发render，函数组件使用usestate更新状态的时候不一定会触发render，就算改变了usestate也不一定会触发render方法

16.说说你对vue中mixin的理解？

提供了一种非常灵活的方式，来分发vue中的可服用组件，它包含了我么组件中的人以功能原乡data、components，methods、created等等，我们只需要将公用的功能以对象的形式传入给mixin选项中

17.for...in循环和for...of循环的区别？

使用in遍历对象时，每一次遍历得到的都是对象中的key值，而使用of时会报错，

数组：in获取到的是每一项的索引，of获取到的是每一项的值

18.Js数据类型判断都有哪几种方式？至少说出5种？它们的区别是什么？

jQuery.type()如果对象时undefined或者null，返回相应的undefined或者null

Constructor方法是prototype对象中的属性，指向构造函数

Instanceof方法一般是用来检测引用数据类型

Typeof方法可以判断数据类型，返回表示数据类型的字符串

Object.prorotype.toString.call方法是用来检测对象类型

19.说说你对Object.defineProperty()的理解？

Object.defineProperty()接收三个参数，obj要定义属性的对象，prop要定义或者修改的属性名称或者symbol，descrptionor要定义或者修改的属性描述符

20.说说你对webSocket的理解？

webSocket是一个基于双线程tcp双工通讯协议，在应用层，传统上http协议他是无状态的，服务器不能识别是哪个客户端发给他的请求，不能保存状态，为了弥补这个问题，在客户端向服务器发送请求之后服务端处理请求并返回到客户端，然后使用webSocket可以使服务器主动向浏览器推送消息