react常见面试题

1.说说你对useEffect的理解，可以模拟哪些生命周期？
react提供了hooks，因此函数组件也可以用hooks进行状态管理并且也可以用useEffect模拟class组件的生命周期。

useEffect中第一个参数是一个执行函数，当第二个参数依赖项不为空数组时，前一个函数中的return会在再次执行useEffect前执行，可以用于回收之前的计时器等。

useEffect的依赖项是做浅比较

useEffect第一个参数是一个回调函数，在依赖项发生变化的时候，会执行它，也被称为副作用函数。 可以在里面进行相应的生命周期阶段的操作，异步请求，设定计时器等，可以通过副作用函数的return来清除副作用，比如回收计时器。

可以模拟三个生命周期函数，分别是componentDidMount，componentDidUpdate，componentWillUnMpunt

2.说说Real DOM和Virtual DOM的区别？优缺点？
区别

两者的区别如下：

虚拟 DOM 不会进行排版与重绘操作，而真实 DOM 会频繁重排与重绘

虚拟 DOM 的总损耗是“虚拟 DOM 增删改+真实 DOM 差异增删改+排版与重绘”，真实 DOM 的总损耗是“真实 DOM 完全增删改+排版与重绘”

优缺点

真实 DOM 的优势：易用

缺点：

效率低，解析速度慢，内存占用量过高 性能差：频繁操作真实 DOM，易于导致重绘与回流

使用虚拟 DOM 的优势如下：

简单方便：如果使用手动操作真实 DOM 来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难 性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能 跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行

缺点：在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化 首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，速度比正常稍慢

3.说说React中setState和replaceState的区别？
setState用于设置状态对象

nextState，将要设置的新状态，该状态会和当前的state合并 callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。 合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

replaceState

replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除.

nextState，将要设置的新状态，该状态会替换当前的state。

callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。

4.说说react中onClick绑定后的工作原理？
1. 首先react有自己的事件系统，是遵循w3c的，这个事件系统的名称叫做合成事件(SyntheticEvent)，而其自定义事件系统的动机主要包含以下几个方面：

　　抹平不同浏览器之间的兼容性差异。最主要的动机。

　　件合成既可以处理兼容性问题

　　提供一个抽象的跨平台事件机制

　　可以做更多优化

可以干预事件的分发

2. 当给组件(元素)绑定onClick事件之后

(1. react会对事件先进行注册,将事件统一注册到 document上

(2. 根据组件 唯一的标识key来对事件函数进行存储

3. 统一的指定dispatchEvent回调函数

4. 储存事件回调

react会将click这个事件统一存到一个对象中,回调函数的存储采用键值对(key/value)的方式存储在对象中，key 是组件的唯一标识id，value 对应的就是事件的回调函数,通过组件的key就能回调到相应的函数了

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

React Fiber 是 Facebook 花费两年余时间对 React 做出的一个重大改变与优化，是对 React 核心算法的一次重新实现。从Facebook在 React Conf 2017 会议上确认，React Fiber 在React 16 版本发布

在react中，主要做了以下的操作：

为每个增加了优先级，优先级高的任务可以中断低优先级的任务。然后再重新，注意是重新执行优先级低的任务。 增加了异步任务，调用requestIdleCallback api，浏览器空闲的时候执行。 dom diff树变成了链表，一个dom对应两个fiber（一个链表），对应两个队列，这都是为找到被中断的任务，重新执行。 从架构角度来看，Fiber 是对 React核心算法（即调和过程）的重写。

从编码角度来看，Fiber是 React内部所定义的一种数据结构，它是 Fiber树结构的节点单位，也就是 React 16 新架构下的虚拟DOM。

解决问题

1、掉帧 在react 15以及之前，还没有fiber的概念， 当虚拟dom量非常大非常复杂时，react在递归进行渲染时会非常耗时，会一直递归进行，会造成页面卡顿掉帧的现象，严重情况下浏览器还可能失去响应。

fiber有协调与提交两个阶段，协调包含了fiber创建与diff更新，此过程可暂停。而提交必须同步执行，保证渲染不卡顿。

2、并发 fiber实现了并发，为任务赋予不同优先级，保证了一有时间总是做最高优先级的事，而不是先来先占位死板的去执行。

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

redux-thunk：用于异步操作

redux-logger：用于日志记录

实现原理

redux-thunk是官网推荐的异步处理中间件

默认情况下的dispatch(action)，action需要是一个JavaScript的对象

redux-thunk中间件会判断你当前传进来的数据类型，如果是一个函数，将会给函数传入参数值（dispatch，getState）

dispatch函数用于我们之后再次派发action getState函数考虑到我们之后的一些操作需要依赖原来的状态，用于让我们可以获取之前的一些状态

如果想要实现一个日志功能，则可以使用现成的redux-logger

7.什么是强缓存和协商缓存？
缓存：

缓存是指浏览器(客户端)在本地磁盘中队访问过的资源保存的副本文件。

强缓存： 强缓存是根据返回头中的 Expires 或者 Cache-Control 两个字段来控制的，都是表示资源的缓存有效时间。

协商缓存： 协商缓存是由服务器来确定缓存资源是否可用。 主要涉及到两对属性字段，都是成对出现的，即第一次请求的响应头带上某个字, Last-Modified 或者 Etag，则后续请求则会带上对应的请求字段 If-Modified-Since或者 If-None-Match，若响应头没有 Last-Modified 或者 Etag 字段，则请求头也不会有对应的字段。

区别：

如果浏览器命中强缓存，则不需要给服务器发请求；而协商缓存最终由服务器来决定是否使用缓存，即客户端与服务器之间存在一次通信。 在 chrome 中强缓存（虽然没有发出真实的 http 请求）的请求状态码返回是 200 (fromcache)；而协商缓存如果命中走缓存的话，请求的状态码是 304 (not modified)。 不同浏览器的策略不同，在FireFox中，from cache 状态码是 304.

8.useEffect的依赖为引用类型如何处理？
1 如果数据是对象的话，可以监听对象的里面的值，值是基本类型，如果值改变了，那么可以监听执行 2 在去修改对象和数据的时候，使用参拷贝或者浅拷贝，这样地址发生改变可以监听执行 3 可以转成字符串，通过JSON.stringify0,监听字符串这样的，这样改变也会执行

9.说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？
react-redux react官方推出的redux绑定库，react-redux将所有组件分为两大类：UI组件和容器组件，其中所有容器组件包裹着UI组件，构成父子关系。容器组件负责和redux交互，里面使用redux API函数，UI组件负责页面渲染，不使用任何redux API。容器组件会给UI组件传递redux中保存对的状态和操作状态的方法

@reduxjs/toolkit Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式，使用 Redux Toolkit 都可以优化你的代码，使其更可维护

10.知道react里面的createPortal么，说说其使用场景？
定义

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案

使用场景

一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框

11.说说webpack中常见的loader？解决了什么问题？
style-loader: 将css添加到DOM的内联样式标签style里 css-loader :允许将css文件通过require的方式引入，并返回css代码 less-loader: 处理less sass-loader: 处理sass postcss-loader: 用postcss来处理CSS autoprefixer-loader: 处理CSS3属性前缀，已被弃用，建议直接使用postcss file-loader: 分发文件到output目录并返回相对路径 url-loader: 和file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url html-minify-loader: 压缩HTML babel-loader :用babel来转换ES6文件到ES

12.说说如何借助webpack来优化前端性能？
压缩代码： 删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUhlifyPlugin来压缩JS文件，利用cssnano（css-loader？minim ize）来压缩css

利用CDN加速： 在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用 webpack对于output参数和各种loader的publicPath参数来修改资源路径

Tree Shaking 消除最终文件中未使用的代码。可以通过在启动webpack时追加参数–optimize-minimize来实现

Code Splitting 将代码按路由维度或者组件分块（chunk），这样做到按需加载，同时可以充分利用浏览器缓存

提供公共第三方库 SplitChunksPlugin插件来进行公共模块抽取，利用浏览器缓存可以长期缓存这些无需频繁变动的公共代码

13.说说你对事件循环event loop的理解？
首先，JavaScript是一门单线程的语言，意味着同一时间内只能做一件事，但是这并不意味着单线程就是阻塞，而实现单线程非阻塞的方法就是事件循环 在JavaScript中，所有的任务都可以分为

同步任务：立即执行的任务，同步任务一般会直接进入大屏主线程中执行 异步任务：异步执行的任务，比如ajax网络请求，setTimeout定时函数等

如果将任务划分为同步任务和异步任务并不是那么的准确

微任务

一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前

宏任务

宏任务的时间粒度比较大，执行的时间间隔是不能精确控制的，对一些高实时性的需求就不太符合

14.说说你对vue中mixin的理解？
mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类； mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂。 本质就是一个JS对象，可以包含组件中的任意功能选项，如data、components、methods、creaded、computed以及生命周期函数等等。 只需要将共用的功能以对象的方式传入mixins选项中，当组件使用mixins对象时所有mixins对象的对象都将被混入该组件本身的选项中来。

15.说说你对webSocket的理解？
一、什么是websocket WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议） 它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的 Websocket是一个持久化的协议

二、websocket的原理

websocket约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp的连接，从而方便它们之间的通信 在websocket出现之前，web交互一般是基于http协议的短连接或者长连接 websocket是一种全新的协议，不属于http无状态协议，协议名为"ws"

16.for...in循环和for...of循环的区别？
（1）for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值

（2）for in总是得到对象的key或数组、字符串的下标

（3）for of总是得到对象的value或数组、字符串的值

（4）for in是ES5里的，for…of是ES6里的

17.前端跨域的解决方案？
cors跨域： 服务端进行接口请求设置，前端直接调用 jsonp： jsonp跨域-前端适配，后端配合， 前后端同时改造 接口代理： 通过修改nginx服务器配置实现代理转发 前端修改，后端不

18.调和阶段setState干了什么？
代码中调用 setState函数之后，React会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。

经过调和过程，React会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面；

在 React 得到元素树之后，React会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染；

在差异计算算法中，React能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。

19.说说React jsx转换成真实DOM的过程
书写JSX代码 Babel编译JSX 编译后的JSX执行React.createElement的调用 传入到ReactElement方法中生成虚拟Dom 最终返回给ReactDom.render生成真实Dom

20.说说AMD、CMD、commonJS模块化规范的区别？
CommonJS CommonJS： nodejs中的模块化机制，模块通过require()引入，exports或modules.exports导出

规范的特点：

当使用require命令加载某个模块时，就会运行整个模块的代码。 对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。 对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块 循环加载时，属于加载时执行 执行流程：

根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性 模块输出：模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象 加载模块：加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象 AMD AMD： 上面的commonjs主要适用于node.js这种后端模块化，其中的require引用是同步的，前端环境中有很多异步的情况，因此commonjs是不够用的，AMD就出现了。

多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器 js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长 CMD CMD： 规范是阿里的玉伯提出来的，实现js库为sea.js。和requirejs非常相似，也是前端异步加载模块化。不同的是它的模块是需要的时候去请求，而不是先加载再使用。RequireJS用的就是AMD，AMD用define定义方法，用require引用模块。

AMD与CMD区别： 最明显的区别就是在模块定义时对依赖的处理不同 AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块 CMD推崇就近依赖，只有在用到某个模块的时候再去require

21.说说你对koa中洋葱模型的理解？
什么是koa？

Koa是一个精简的node框架，被认为是第二代Node框架，其最大的特点就是独特的中间件流程控制，是一个典型的洋葱模型，它的核心工作包括下面两个方面：

将node原生的req和res封装成为一个context对象。 基于async/await的中间件洋葱模型机制。

什么是洋葱模型。

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

22.说说package.json中版本号的规则？
一、版本的格式

patch：修复bug，兼容老版本

minor：新增功能，兼容老版本

major：新的架构调整，不兼容老版本

二、依赖版本号规则

这三个依赖分别使用了三个符号来表明依赖的版本范围。语义化版本范围规定：

*：升级到最新版本

^：升级次版本号和修订号

~：只升级修订号

三、必须匹配某个版本

version

必须大于某个版本 如：>1.1.2，表示必须大于1.1.2版

=version

可大于或等于某个版本 如：>=1.1.2，表示可以等于1.1.2，也可以大于1.1.2版本

<version 必须小于某个版本 如：<1.1.2，表示必须小于1.1.2版本

<=version 可以小于或等于某个版本 如：<=1.1.2，表示可以等于1.1.2，也可以小于1.1.2版本
————————————————
版权声明：本文为优快云博主「Matricola」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/Matricola/article/details/129800514