【整理一】

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

React是一个前端js框架
React高效灵活
声明式设计，使用简单
组件式开发，提高代码的复用率
单向的数据绑定比双向的数据绑定更加安全

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

1)Diff算法是虚拟DOM的一个必然结果，它是通过新旧DOM的对比，

将在不更新页面的情况下，将需要内容局部更新
2)Diff算法遵循深度优先，同层比较的原则
3)可以使用key值，可以更加准确的找到DOM节点
react中diff算法主要遵循三个层级的策略：
tree层级
conponent 层级
element 层级
tree层不会做任何修改，如果有不一样，直接删除创建
component层从父级往子集查找，如果发现不一致，直接删除创建
element层有key值做比较，如果发现key值可以复用的话，就会将位置进行移动，如果没有，则执行删除创建

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

挂载卸载过程
constructor，完成了React数据的初始化；
componentWillMount，组件初始化数据后，未渲染DOM前；
componentDidMount，组件第一次渲染完成，dom节点已经生成；
componentWillUnmount，组件的卸载和数据的销毁。
更新过程
componentWillReceiveProps (nextProps)，父组件改变后的props需要重新渲染组件时；
shouldComponentUpdate(nextProps,nextState)，主要用于性能优化(部分更新)，
因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候不需要所有子组件都跟着重新渲染，
然后return false就可以阻止组件的更新；
componentWillUpdate (nextProps,nextState)，shouldComponentUpdate返回true后，
组件进入重新渲染的流程；
componentDidUpdate(prevProps,prevState)，组件更新完毕后触发；
render()，渲染时触发

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

1)虚拟DOM本质上是一个Object类型的对象
2)虚拟DOM比较轻，真实DOM比较重，虚拟DOM是React内部使用，虚拟DOM不需要真实DOM上那么多的属性
3)虚拟DOM最终回被React渲染到页面上

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

1)hook是React新增的一个特性
2)Hook主要解决了函数组件没有生命周期，没有状态，一些自身逻辑的问题，还有提高的代码的复用率
3)Hook的一些方法：useState(),useRef(),useCallBack(),useReduer(),useEffect()

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

React组件之间如何通信
1）父组件向子组件传递：
父组件在调用子组件的时候，在子组件标签内传递参数，子组件通过props属性就能接收父组件传递过来的参数
2）子组件向父组件传递：
父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值
3）兄弟组件之间的通信：
父组件作为中间层来实现数据的互通，通过使用父组件传递
4）父组件向后代组件传递：
使用context提供了组件之间通讯的一种方式，可以共享数据，其他数据都能读取对应的数据
通过使用React.createContext创建一个context；
context创建成功后，其下存在Provider组件用于创建数据源，Consumer组件用于接收数据
Provider组件通过value属性用于给后代组件传递数据
如果想要获取Provider传递的数据，可以通过Consumer组件或者或者使用contextType属性接收
5）非关系组件传递：
将数据进行一个全局资源管理，从而实现通信

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

1)受控组件：指的是这个值受到setState()的影响，当页面刷新时，它会根据是值是否变化进行刷新
2)非受控组件：指的是不受setState()的影响，像input框中的值，只取决于本身DOM节点的值，从新属性是值不发生变化

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

connect 的第一个参数是 mapStateToProps
这个函数允许我们将 store 中的数据作为 props 绑定到组件上
connect 的第二个参数是 mapDispatchToProps
由于更改数据必须要触发action, 因此在这里的主要功能是将 action 作为props 绑定到 组件上
Provider就是react-redux中的一个组件, Provider 做的事情也简单, 它就是一个容器组件, 会把嵌套的内容原封不动作为自己的子组件渲染出来. 它还会把外界传给它的 props.store 放到 context

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

1)Jsx它是一种语法规范
2)在创建虚拟DOM不能使用引号
3)标签必须是闭合的
4)如果混入js语法就要使用{}
5)内联样式：style={{}}
6)注意标签首字母
7)里面class类名写成className

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

1)中间件（Middleware）在计算机中，是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的
2)redux-thunk：用于异步操作
3)redux-logger：用于日志记录
4)redux中间件就是辅助redux不能完成的功能
5)applayMiddleWare()
6)将它包裹在要使用的插件外部

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

1)第一部分为主版本号，变化了表示有了一个不兼容上个版本的大更改
2)第二部分为次版本号，变化了表示增加了新功能，并且可以向后兼容。
3)第三部分为修订版本号，变化了表示有bug修复，并且可以向后兼容。
4)第四部分为日期版本号加希腊字母版本号，希腊字母版本号共有五种，分别为base、alpha、beta 、RC 、 release

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

使用React.createElement或JSX编写React组件，实际上所有的 JSX 代码最后都会转换成React.createElement(...) ，Babel帮助我们完成了这个转换的过程。
createElement函数对key和ref等特殊的props进行处理，并获取defaultProps对默认props进行赋值，并且对传入的孩子节点进行处理，最终构造成一个虚拟DOM对象
ReactDOM.render将生成好的虚拟DOM渲染到指定容器上，其中采用了批处理、事务等机制并且对特定浏览器进行了性能优化，最终转换为真实DOM

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

reduxjs/toolkit：
Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式，使用 Redux Toolkit 都可以优化你的代码，使其更可维护
react-redux：
react官方推出的redux绑定库，react-redux将所有组件分为两大类：UI组件和容器组件，其中所有容器组件包裹着UI组件，构成父子关系。容器组件负责和redux交互，里面使用redux API函数，UI组件负责页面渲染，不使用任何redux API。容器组件会给UI组件传递redux中保存对的状态和操作状态的方法

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

原理：
在类组件中render函数指的就是render方法；而在函数组件中，指的就是整个函数组件
render函数中的jsx语句会被编译成我们熟悉的js代码，在render过程中，react将新调用的render函
数返回的树与旧版本的树进行比较，这一步是决定如何更新 DOM 的必要步骤，然后进行 diff 比
较，更新dom树
触发时机：
类组件调用 setState 修改状态
函数组件通过useState hook修改状态
一旦执行了setState就会执行render方法，useState 会判断当前值有无发生改变确定是否执行
render方法，一旦父组件发生渲染，子组件也会渲染

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

1）避免使用内联函数
2）使用react fragement 避免额外标记
3）immutable，减少渲染的次数，为了避免重复渲染，会在shouldComponentUpdate()中做对
比，当返回true，执行render方法。immutable通过is方法完成对比
4）懒加载组件
5）事件绑定方式（在constructor中使用bind绑定性能更高）
6）服务端渲染
7）组件拆分，合理使用hooks

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

防抖：

const debounce = (func, wait = 50) => {
  let timer = 0
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

节流：

export const throttle = function (fn, wait = 500) {
  let flg = true
  return function () {
    if (!flg) return;
    flg = false
    setTimeout(() => {
      fn.apply(this, arguments)
      flg = true
    }, wait);
  }
}

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

Koa是一个精简的node框架，被认为是第二代Node框架，其最大的特点就是独特的中间件流程控制，是一个典型的洋葱模型，它的核心工作包括下面两个方面：
将node原生的req和res封装成为一个context对象。
基于async/await的中间件洋葱模型机制。

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

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

JS代码压缩
CSS代码压缩
Html文件代码压缩
文件大小压缩
图片压缩
Tree Shaking
代码分离
内联 chunk

20.说说你对webSocket的理解？

WebSocket，是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通迅
客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输
较少的控制开销：数据包头部协议较小，不同于http每次请求需要携带完整的头部
更强的实时性：相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少
保持创连接状态：创建通信后，可省略状态信息，不同于HTTP每次请求需要携带身份验证
更好的二进制支持：定义了二进制帧，更好处理二进制内容
支持扩展：用户可以扩展websocket协议、实现部分自定义的子协议
更好的压缩效果：Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率