关于react的面试题(持续更新中...)

ComponentWillReceiveProps：该方法在后续的版本一级标记启用，被getDerivedStateFromProps方法体改，在早起的版本这个方法还是有用的，有用的原因是很多人其实并没很明这个方法到底由什么触发：当父组件修改传递给子组件的属性时，这个修改会带动子组件的对于属性的修改，触发componentWillREceiveProps生命周期函数

ShouldcomponentUpdate：在更新过程中，会触发render方法来生成新的虚拟dom，进行diff找出需要修改的dom，这个过程是很耗费时间的，在实际操作中，我们会无意触发render方法，为了避免不必要的render调用带来性能消耗，所以react让我们可以在shouldcomponent方法决定是否要执行余下的生命周期，默认它是返回true我们也可以手动设置false不进行余下的生命周期

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

Diff算法的目的就是为了找到哪些节点发生里变化，哪些没有发生变化，可以复用，具体实现就是进行虚拟dom对比，返回一个patch对象用来存储两个节点不同的地方，最后用patch记录的消息去据不更新dom，diff算法比较只会在同层级进行，不会跨层去比较

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

一个组件的显示状态可以与数据状态和外部参数决定，而数据状态就是state，当需要修改里面的值的状态的时候，就必须通过setState来改变，从而达到更新组件内部数据的作用，setState的第一个参数是一个对象，或者是一个函数，而第二个参数是一个回调函数，可以实时的获取更新之后的最新数据

在使用setState更新数据的时候，setState的更新类型分为两类，分别是同步更新和异步更新，在组件生命周期或者react合成事件中setState是异步的，在setTimeout或者原生dom事件中，setState是同步的，在对同一个值多次setState，setState的批量更新策略，会对其进行覆盖，取最后一次执行结果

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

Redux要求我们把数据都放在store公共存储空间，一个组件改变了store里面的数据内容，其他组件都能感知store的变化，再来去数据，从而间接的实现了这些数据传递的功能，通常要改变store数据时，需要通过dispatch方法调用actions进入到reducer函数中去修改store的数据内容

5.React合成事件的原理？

React合成时间是react模拟原生dom时间所有能力的一个事件对象，即浏览器原生事件的浏览器包装器，他根据w3c规范来定义合成时间，兼容所有的浏览器，拥有与浏览器原生事件相同的接口

将事件绑定在document -v16/容器元素 v-17统一管理，防止很多事件直接绑定在原生的dom元素上，造成一些不可控的情况

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

组件通讯的目的就是通过某种媒体某种手段从而去达到某种目的，常见的组件通信方式有父传子、子传父、和兄弟之间传递

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

子传父的话就是咋子父组件的子组件绑定一个属性，传递方法给子组件，子组件通过props进行接收，直接调用这个方法，传递响应的参数即可

兄弟组件的传递就是一般通过父组件作为中间层，是用父组件来进行传递的

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

因为json不支持symbol类型，所以即使服务器存在用json作为文本返回安全漏洞，json里也不包含symbol.for(‘react.element’)react会检测element$$typeof如果元素丢失或者无效，会拒绝处理该元素。

这种情况下，React 0.13很容易受到XSS攻击。再次澄清一下，这种攻击取决于现有的服务器漏洞。尽管如此，React可以做到更好，防止遭受它攻击。从React 0.14开始，它做到了。 React 0.14中的修复是使用Symbol标记每个React元素：

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

Connect有四个参数，但是后面两个用到的时候很少，connect第一个参数是mapStateToProps这个函数云讯我们将store中的数据作为props绑定到组件上，主要原理就是将需要绑定的props作为一个函数传过赖，在connect穿给mapStateToProps一个真实的数据

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

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

Fiber架构的应用目的，按照react官方的说法，是实现增量渲染，所谓的增量渲染，通俗的来说就是把一个渲染任务分解为多个渲染任务，而后将其分散到多个帧里面，fiber架构核心：可中断、可恢复与优先级

解决了：JavaScript引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行的时候，另一个线程只能挂起等待，如果JavaScript线程长时间占用主线程那么渲染岑那个面的更新不得不长时间的等待，界面长时间不更新就会导致页面响应变差，用户会感觉到卡顿，而fiber是在react渲染组件的时候，从开始到渲染完成整个过程是一气呵成无法终端的

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

Redux中，中间件就是放在dispatch过程，在分发action进行拦截处理，redux的整个工作流程就是，当action发出自后reducer立即算出state，整个过程是一个同步的操作，那么如果需要支持异步操作，或者支持错误处理、日志监控、这个过程就可以用上中间件，其本质上就是一个函数对store.dispatch方法进行了改造，在发出action和执行reducer这两步之间，添加了其他的功能

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

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

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

Hooks组件中的useMemo和useCallBack实现缓存

避免使用内联函数；事件的绑定方式；懒加载组件；服务端渲染

减少不必要的组件更新，这类优化是在组件状态发生变更后，通过减少不必要的组件更新来实现，对应到react中就是减少渲染节点，降低组件渲染的复杂度，充分利用缓存避免重新渲染

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

Js设计支出就是便是单线程，即直在程序运行时，只有一个线程在，同一时间只能做一件事，为了解决单线程运行阻塞的问题，JavaScript用到计算机系统的一种运行机制，这种运行机制就做时间循环（event loop）

在JavaScript中，所有的任务都可以分为同步任务和异步任务

同步任务，立即执行的任务，同步任务一般会直接进入到主线程中执行

异步任务，立即执行的任务，比如ajax网络请求，setTimeout定时函数等

同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行这个过程的不断重复就是事件循环

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

跨域资源共享（cors）浏览器将cors请求分成两类，简单请求和预检请求，解决方法就是服务器在响应头找那个加入字段 Access-control-Allow-Origin.origin那么该Origin就可以访问了，如果该字段值为*那么所有的Origin就都可以访问

Jsonp：通常是为了减轻web服务器的负载，我们把js、css、img等静态资源分离到另一台独立域名的服务器上，在HTML页面中再通过响应的标签从不同的域名下加载静态资源，而诶浏览器允许，基于此原理，我们可以通过动态创建script，在请求一个带参网址实现跨域通信，jsonp只能发起get请求为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务器端输出JSON数据并执行回调Callback函数，从而解决跨域数据请求、web页面上调用js文件时则不受是否跨域的影响不仅如此，凡是拥有src属性的标签都拥有跨域的能力

Vue中设置代理服务器：跨域问题只存在浏览器，如果是服务器和服务器之间的通信是不存在跨域问题的，可以在vue-cli中设置代理服务器实现跨域请求

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

push（）&&unshift（）尾部头部添加
Pop()&&shift() 尾部头部删除
Reverse()颠倒数组中元素的顺序
Splice()添加或删除数组中的元素
Sort() 对数组的元素进行排序
ForEach() 遍历数组
Map() 将数组映射成另外一个数组
Filter() 从数组中找出所有符合指定条件的元素
Reduce() 将数组合成一个值
Concat() 连接两个或者多个字符串
Slice() 数组复制
Find() 返回通过测试（函数内判断）的数组的第一个元素的值
Jion () && toString() 把数组中所有的元素转换成一个字符串
toLocaleString 把数组转换成本地字符串
IndexOf() 查找指定的字符串值在字符串中首次出现索引的位置

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

Render函数里面可以编写JSX传话成createElement这种实行，用于生成虚拟dom，最终转化成真实dom，在react中类组件只要执行了setState方法就一定会触发render函数执行，函数组件使用useState更改状态不一定导致重新的render组件的props，改变了也不一定触发render函数的执行，但是如果props的值来自于父组件的state，在这种情况下，父组件state发生了改变，会导致子组件的重新渲染，所以一旦指令setState就会执行render，useState会判断当前值有没有发生改变，确定是否去执行render方法，一旦组件发生渲染，子组件也就会发生渲染

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

Vue中的mixin混入，提供了一种非常灵活的方式，来分发vue组件中的可复用功能本质上就是一个js对象，它可以包含我们组件中任意功能选项data、components、methods、等created等，我们只要将共用的功能以对象的方式传入mixins选项中，当组件本身的选项中来，分为局部混入和全局混入

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

使用for..in遍历对象的时候，每一次遍历得到的都是对象中的key值，而使用for..of遍历的时候则会报错，因为获取到的不是每一个遍历项的value值

遍历数组时：for..in获取到的是每一项的索引值，而for..of获取到的是每一项的值

遍历对象时：for..in获取到的是每一项的key值（属性名），而for..of不能用于遍历对象，会报错

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

Typeof、instanceof、constructor、Object.prototype.toString.call()、jQuery.type()

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

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

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

Object.prototype.toString.call()用来检测对象类型

jQuery.type()无敌万能的方法，如果对象是undefined或null，则返回响应的undefined或者null

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

Object.defineProperty()方法会直接在一个对象上定义一个新的属性，或者修改一个对象的现有属性，并返回此对象，Object.defineProperty()接收三个参数分别时obj：要定义属性的对象；prop：要定义或修改的属性的名称或者symbol；descriptionor：要定义或修改的属性描述符

20.说说你对webSocket的理解？

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

他的原理是与服务器进行三次握手，建立TCP连接向服务器发送HTTP请求，请求中包含WebSocket的版本信息：包括upgrade、connection等等。服务器处理请求并返回客户端，此时可以进行WebSocket请求了服务端也可以主动向客户端推送消息了。

21.Vue组件通信？

Props适用于父组件向子组件传递数据，但是子传父也能通过props来实现

状态提升（中间人模式）适用于兄弟组件传值，先将一个组件的数据传递给父组件再通过父组件给到另外一个组件

$emit和$on这种方式适合于任何组件通信，一般用于兄弟组件之间传递

全局事件总线，在给vue实例上绑定一个全局事件总线，所有组件都能调用到

Vuex适合于任何组件通信，vue.js的状态管理库

22.说说你对vuex的理解？写出其原理的核心代码？

Vuex就是一个状态管理库，他的核心就是store（仓库），store基本上就是一个容易包含应用中大部分的state（状态）。Vuex和单纯的全局对象的区别：vuex的状态存储是响应式的，vue组件从store中读取状态数据源，若store中state发生变化，那么响应的组件也会得到高效的更新，store中的state是无法直接改变的，只能通过唯一的途径就是commit mutation（提交变化）

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

虚拟dom不会进行排版与重绘的操作，虚拟dom的总损耗是虚拟dom增改+真实dom差异增删改+排版与重绘

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

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

React中jsx本质就是这个函数react.createElement的语法糖，所有的jsx语法都会最终经过babel.js转化称为react.createElement这个函数的函数调用

25.props和state相同点和不同点？render方法在哪些情况下会执行？

Props和state的相同点：props和state都是导出html的原始数据；

Props和state都是确定性的，如果我们写的组件为同一个props和state的组合生成了不同的输出，那么我们肯定哪里做错了；

Props和state都是触发熏染更新；

Props和state都是纯js对象；

可以从父组件得到初始值props和state的初始值；

不同点：props不可以在组件内部修改，但是state可以在组件内部修改；

可以从父组件修改子组件的props，而不能从父组件修改子组件的state

Render执行，类组件调用SetState修改状态；函数组件通过useState hook修改状态；函数组件通过useState这种形式更新数据，当数据的值不发生改变了就不会触发render

react新出来两个钩子函数是什么？和删掉的will系列有什么区别？

用getDerivedStateFromProps替换了componentWillMount和compontWillReceiveProps生命周期函数

用geiSnapshotBeforeUpdate函数替换了componetWillUpdate方法，避免和compoentDidUpdate函数中获取数据不一致的问题

26.CDN的特点及意义？

CDN的特点：

本地缓存加速：提高了企业网站（尤其是包含大量图片和静态页面的网站）的访问速度，大大提高了上述网站的稳定性

镜像服务：笑出来不同运营商之间互联瓶颈带来的影响实现了跨运营商的网络加速，保证了不同网络的用户都能获得良好的接入质量

远程加速：远程访问用户根据DNS负载均衡技术只能自动选择缓存服务器，选择最快的缓存服务器加速远程访问

带宽优化：自动生成服务器的远程镜像缓存服务器，远程用户访问时就可以从缓存服务器读取数据，减少远程访问的带宽，分担网络流量，减轻原WEB服务器的负载

集群抗攻击：广泛分布的CND节点加上节点间的智能机制，可以有效地防止黑客入侵，降低各种的攻击对网站的影响，同时保证更好的服务质量

27.什么是闭包，应用场景是什么？

闭包是指有权访问另一个函数作用域的变量的函数，创建函数闭包的最常见的方式就是在一个函数中创建另一个函数，通过另一个函数访问这个函数的局部变量；闭包的特性：函数嵌套函数；内部函数可以引用外部的参数和变量；参数和变量不会被垃圾回收机制回收，闭包形成的条件：函数嵌套函数；将内部函数作为返回值返回，内部函数必须使用外层函数的变量；

缺点就是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄漏

应用场景：返回值以闭包的形式将内部变量返回；把函数当成参数返回，用闭包返回一个函数，把刺函数当做另一个函数的参数；循环赋值

28.从浏览器地址栏输入url到显示页面的步骤？

浏览器根据请求的url嫁给DNS域名解析，找出真实的ip，向服务器发起请求，服务器交给后台处理完成后返回数据，浏览器接收文件，浏览器对加载到的资源进行语法解析，建立响应的内部数据结构载入解析到资源文件，渲染页面，完成

29.介绍一下你对浏览器内核的理解？

主要分成两个部分：渲染引擎和js引擎

渲染引擎：负责取得网页得到内容，整理讯息，以及计算网页的显示方式，然后输出到显示器或打印机，浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同，所有网页浏览器，电子邮件客户端以及它需要编辑，显示网络内容的应用程序都需要内核

js引擎：解析和执行JavaScript来实现网页的动态效果，最开始渲染引擎和js引擎并没有区分的很明确，后来js引擎越来越独立，内核就倾向与只指渲染引擎

30.清除浮动的几种方式？各自的优缺点？

Clear：both可以直接请求浮动；定义一个类，里面添加css属性，context：‘’，display：flex，visibility：both，clear：both也可以给父元素设置一个overflow：hidden或者auto

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

Koa的洋葱模型是以next()作为分割点，先由外到内执行request的逻辑，然后再由内到外执行response的逻辑，这里的request的逻辑，我们可以理解为是next之前的内容，response的逻辑使next函数之后的内容，也可以说每一个中间件都有两次处理时机，洋葱模型的核心原理主要是借助compose方法

32.如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms = 16.7ms

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)