斌の顶级理解

React基础

1.jsx语法规则:

1. 定义虚拟DOM时，不要写引号。
2. 标签中混入JS表达式时要用{}。
3. 样式的类名指定不要用class，要用className。
4. 内联样式，要用style={{key : value}}的形式去写。
5. 只有一个根标签
6. 标签必须闭合
7. 标签首字母
   (1). 若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
   (2). 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

2.函数式组件

1
2
3
4
5
6

//1.创建函数式组件function 
Demo(){
  return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
//2.渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById( 'test' ))

在 HTTP 协议下，数据是明文传输，传输过程中网络嗅探可直接获取其中的数据。 如用户的密码和信用卡相关的资料，一旦被中间人获取，会给用户带来极大的安全隐患。另一方面在非加密的传输过程中，攻击者可更改数据或插入恶意的代码等。那么前端加密的意义: 即在数据发送前将数据进行哈希或使用公钥加密。如果数据被中间人获取，拿到的则不再是明文。当然还有其他一些优点:例如避免后端等打印日志直接暴露明文密码,还可以避免明文撞库等。

前端加密的几种做法

• JavaScript 加密后传输
• 浏览器插件内进行加密传输 (这个用得不是很多,这里暂不细究)
• Https 传输

分类

常见加密方式分为以下两类：

tcp一直以来是http协议的基础，但是从http3.0开始，tcp协议被彻底弃用了。主要因为tcp协议存在以下几个问题：

1. tcp在传输过程中，会把数据拆分成一个个按照顺序排列的数据包，这些数据包在传输到接收端之后，接收端再按照顺序，将这些数据包组成一个原始数据，这样就完成了数据传输。但如果其中一个数据包没有按照顺序到达的话，接收方会一直等待数据包的返回，这个时候会阻塞后续的请求。这种情况就发生了TCP队头阻塞的问题。而且在http2中引入了多路复用的技术，多个请求是基于一个TCP连接的，影响面积更大。

2. TCP的可靠连接是基于三次握手和四次挥手实现的，三次握手的过程是有时间消耗的，TCP的三次握手是客户端和服务端之间需要有三次交互，需要消耗额外1.5RTT，客户端和服务端比较远的情况下，如果一个RTT达到300~400ms，那么握手的过程就显得很慢了。

TCP一直存在着如上两个无法解决的问题，于是http3.0彻底弃用了TCP，基于UDP + Diffie-Hellman算法实现了QUIC协议，这个协议不仅可以提供像TCP一样的可靠性，还能实现快速握手，也不会发生队头阻塞的问题.

QUIC 的加密协议采用了 TLS 协议的最新版本 TLS 1.3，相对之前的 TLS 1.1-1.2，TLS1.3 允许客户端无需等待 TLS 握手完成就开始发送应用程序数据的操作，可以支持1 RTT 和 0 RTT，从而达到快速建立连接的效果。

HTTP/2.0 虽然解决了队头阻塞问题，但是其建立的连接还是基于 TCP，无法解决请求阻塞问题。

1、什么是虚拟dom

虚拟dom本质上是javascript对象，是对真实dom的抽象，状态变更时记录新树和旧树的差异，最后把差异更新到真正的dom当中。虚拟dom的作用，是使用原生js或者jquery写页面时，操作dom是一件非常麻烦的事情，往往是dom标签和js逻辑同时写在js文件里，数据交互时，还要写很多的隐藏语，如果没有好的代码规范的话，会显得代码非常臃杂混乱，耦合性很高，而且难以维护；另一方面，浏览器在一遍又一遍渲染dom，是非常消耗性能的，常常会出现页面卡死的情况，所以尽量减少对dom的操作，成为优化前端性能 的必要手段。vdom其实就是将dom的对比，放在了js层，通过对比不同之处来选择渲染dom节点，从而提高了渲染效率。

2、虚拟dom优缺点

1. 优点

保证性能下限，虚拟dom可以经过diff算法找出最小差异，然后批量进行patch。这种操作虽然比不上手动优化，但是比起粗暴的dom操作，性能要好得多。虚拟dom的diff和patch算法，patch都是在一次更新中自动进行的，无需手动操作dom，极大提高了开发效率。另外虚拟dom是是跨平台的，本质上是javascript环境，而dom与平台强相关，相比之下虚拟dom可以更方便进行跨平台操作，例如服务端的渲染、移动端开发等。

1、D2Admin

D2Admin是一个完全 开源免费 的企业中后台产品前端集成方案，使用最新的前端技术栈，小于 60kb 的本地首屏 js 加载，已经做好大部分项目前期准备工作，并且带有大量示例代码，助力管理系统快速开发。

2、vue-element-admin

vue-element-admin是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

3、Vue-Vben-Admin

在真实的企业级开发中，Element Plus 内置的图标通常很难满足业务需求，项目中需要引入大量的 SVG 图标资源，本文描述如何在 Vue3 + Vite2 环境中使用 SVG 图标，封装一个支持本地 SVG 图标和在线 SVG 图标的组件 svg-icon。

1 创建组件

在 src/components/ 目录下创建目录 svg-icon，该在目录中创建 svg-icon 组件 index.vue。

1.1 输入属性

该组件需要两个输入属性（props）：

微前端已经是一个非常成熟的领域了，但开发者不管采用哪个现有方案，在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题，或无法提供支持。本文提供一种基于 iframe 的全新的微前端方案，完善地解决了这些核心诉求。

目前较成熟的微前方案有 qiankun、micro-app、EMP 方案，下面分别分析这三个微前端方案：

qiankun 方案

qiankun 方案是基于 single-spa 的微前端方案。

特点

npm install 时报错 gyp ERR! stack Error : can’t find python executable “python”,you can set the PYTHON env variable.解决办法

1.vue中安装node-sass

1

npm install node-sass --save-dev

2.管理员模式下

1

npm install --global --production windows-build-tools

转载自 前端代码规范