主流前端框架的实现原理

主流前端框架的实现原理

StackOverflow 报告 2021热门Web领域框架(前后端)排名

1. Svelte
2. ASP.NET Core
3. FastAPI
4. React.js
5. Vue

框架开发的应用抽象(3层)

应用 => 组件 => 节点

• 最小的单位是节点
• 节点+ 业务逻辑 = 组件
• 多个组件 = 应用

框架的工作原理

1. UI = f(state) // UI 是视图 state是状态 f是框架内部的运行机制
2. 框架之间的区别主要是 更新粒度的区别 应用级 > 组件级 > 节点级

节点级更新的框架主要特点

代表框架: svelte, solid.js

1. 将 状态变化 可能导致的 节点变化 编译为 具体方法 (预编译)
2. 监听状态变化(发布订阅模式)
3. 当交互导致 状态变化 直接调用 具体方法 改变对应视图 (细粒度更新)

应用级更新的框架

代表框架 React.js

1. 状态变化
2. 创建一颗***完整的虚拟DOM树***
3. 将变化的部分更新到视图

组件级更新的框架

代表框架 Vue3

• 虚拟DOM

• 预编译

• 细粒度更新

参考资料: 视频