【个人整理2】

1.说说你对react的理解？有哪些特性？
React是JavaScript用于构建用户界面的库，只提供了UI层面的解决方案。
React通过声明式编程范式，函数式编程概念和 提升前端用户界面的响应速度
特性 单向数据流，JSX语法，组件化开发，声明式编程

2.说说Real diff算法是怎么运作的？
React会将已经生成的虚拟DOM进行缓存，当再次生成一个新的虚拟DOM时将新旧DOM进行对比，这时实际就是diff算法的运作。通过diff算法尽量精确的查找到两棵树之间的异同点，通过key将节点分为插入、更新、删除等操作。然后将对比后的DOM树进行渲染

3.说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？
共有创建、更新、卸载三个不同的阶段
创建阶段：constructor——getStateFromProps——render——componentDidMount
更新阶段：shodComponentUpdate——getSnapshotUpdate——render——componentDidUpdate
卸载阶段：componentWillUnMount

4.说说你对React中虚拟dom的理解？
虚拟DOM本质是一个JS对象，用于描述真实DOM树结构。虚拟DOM在DOM更新时提升性能，需要注意的是虚拟DOM对于性能的提升需要分为初始渲染、少量数据更新、大量数据更新三种情况，在初始渲染DOM时使用虚拟DOM反而会浪费性能。虚拟DOM可以将DOM进行XSS预处理，预防XSS的工具。虚拟DOM能够解决不同浏览器间的兼容

5.说说你对react hook的理解？
React Hook是React16.8新增的一个特性，它可以让无状态组件拥有自身的状态和部分React组件的特性。如Hook 中常用的useState可以在无状态组件内部创建一个属于自身内部的状态，且会返回这个状态等更改函数，使用这个函数对状态进行修改能够引发React的render对组件重新渲染。useEffect则可以让无状态组件内部拥有类似生命周期的效果，它可以标识初始渲染和组件状态更新两种类生命周期

6.React组件之间如何通信（还有消息订阅等）
父子组件通讯
父传子：将子组件引入到组件内部，通过标签上的属性值的形式传递组件内部所需要的变量，回调
子传父：通过组件内部props中父组件传递过来的回调函数将子组件内的数据返回给父组件（React中推崇的是单向数据流，所以并不推荐子组件向父组件传递数据）
跨组件传值Context：
先创建一个（React中的createContext）Context对象，在初始组件内部引入Context对象，Context对象中有个Provider属性，使用这个属性创建一个跟标签将所有子组件进行包裹，使用这个属性的value属性提供数据，后代组件就可以获取初始组件所提供的数据

7.说说你对受控组件和非受控组件的理解？应用场景？
受控组件：它的值会与React组件内部状态进行绑定，当组件状态（或该节点）的值发生变化时，该节点的值（组件状态）也会发生变化
非受控组件：它的值不会绑定到组件中的任何状态。当获取它的值时可以先获取这个节点，然后获取节点的value
应用场景
From表单、文本框内容的获取

8.说说Connect组件的原理是什么？
Connect组件，能够帮助我们将React和Redux进行链接，他会在组件外层包裹一个provider，将Redux中store里面的state传递给后代组件，Connect会接收Redux中state数据通过第一个参数将数据返回给第二次回调所传入的组件，在组件中使用props可以进行接收。Connect第二个参数，则是接收并返回一个dispatch方法用于对Redux的数据修改

9.说说react 中jsx语法糖的本质？
优点：
1、直观：声明式创建界面的直观
2、灵活：代码实现动态创建界面的灵活
3、学习成本：不需要学习新的模板语言
JSX语法中包含了所有JS语法，本质并没有什么不同。是createElement的语法糖能够将JSX代码交给Babel进行转义然后由React去创建一个虚拟DOM去渲染
简单讲就是代替了 React 中的 React.createElement 函数，降低了学习成本

10.说说你对redux中间件的理解？常用的中间件有哪些？实现原理？
Redux中间件，是介于系统软件和应用软件之间的一个插件，其作用是链接应用系统和软件系统让他们内部的数据能够共享
常用的中间件：
Redux-thunk，处理异步操作
Redux-logger，记录日志
等

11.说说AMD、CMD、commonJS模块化规范的区别？
common JS部署在后端，使用同步加载的模式，将所存储的数据放入服务器，在服务端，模块文件都存放在本地磁盘，读取非常快，所以这样做不会有问题。但是在浏览器端，限于网络原因，更合理的方案是使用异步加载。
AMD异步方式加载模块，模块的加载不影响它后面语句的运行。在初始化模块的数组中将所有模块一次加载完毕。会浪费部分性能，因为是一次全部加载，并不会考虑是否用得到
CMD是另一种js模块化方案，它与AMD很类似，不同点在于：AMD推崇依赖前置、提前执行，CMD推崇依赖就近、延迟执行。在拥戴该模块时在进行加载

12.说说package.json中版本号的规则？
版本号分为主版本号·次版本号·修订版本号·时间日期版本号四种
主版本号：表示是否有不兼容上一个大版本的更新
次版本号：表示的是是否有新的功能更新，能够向后面的版本号兼容
修订版本号：表示是否有Bug的修复，能够向后面的版本兼容

13.说说React jsx转换成真实DOM的过程？
简单来讲：react中的jsx语法会通过babel转化为 js代码，以React.createElement函数形式存在，createElement函数返回一个ReactElement函数，ReactElement函数返回一个的虚拟节点，虚拟节点中嵌套虚拟节点，就形成了虚拟DOM，最后通过ReactDOM.render方法转化为真实DOM。

14.说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？
React-redux是React的状态管理仓库，能够存储、提供不同组件所需要相同的状态。可以实现对这些状态的统一管理。通过getState、dispatch、subScribe三个函数获取、修改、监听React-Redux中的状态
@Reduxjs/toolkit 是对React-Redux的二次封装，能够使store的创建，更新变得更加简单

15.React render方法的原理，在什么时候会触发？
类组件中render函数指的就是render方法；而在函数组件中，指的就是整个函数组件。在render过程中，React 将新调用的 render函数返回的树与旧版本的树进行比较，这一步是决定如何更新 DOM 的必要步骤，然后进行 diff 比较，更新 DOM树
触发时机
类组件调用 setState 修改状态
函数组件通过useState hook修改状态
总结
在React 中，类组件只要执行了 setState 方法，就一定会触发 render 函数执行，函数组件使用useState更改状态不一定导致重新render。
组件的props 改变了，不一定触发 render 函数的执行，但是如果 props 的值来自于父组件或者祖先组件的 state在这种情况下，父组件或者祖先组件的 state 发生了改变，就会导致子组件的重新渲染

16.React性能优化的手段有哪些？
shodComponentUpdate：一般不推荐在这个生命周期内部进行state和props的深层对比，因为会浪费性能
PureComponent
React.Memo
循环便利DOM时加key值
避免使用内联样式
懒加载

17.如何通过原生js实现一个节流函数和防抖函数？
节流：是在一定时间内只触发一次。可以在该事件内部设一个标识符flag触发后设置一个定时器，在首次触发该事件后将flag的值变为false，通过判断flag决定是否执行该事件，若flag为false不对该事件做任何处理，在定时器结束后将flag设置为true，表示可以再次触发该事件
防抖：是触发一次后不会再次触发该事件，设置标识符flag为true，第一次执行后设置定时器，并将flag设为false。通过判断flag决定是否执行该事件，若flag为false不对该事件做任何处理。在定时器结束后将flag设为true

18.说说你对koa中洋葱模型的理解？
Koa洋葱模型是以next() 函数为分界，先执行request的代码逻辑，然后执行response的代码逻辑。每一个请求都有两次执行时机，每一层都是一个中间件，可以将不同请求之间的链接变得简单。

19.说说如何借助webpack来优化前端性能？
Html代码压缩
Css代码压缩
Js代码压缩
图像压缩
代码分离
内联Thunk
WebPack 是一个模块打包工具，可以使用WebPack管理模块，并分析模块间的依赖关系，最终编绎输出模块为HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。
对于不同类型的资源，webpack有对应的模块加载器loader

20.说说你对webSocket的理解？
webSocket是网络传输协议位于应用层。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。