React面试题

react面试题

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

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

React Fiber是Facebook花费两年余时间对React做出的一个重大改变和优化，是对React核心算法的一次重新的实现，增加了优先级，优先级高的任务可以中断优先级低的任务，再重新执行优先级低的任务，增加了异步任务，dom diff树变成了链表，解决了页面长时间不更新导致的页面响应度差，用户感觉到卡顿的问题

2.说一说你对react的理解？有哪些特性？

react,用于构建用户界面的JavaScript库，只提供了UI层面的解决方案
遵循组件设计模式，声明式编程范式和函数式编程概念，以使前端应用程序更高效 使用虚拟DOM来有效的操作
DOM，遵循从高阶组件到低阶组件的单向数据流帮助我们将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合，嵌套，构成整体页面
react类组件使用一个名为render()的方法或者函数组件return，接收输入的数据并返回需要展示的内容

特性：JSX语法，单向数据绑定，虚拟DOM，声明式编程，Component

3.redux的实现原理，写出其核心代码

React的组件需要获取或者修改页面的数据，通过dispatch方法调用actions进入到Reducer函数中修改state的数据内容，state更新后，通知组件更新页面即可。
使用步骤：
创建一个store文件夹，新建一个index.js文件
文件中导入redux的createStore方法，用于创建公共数据区域
创建一个reducer纯函数，接收两个参数state，

4.说说你对useEffect的理解，可以模拟哪些生命周期？

使用钩子函数useEffect可以实现组件的副作用
useEffect（希望执行的动作,[组件状态的列表]）
第二个参数是用来处理useEffect的调用的时机，是一个数组，数组内是组件状态的列表
1、useEffect模拟componentDidMount
2、useEffect模拟componentDidUpdate
3、useEffect模拟componentWillUnmount

5.说说 Real DOM 和 Virtual DOM 的区别？优缺点?两者的区别如下：

虚拟 DOM 不会进行排版与重绘操作，而真实 DOM 会频繁重排与重绘
虚拟 DOM 的总损耗是“虚拟 DOM 增删改+真实 DOM 差异增删改+排版与重绘”
真实 DOM 的总损耗是“真实 DOM 完全增删改+排版与重绘”
真实 DOM 的优势：易用
缺点：效率低，解析速度慢，内存占用量过高
性能差：频繁操作真实 DOM，易于导致重绘与回流使用虚拟 DOM 的优势如下：
简单方便：如果使用手动操作真实 DOM 来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难
性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能
跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行
缺点：
在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，速度比正常稍慢

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

Virtual DOM是一种编程概念。通俗点理解，虚拟DOM是一棵虚拟的JavaScript对象树，画重点，”虚拟的“、”JS对象“，指的是它把真实的网页文档节点，虚拟成一个个的js对象，并以树型结构，保存在内存中。

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

React hooks：就是用函数的形式代替换来的继承类的形式，并且使用预函数的形式管理state，有hooks可以不再使用类的形式定义组件了Hooks优点：告别难以理解的class（this和生命周期的痛点）
解决业务逻辑难以拆分的问题
使状态逻辑复用变得简单可行
函数组件从设计思想上来看更加契合react的理念React hooks常用的四个钩子UseState()，useContext()，useEffect()，useReducer()

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

挂载阶段:
constructor() 在 React 组件挂载之前，会调用它的构造函数。
componentWillMount: 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用
更新运行阶段:
componentWillReceiveProps: 在接受父组件改变后的props需要重新渲染组件时用到的比较多，外部组件传递频繁的时候会导致效率比较低
shouldComponentUpdate():用于控制组件重新渲染的生命周期，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新
render(): render() 方法是 class 组件中唯一必须实现的方法。
componentWillUpdate(): shouldComponentUpdate返回true以后，组件进入重新渲染完成之前进入这个函数。
componentDidUpdate(): 每次state改变并重新渲染页面后都会进入这个生命周期
卸载或销毁阶段：
componentWillUnmount ()： 在此处完成组件的卸载和数据的销毁。

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

受控组件：
表单组件的状态/数据只由state 维护 修改只能通过setState()来更新,
表单数据是由 React 组件来管理
非受控组件：
使用ref来从 DOM 节点中获取表单数据。
表单数据将交由 DOM 节点来处理

1、受控组件使用场景：
一般用在需要动态设置其初始值的情况。例如：某些form表单信息编辑时，input表单元素需要初始显示服务器返回的某个值然后进行编辑。

2、非受控组件使用场景：
一般用于无任何动态初始值信息的情况。例如：form表单创建信息时，input表单元素都没有初始值，需要用户输入的情况。

10.说说React中setState和replaceState的区别？

setState 是修改其中的部分状态，相当于 Object. assign，只是覆盖，不会减少原来的状态；
replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了。

11.说说react中onClick绑定后的工作原理？

React 中的 onClick 事件绑定是一种用于处理用户交互的常见方法。它的工作原理如下：
首先，在 React 组件中，开发人员定义一个 onClick 事件处理函数，该函数将在用户单击元素时被调用。
然后，使用 JSX 语法将该函数与 DOM 元素绑定。
例如，可以在一个按钮上添加 onClick 属性并将其设置为处理函数的名称。当用户单击该按钮时，浏览器会触发一个 click 事件。
React 将该事件传递给 onClick 处理函数，并调用该函数。
处理函数可以执行一些操作，例如更新组件的状态或调用其他函数。
总的来说，onClick 事件绑定的工作原理是通过将事件处理函数绑定到 DOM 元素上来实现的。当用户与该元素交互时，浏览器会触发事件并将其传递给 React，最终调用处理函数并执行相关操作。

12.说说react diff的原理是什么？

react中diff算法主要遵循三个层级的策略：
tree层级：dom节点跨层级的操作不做优化，只会对相同层级的节点进行比较

component层级：如果是同一个类的组件，则会继续往下diff运算，如果不是一个类的组件，那么直接删除这个组件下的所有子节点，创建新的

element层级：对于比较同一层级的节点们，每个节点在对应的层级用唯一的key作为标识提供了 3 种节点操作，分别为 INSERT_MARKUP(插入)、MOVE_EXISTING (移动)和 REMOVE_NODE (删除)

13.说说React中setState执行机制？

setState是用于更新组件状态使用的一个方法，在组件中定义一个状态，要想使得更新状态引起页面得重新渲染，就必须要使用setState来更新状态。
setState默认是同步的，但是react中会有一个变量来控制setState时直接更新（同步）还是放入到队列后续执行（异步），这个变量是根据一个方法Batced来判断setState方法是在react中执行得还是绕过react执行的。

14.说说react的事件机制？

React的事件机制是基于合成事件（SyntheticEvent）的。合成事件是React封装的一种事件对象，它是对浏览器原生事件的封装，提供了跨浏览器的一致性，同时也有更好的性能和可靠性。

15.什么是垂直外边距合并？说说合并后的几种情况？

垂直外边距合并：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。

16.合并后的几种情况：相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。
这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：
尽量只给一个盒子添加margin值。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方法：
父盒子可以加个边框
用overflow（加了这句话在浏览器中可以看到也是自动加了1px的边框）。
可以为父元素定义上内边距。

17.如何使用css实现一个三角形？

1.使用border绘制三角形：利用了高度为零的容器以及透明的border实现
2.使用linear-gradient绘制
3.使用conic-gradient绘制
4.transform：rotate配合overflow：hidden绘制三角形
5.使用clip-path绘制

18.什么是强缓存和协商缓存？

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

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

使用React.createElement或JSX编写React组件 ReactDOM.render将生成好的虚拟DOM渲染到指定容器上，
react中的jsx语法会通过babel转化为 js代码，以React.createElement函数形式存在，createElement函数返回一个ReactElement函数，ReactElement函数返回一个的虚拟节点，虚拟节点中嵌套虚拟节点，就形成了虚拟DOM，最后通过ReactDOM.render方法转化为真实DOM

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

React-redux是官方react UI绑定层，允许React组件从redux存储中读取数据，并将操作分派到存储以更新的状态。提供了connect,Provider等API，帮助我们连接react和redux，实现的逻辑会更加的严谨高效。
@reduxjs/tookit是对Redux的二次封装，开箱即用的一个高效的Redux开发工具，使得创建store，更新store

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

防抖的实现：定义一个闭包函数，在函数内部定义个timer变量用于存储定时器，在返回的函数中判断该变量是否存在（定时器是否开始），如果存在则表示上一次的点击事件还没执行完成表示不是最后一次执行，则不进行操作；若定时器不存在则表示可以执行点击在规定的时间内不重复点击就可以实现一个防抖函数了

节流的实现：跟上面几乎差不多，只不过它需要定义一个开始点击的时间，事件执行的时间，进行计算，在规定时间内依次执行。

22.说说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文件到ES5

loader特性
我们一边偏向于使用，不会去在意loader的一些小细节, 这里就顺带说一下
loader 从右到左地取值(evaluate)/执行(execute)
loader 支持链式传递,链中的每个 loader 会将转换应用在已处理过的资源上
loader 也可以内联显示指定
loader 可以是同步的，也可以是异步的
loader 运行在 Node.js 中，并且能够执行任何 Node.js 能做到的操作
loader 可以通过 options 对象配置
除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块
loader 能够产生额外的任意文件

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

1.JS代码压缩
2.CSS代码压缩
3.Html文件代码压缩
4.文件大小压缩
5.图片压缩
6.Tree Shaking
7.代码分离
8.内联 chunk

24.useEffect的依赖为引用类型如何处理？

useEffect的依赖为引用数据类型，可能会导致监听不触发，原因就是监听的同一个地址的时候，对象本身地址没变，所以监听的结果就是认为数据并没有改变从而不直接调用。

解决方法
如果数据是对象的话，可以监听对象里面的值，值是基本类型，如果值改变了，那么可以监听执行
在去修改对象和数据的时候，使用深拷贝或者浅拷贝，这样地址发生改变可以监听执行
可以转换成字符串，通过JSON.stringify()，监听字符串这样的，这样改变也会执行

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

react.createPortal 来制作弹窗组件，它在Modal 组件位置进行 fixed 定位，可以任意的挂载到某个dom元素上，使用后的管理更方便，但是注意需要预留html的挂载元素

26.Provider和connect的底层原理实现，写出其核心代码？

connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action

connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数。
一种解决方法是将state对象作为参数，传入容器组件。但是，这样做比较麻烦，尤其是容器组件可能在很深的层级，一级级将state传下去就很麻烦。
React-Redux 提供Provider组件，可以让容器组件拿到state。

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

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

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

React 使用 JSX 来替代常规的JavaScript。
JSX 是按照 XML 语法规范 的 JavaScript 语法扩展。
JSX 语法的本质：并不是直接把 JSX 渲染到页面上，而是内部先转换成了 createElement 形式，再渲染的。

29.说说你对redux中间件的理解？常用的中间件有哪些？

中间件是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务，衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享，功能共享的目的

常用的中间件：

Redux-thunk：用于异步操作

Redux-logger：用于日志记录

上述的中间件都需要通过applyMiddlewares进行注册
实现原理：redux中间件被放入到一个数组中，嵌套执行，然后执行store.dispatch方法，这一执行返回getState和dispatch这两个方法，然后根据dispatch进行判断，最后根据判断来决定执行

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

AMD(异步模块定义)：
AMD作为一种模块化规范，有其对应的第三方库作为具体实现，最常用的就是RequireJS。也就是说，AMD规范的应用，需要借助RequireJS第三方库才能实现。
AMD规范是非同步加载模块，允许指定回调函数。

CMD(通用模块定义)
CMD是SeaJS 在推广过程中对模块定义的规范化产出。

CommonJS
根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。所以，定义一个模块就是写一个新的js文件，但是最后要将文件的内容exports出来。
CommonJS 加载模块是同步的，所以只有加载完成才能执行后面的操作

31.AMD和CMD区别：

对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible（尽可能的懒加载，也称为延迟加载，即在需要的时候才加载）
CMD 推崇依赖就近，AMD 推崇依赖前置
AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单

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

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

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

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

34.说说你对webSocket的理解？

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

35.shouldComponentUpdate有什么作用？

shouldComponentUpdate函数是react中的一个生命周期函数，用于在更新组件前检查数据是否变化，从而决定是否重新渲染组件
作用：
（1）提升组件性能：当组件在接收到新的props和state时，可以通过 shouldComponentUpdate判断是否需要重新渲染，减少不必要的渲染
（2）允许控制：react通过此函数允许开发者控制组件是否重新渲染，能够提高开发效率，实施预期的操作

36.Vue中自定义指令的理解，应用场景有哪些？

指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性，因此指令系统表征了计算机的基本功能决定了机器所要求的能力
在vue中提供了一套为数据驱动试图更为方便的操作，这些操作被称为指令系统
应用场景：表单防止重复提交
图片懒加载
一键copy的功能

37.说说javascript内存泄漏的几种情况？

闭包，全局变量，定时器，未及时清理的dom，事件监听

38.大文件如何做断点续传？

拿到文件，保存文件唯一性标识，切割文件，分段上传，每次上传一段，根据唯一性标识判断文件上传速度，直到文件的全部片段上传完毕

39.原生js如何实现上拉加载下拉刷新？

上拉加载：需要计算出当前父元素的scrollHeight在计算出当前元素的scrollTop和clientHeight通过这三个属性就可以判断出用户滑动的位置是否在最后，定义一个事件来实时判断，当用户滑动的位置到达底层后显示加载更多，后台请求服务器返回数据，与当前列表拼接则完成上拉加载操作。一般需要配合节流使用避免重复请求
下拉刷新：可以通过用户滑动当前元素的顶部位置是否达到需要刷新的位置，如果达到则进行释放操作，将元素与顶部的距离设置为0，进行刷新列表，
通过touchstart、touchmove、touchend三个事件，来判断用户得操作
当用户滑动距离大于顶部得话就设置transformy值实时修改
这两种操作都可以使用第三方库来完成。

40.说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别？

他们之间的像素单位不同，显示程度不同，以及像素比也不一样
设备像素：不同设备的像素不一
Css像素：用于web编程，以px为后缀，是一个长度单位，相对单位和绝对单位
设备独立像素：与设备无关得逻辑像素，代表可以通过程序控制使用的虚拟像素
Dpr：设备像素比，代表设备独立像素到设备像素得转换关系
Ppi：每英寸像素，表示每英寸所含的像素点数目，就是像素密度

41.谈谈你对BFC的理解？

BFC及块级格式化上下文，
把一个元素变为BFC有很多种方法其中overflow：hidden最为明显。
它的目的就是为了让当前元素的排版等操作不影响外部元素。

42.说说TCP为什么需要三次握手和四次握手？

在进行了三次握手后在服务器和客户端清晰的知道发送的对象是谁。
为了安全，在我们进行大量数据进行传输时会有恶意拦截的操作。
四次挥手是为了防止客户端是否还有未发送完的数据。
采用三次握手是为了防止失效的连接请求报文段突然又传送到主机B，因而产生错误
主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备
因为通信不可能100%可靠，而上面的三次握手已经做好了通信的准备工作，再增加握手，并不能显著提高可靠性，而且也没有必要。

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

GetDeriveStateFormProps：在第一次挂载组件时和更新state或父组件更新时执行。
GetSnapshotBeforeUpdate：在更新前可以获取到就得数据和新的数据它的返回值可以在componentDidUpdate中得第三个参数中拿到。
该周期函数在render后执行，执行之时DOM元素还没有被更新

该方法返回的一个Snapshot值，作为componentDidUpdate第三个参数传入
此方法的目的在于获取组件更新前的一些信息，比如组件的滚动位置之类的，在组件更新后可以根据这些信息恢复一些UI视觉上的状态
被删掉的几个will钩子函数是为了避免开发者滥用得，在这几个生命周期函数得前面加上UNSAFE_前缀还是可以使用的，这几个钩子有它们得好处也有弊端，并且在react以后的版本可能会被废除

44.最少说出三种前端清除浮动的方法？

使用带clear属性的空元素
使用css的overflow属性
使用css的:after伪元素

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

一、原理
在类组件和函数组件中，render函数的形式是不同的。
在类组件中render函数指的就是render方法；而在函数组件中，指的就是整个函数组件。
二、触发时机
render的执行时机主要分成了两部分：
类组件调用 setState 修改状态
函数组件通过useState hook修改状态

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

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

47.说说你对git rebase 和git merge的理解？区别？

rebase会将整个分支移动到另一个分支上，有效地整合了所有分支上的提交,主要的好处是历史记录更加清晰，是在原有提交的基础上将差异内容反映进去，消除了 git merge所需的不必要的合并提交

merge和rebasea都是合并历史记录，但是各自特性不同：merge通过merge合并分支会新增一个merge commit，然后将两个分支的历史联系起来其实是一种非破坏性的操作，对现有分支不会以任何方式被更改，但是会导致历史记录相对复杂rebaserebase会将整个分支移动到另一个分支上，有效地整合了所有分支上的提交主要的好处是历史记录更加清晰，是在原有提交的基础上将差异内容反映进去，消除了 git merge所需的不必要的合并提交

48.在使用redux过程中，如何防止定义的action-type的常量重复？

Es6引入了一种新的原始数据类型Symbol，表示独一无二的值
Symbol是一个原始类型的值，不是对象symbol函数可以接受一个字符串作为参数，表示对symbol实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分

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

React中的调和阶段是指React将组件的变化与DOM的变化匹配的过程，其中setState方法是触发组件重新渲染的重要方式。
调和阶段中，setState方法会触发组件重新渲染，并将更新后的state与之前的state合并得到新的state。然后React会比较新的state和之前的state的差异，通过一系列优化算法，计算出需要更新的DOM节点。
在计算出需要更新的DOM节点后，React会将这些节点标记为“脏节点”，然后进行批量更新，即将所有需要更新的节点一次性更新，而不是每个节点分别更新。这样可以提高性能，减少不必要的DOM操作，避免页面的闪烁。
在批量更新结束后，React会将所有需要更新的节点一次性更新到页面上，完成整个组件渲染的过程。
需要注意的是，setState方法是异步的，这意味着在调用setState方法后并不会立即更新state和DOM，而是将更新任务添加到更新队列中，等待下一次调和阶段时才会执行更新。如果需要在setState更新后立即获取最新的state或DOM，可以使用回调函数或在componentDidUpdate生命周期函数中进行操作。，

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

props：
props是一个从外部传进组件的参数，由于React具有单向数据流的特性，所以他的主要作用是从父组件向子组件中传递数据，它是不可改变的，如果想要改变它，只能通过外部组件传入新的props来重新渲染子组件，否则子组件的props和展示形式不会改变，props除了可以传字符串，数字，还可以传递对象，数组甚至是回调函数
state：
state主要作用是用于组件保存，控制及修改自己的状态，它只能在constructor中初始化，state是可以被改变的，state放改动的一些属性，比如点击选中，再点击取消，类似这种属性就放入带state中，注意：没有state的叫做无状态组件，多用props少用state，多写无状态组件，注意：修改state的值时，必须通过调用setState方法，当我们调用this.setState方法时,React会更新组件的数据状态，并且重新调用render方法

不同点：
1.props不可以在组件内部修改，但state可以在组件内部修改
2.可以从父组件修改自组件的props，而不能从父组件修改自组件的state

相同点：
1.props和state都是导出HTML的原始数据。
2.props和state都是确定性的，如果我们写的组件为同一props和state的组合3.生成了不同的输出，那木我们肯定在哪里做错了
4.props和state都会触发渲染更新
5.props和state都是纯JS对象（用typeof来判断，结果都是object）
6.可以从父组件得到初始值props和state的初始值

触发时机：
类组件调用用setState修改状态，从而执行render
函数组件通过useState的hook修改状态，函数通过useState这种形式更新数据，当数组的值不在发生变化就不会触发render

50.shouldComponentUpdate有什么作用？

shouldComponentUpdate是React中的一个生命周期方法，它的作用是控制组件是否需要重新渲染。
当组件的props或state发生变化时，React会调用shouldComponentUpdate方法，该方法默认返回true，表示组件需要重新渲染。但是，在某些情况下，组件并不需要重新渲染，这时可以在shouldComponentUpdate方法中进行一些判断，返回false表示组件不需要重新渲染，从而提高程序的性能和效率。
shouldComponentUpdate方法可以接收两个参数：nextProps和nextState，分别表示组件即将接收到的props和state。在shouldComponentUpdate方法中，开发者可以根据当前的props和state以及即将接收到的nextProps和nextState进行一些比较和判断，以决定是否需要重新渲染组件。

51.说说React中的虚拟dom？在虚拟dom计算的时候diff和key之间有什么关系？

虚拟dom:
原生的JS DOM操作非常消耗性能，而React把真实原生JS DOM转换成了JavaScript对象。这就是虚拟Dom（Virtual Dom）
每次数据更新后，重新计算虚拟Dom，并和上一次生成的虚拟dom进行对比，对发生变化的部分作批量更新。在此其中，React提供了componentShouldUpdate生命周期来让开发者手动控制减少数据变化后不必要的虚拟dom对比，提升性能和渲染效率。

52.diff和key之间关系：

当同一层级的某个节点添加了对于其他同级节点唯一的key属性，当它在当前层级的位置发生了变化后。react diff算法通过新旧节点比较后，如果发现了key值相同的新旧节点，就会执行移动操作（然后依然按原策略深入节点内部的差异对比更新），而不会执行原策略的删除旧节点，创建新节点的操作。这无疑大大提高了React性能和渲染效率

react新出来两个钩子函数是什么？和删掉的will系列有什么区别？
React类组件中新出来的两个生命周期函数是getDerivedStateFromProps和getSnapshotBeforeUpdate。

区别在于：

在组件更新阶段，getDerivedStateFromProps是在render方法之前调用，用于更新组件的state状态。而getSnapshotBeforeUpdate是在组件的DOM更新之前调用，可以获取到组件更新前的状态。
getDerivedStateFromProps钩子函数是一个静态方法，不可以访问组件实例的this对象，只能通过传入的参数获取当前组件的状态和属性。而getSnapshotBeforeUpdate方法可以访问组件实例的this对象。
will系列的生命周期函数已经被标记为过时，不建议再使用，而getDerivedStateFromProps和getSnapshotBeforeUpdate是React16.3以后新增的生命周期函数，可以在类组件中使用。

总的来说，getDerivedStateFromProps和getSnapshotBeforeUpdate的使用场景比will系列更加明确和安全，但需要注意使用时的细节。

53.React的props.children使用map函数来遍历会收到异常显示，为什么？应该 如何遍历？

在react 中 props.children 不一定是数组
有三种可能 ：
1.当前组件没有子节点数据类型就是undefined，
2.有一个子节点数据类型就是object 。
3 .有多个子节点的时候才会是array ,只有在多个节点的时候才可以直接调用map方法，react提供了一个react.children.map()方法，可以安全遍历子节点对象。

54.谈谈你对immutable.js的理解？

immutable不可改变的，在计算机中，即指一旦创建，就不能再被更改的数据
对immutable对象的任何修改或添加删除操作都会返回一个新的immutable对象

immutable实现原理是Persistent Data Structure （持久化数据结构）:用一种数据结构来保存数据 当数据被修改时，会返回一个对象，但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费，也就是使用旧数据创建新数据时，要保证旧数据同时可用并且不变，同时为了避免deepCopy把所有节点都复制一遍带来的性能损耗，immutable使用 Structural Sharing（数据共享）
如果对象树中一个及诶大那发生变化，只修改这个节点和受它影响的父节点，其他节点则进行共享

55.redux本来是同步的，为什么它能执行异步代码？实现原理是什么？中间件的实现原理是什么？

因为它使用了redux-thunk或者redux-thunk这两个异步操作的中间件，
原理是在派发action时，要执行dispatch进行拦截，先不更新store中的数据，等返回数据???
将所有的中间件放入到一个数组中，进行嵌套，最后将执行store.dispatch方法，这一执行操作，会返回两个方法，一个是getState方法，另一个是dispatch方法，然后根据返回的这两个方法，进行if判断，再根据这个判断，执行相对于的操作

56.redux中同步action与异步action最大的区别是什么？

同步action：执行了dispatch函数之后，对应的reducer纯函数立即得到执行，reducer执行完了之后，state立即就改变了，此时用store.getState函数，取到的是最新的state值；

异步action：原则上redux并没有提供异步action的处理方案，异步的action需要依赖第三方的中间件解决（如redux-thunk），dispatch了一个异步action（本质上是dispatch的一个函数）之后，目标state并不会立即响应，而是要看异步函数内部的逻辑，来决定state什么时候响应.

57.redux-saga和redux-thunk的区别与使用场景？

redux-saga:
redux-saga在store的index文件中创建saga中间件连接到store，saga中间件可以监控派发action,如果有action.type值与监控的变量一致，则执行该函数的内容，在这个函数中也可以再派发一个新的action

redux-thunk:
redux-thunk相当于是基于store的升级，一般情况，我们传给store的action是一个对象，但是通过redux-thunk中间件，我们可以把部分的业务逻辑（异步请求）等放在action中进行处理。当store接收到函数类型的action，redux-thunk会执行该函数，并传入参数dispatch，当函数内部的逻辑执行完成后，会再次派发一个action继续向下执行。

区别：
redux-thunk和redux-saga中间件相当于对store的升级，thunk通过执行action中的函数实现业务逻辑，没有扩展API；saga通过定义saga函数进行监控，同时提供一些常用的API

应用场景：
redux-thunk：
dispatch一个action之后，到达reducer之前，进行一些额外的操作，就需要用到middleware。你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。
　　换言之，中间件都是对store.dispatch()的增强。redux-thunk就是用来异步操作，比如接口请求等。

redux-saga：
redux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk中间件

58.CDN的特点及意义？

CDN的作用：实际上，内容分发布网络(CDN)是一种新型的网络构建方式，它是为能在传统的IP网发布宽带丰富媒体而特别优化的网络覆盖层；而从广义的角度，CDN代表了一种基于质量与秩序的网络服务模式

CDN 是构建在数据网络上的一种分布式的内容分发网。 CDN 的作用是采用流媒体服务器集群技术，克服单机系统输出带宽及并发能力不足的缺点，可极大提升系统支持的并发流数目，减少或避免单点失效带来的不良影响

59.为什么for循环比forEach性能高？

一、for()循环？
for循环就是通过下标，对循环中的代码反复执行，功能强大，可以通过index取得元素。处理比较复杂的处理的时候比较方便
二、forEach()循环
forEach()循环方法用于调用数组的每个元素，并将元素传递给回调函数。foreach有的也叫做增强for循环，forEach其实是for循环的一个特殊简化版。forEach循环对于空的数组是不会执行回调函数的

60.如何进行选择？

foreach相对于for循环，代码减少了，但是foreach依赖于IEnumerable。
在运行的时候效率比for循环低。当然，在处理不确定循环次数的循环，或者循环次数需要计算的情况下。使用foreach比较方便，而且foreach的代码经过编译系统的代码优化以后，for循环使用更加灵活。

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

Render方法在类组件和函数组件中表示的是不一样的
Render方法在类组件中表示的是一个方法，而render方法在函数组件中表示的是整个函数组件
类组件是在调用setState中触发，函数组件是在调用useState hook时触发

![] == ![]，![] == []，结果是什么？为什么？
结果都为true
![] == ![]：
因为 ![]打印结果为false,实际上是两个false做比较， falsefalse的结果为true
![] == []：
![]打印结果为false，当布尔类型参与数值比较时，布尔值将转换为数值做比较，true为1，false为0。[]打印结果按照number转换结果也为0，实际上是两个0做比较， 00的结果为true

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

参考回答： 闭包是指有权访问另外一个函数作用域中的变量的函数。 闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。闭包就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数并不在栈上分配，而是在堆上分配。当在一个函数内定义另外一个函数就会产生闭包。
应用场景：例如私有变量，使用定时器，手动写入防抖函数和节流函数

63.谈谈你是如何做移动端适配的？

1.px + viewport适配
2.rem布局
。CSS3媒体查询适配
。基于设计图的rem布局
。基于屏幕百分比的rem布局
。小程序的rpx布局
3.vw布局
。通过媒体查询的方式即CSS3的meida queries
。以天猫首页为代表的flex弹性布局
。以淘宝首页为代表的rem+viewport缩放
。rem方式

64.移动端1像素的解决方案？

1.媒体查询利用设备像素比缩放，设置小小数像素
2.设置border-image方案
3.background-image渐变实现
4.box-shadow
5.viewport+rem
6.transform: scale(0.5) 方案 - 推荐: 很灵活
7、媒体查询 + transfrom 对方案1的优化

65.弹性盒中的缩放机制是怎样的？

弹性盒中的项目设置flex-grow属性定义项目的放大比例，默认值为0，值越大，放大越厉害，且不支持负值；
而flex-shrink属性定义项目的缩小比例，默认值为1，数值越大，缩小越厉害，同样不支持负值；

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。他的默认值为auto，也就是项目的本来大小。

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

React元素有一个$$type属性，这是React内部用来标识组件类型的属性，它与type属性不同。元素的type属性是一个字符串，用于表示元素的类型，可以是原生DOM元素的标签名，也可以是自定义组件的类型，例如“div”、“span”MyComponent”等。而$$type属性是React内部用来区分不同类型组件的属性，它是一个内部属性，用户通常不需要使用它。type属性的值是一个Symbol类型的值，它可以确保在不同的JavaScript环境中具有唯一性。React使用‘type属性的值是一个Symbol类型的值，它可以确保在不同的JavaScript环境中具有唯一性。 React使用type属性的值是一个Symbol类型的值，它可以确保在不同的JavaScript环境中具有唯一性。React使用‘type属性来进行组件类型比较和优化，例如在shouldComponentUpdate生命周期方法中，React会比较新旧组件的type属性，来确定是否需要进行更新操作。在一些高级应用场景下，用户也可以使用type属性，来确定是否需要进行更新操作。在一些高级应用场景下，用户也可以使用type属性，来确定是否需要进行更新操作。在一些高级应用场景下，用户也可以使用type属性来自定义组件的类型，以实现更高级的功能。
需要注意的是，由于$$type属性是React内部使用的属性，用户不应该直接使用它来判断组件类型或进行其他操作，而应该使用React提供的API来进行操作。

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。