web常见的面试题

1.说说你对react的理解？有哪些特性？
用于构建用户界面的 JavaScript 库，只提供了 UI 层面的解决方案，遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效，使用虚拟 DOM 来有效地操作 DOM，遵循从高阶组件到低阶组件的单向数据流
特性：JSX 语法，单向数据绑定，虚拟 DOM，声明式编程
2.说说Real diff算法是怎么运作的？
(1)Diff算法是虚拟DOM的一个必然结果，它是通过新旧DOM的对比，将在不更新页面的情况下，将需要内容局部更新
(2)Diff算法遵循深度优先，同层比较的原则
(3)可以使用key值，可以更加准确的找到DOM节点
react中diff算法主要遵循三个层级的策略：
tree层级
conponent 层级
element 层级
tree层不会做任何修改，如果有不一样，直接删除创建
component层从父级往子集查找，如果发现不一致，直接删除创建
element层有key值做比较，如果发现key值可以复用的话，就会将位置进行移动，如果没有，则执行删除创建

3.说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？
(1)React生命周期分为挂载阶段，更新阶段，销毁阶段
创建阶段
        constructor
        getDerivedStateFromProps
        render
        componentDidMount
更新阶段
        getDerivedStateFromProps
        shouldComponentUpdate
        render
        getSnapshotBeforeUpdate
        componentDidUpdate
销毁阶段
        componentWillUnmount

4.说说你对React中虚拟dom的理解？
 虚拟 DOM 不会进行排版与重绘操作，而真实 DOM 会频繁重排与重绘
简单方便：如果使用手动操作真实 DOM 来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难
性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能
跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行
缺点：
在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，速度比正常稍慢
5.说说你对react hook的理解？
hook是React 16.8新增的一个特性，主要解决了函数组件没有生命周期，没有状态，一些自身逻辑的问题，还有提高的代码的复用率
Hook的一些方法：useState(),useRef(),useCallBack(),useReduer(),useEffect()

6.React组件之间如何通信？
React组件之间如何通信
将数据进行一个全局资源管理，从而实现通信
父穿子：父组件在调用子组件时，把要传入的数据，写入子标签里，子标签通过porps接收
子穿父：父组件给子组件传入一个回调函数，在子组件中调用这个函数把数据带过去
兄弟传入：相邻的组件通过他们的父组件为桥梁进行通信
可以使用context状态树进行组件间的通信
还可以使用状态提升就是将多个组件需要共享的数据提升到他们最近的负组件中，父组件改变这个状态通过props分发给子组件

7.说说你对受控组件和非受控组件的理解？应用场景？
受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据
我们在输入框输入内容的时候，会发现输入的内容并无法显示出来，也就是`input`标签是一个可读的状态
如果想要解除被控制，可以为`input`标签设置`onChange`事件，输入的时候触发事件函数，在函数内部实现`state`的更新，从而导致`input`框的内容页发现改变
受控组件我们一般需要初始状态和一个状态更新事件函数
非受控组件，简单来讲，就是不受我们控制的组件
一般情况是在初始化的时候接受外部数据，然后自己在内部存储其自身状态
大部分时候推荐使用受控组件来实现表单，因为在受控组件中，表单数据由`React`组件负责处理
如果选择非受控组件的话，控制能力较弱，表单数据就由`DOM`本身处理，但更加方便快捷，代码量少

8.说说Connect组件的原理是什么？
react-redux 提供了两个重要的对象， Provider 和 connect ，前者使 React 组件可被连接（connectable），后者把 React 组件和 Redux 的 store 真正连接起来。react-redux 的文档
9.说说react 中jsx语法糖的本质？
jsx本质就是这个函数React.createElement的语法糖，所有的jsx语法都会最终经过babel.js转化成为React.createElement这个函数的函数调用

10.说说你对redux中间件的理解？常用的中间件有哪些？实现原理？
中间件（Middleware）在计算机中，是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的
redux-thunk：用于异步操作
redux-logger：用于日志记录
redux中间件就是辅助redux不能完成的功能
applayMiddleWare()
将它包裹在要使用的插件外部

12.说说package.json中版本号的规则？
>:接收高于指定版本的任何版本
>=:接收高于或者等于指定版本的任何版本
=：接收者等于指定版本的任何版本
<:接收者小于指定版本的任何版本

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.避免使用内联函数
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在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率