前端设计模式应用/相应系统与React/vite知识体系 ｜ 青训营

知识点一

前端设计模式概述/JavaScript 和前端框架中的设计模式

1.浏览器中的设计模式：单例模式、发布订阅模式

2.JavaScript中的设计模式：原型模式（复制已有对象创建新的对象）、代理模式（可自定义控制对原对象的访问方式，并允许在更新前后做一些额外处理）、迭代器模式（在不暴露数据类型的情况下访问集合中的数据）

3.前端框架中的设计模式：代理模式、组合模式

知识点二

React 的历史与应用/React 的设计思路/React （hooks）的写法与React 实现/React 状态管理库与应用级框架科普

1.React 的设计与实现（响应式系统）：

状态更新，UI自动更新；前端代码组件化，可复用，可封装；状态之间的相互依赖关系只需要声明

2.React （hooks）的写法：

3.React 状态管理库推荐：

知识点三

vite基本概要：

1. 前端工程的痛点
2. 前端构建工具的意义
3. Vite 概览
4. Vite 业界案例
5. Vite 优势

vite上手使用：

1. 项目初始化
2. 使用 Sass/Scss & CSS Modules
3. 使用静态资源
4. 生产环境 Tree Shaking

Vite 进阶路线：

1. 深入双引擎
2. Vite 插件开发
3. 代码分割(拆包)
4. JS 编译工具(Babel)
5. 语法安全降级
6. 服务端渲染(SSR)
7. 深入了解底层标准
8. Vite 社区生态

Vite3.0有那些特性：

1.模板变更

当你使用Vite创建Vue模板时候，你会发现主题与Vite的文档一致，同时扩展了暗色和亮色模式，我们知道手机一直以来都有深色模式,这无疑满足了广大用户的需求。

 2.优化

总体来说Vite3修复了400+issuse,减少了体积，冷启动的得于优化

3.CLI的更新:

执行 vite 命令进行启动项目时，终端的界面和之前会不同，只所以这样做的目的是为了避免 Vite 开发服务的端口和别的应用冲突，所以默认的端口号从之前的 3000 变成了 5173，这个解决了很多人的痛点。

4.开箱即用的 WebSocket 连接策略:

在Web IDE中需要我们手动配置 WebSocket，这样才能 使 HMR 生效，这对很多人非常不友好。目前 Vite 内置了一套更加完善的 WebSocket 连接策略，它能够自动满足更多场景的 HMR 需求。