主流前端框架实现原理

主流前端框架都遵循组件化开发模式，根据更新粒度可以分为应用级、组件级和节点级。他们的实现原理均为UI=f(state)

即框架内部的运行机制根据状态渲染视图

应用级代表:React

组件级代表：Vue

节点级代表：Svelte、SOLID

一、 节点级更新框架原理

1. 预编译：将状态变化可能导致的节点变化编译为具体方法
2. 细腻度更新
   1. 监听状态变化：采用发布订阅者模式，创建一个状态之后，会为状态维护一张“订阅该状态变化的表”，所有需要监听该状态的函数都会在该状态表中注册，每当状态变化，都会遍历这张表。
   2. 当监听导致状态变化直接调用具体方法改变对应视图

二、 应用级更新框架原理

采用虚拟DOM技术。首屏渲染时，React会根据应用的树结构创建一颗对应的虚拟DOM树，当状态更新后，React生成一颗完整的虚拟DOM树，新生成的每个节点会与之前的虚拟DOM树的同级节点进行比较，如果存在差异，则记录该差异，然后将记录的不一致渲染到视图上。

二、 组件级更新框架原理

Vue在状态更新后，不生成整个虚拟DOM树，只生成发生改变的DOM树。

主要使用细腻度更新和虚拟DOM，Vue3中引入了预编译

参考：

『货很干』主流前端框架的实现原理，懂完了你_哔哩哔哩_bilibili