关于主流前端框架的本质区别 - 网站源码_资源分享

序言

前几日，StackOverflow正式发布了2021报告，Svelte做为两个非另类架构，有如神助React、Vue等为数众多后端架构，正式成为了web应用领域最畅销的架构，你听闻过Svelte吗？

111.png

从React15到17，再到将要来临的React18，再从Vue2到Vue3，会不能似曾相识后端架构产业发展博蒙阿？学不动了的觉得？

所以他们来深入探讨呵呵，那些另类架构间的差别吧

tips：责任编辑先进经验了卡颂同学在B站正式发布的音频，责任编辑正式发布已请示生前一致同意，点选查阅原音频：『货很干』另类后端架构的同时实现基本原理，懂完了你

模块化

另类后端架构都遵从模块化的合作开发商业模式，简而言之，架构合作开发的应用应用领域分成二级抽象化：

应用应用领域 => 模块 => 结点

44.png

就拿提前布局App比方说，提前布局是两个应用应用领域，那个应用应用领域由header模块、导航系统栏模块、条目模块、footer模块五个部份形成，而那些模块还能竭尽全力分拆，比如说条目模块由数个条目项模块形成，导航系统栏模块由数个导航系统模块形成，导航系统模块外部，由叙述快照的结点加之销售业务方法论形成。

这儿叙述快照的结点可能将是两个被<ul>条码包覆的<li>结点这儿的销售业务方法论是，当使用者点选<li>结点时，须要重定向到相关联的地方性，因此预览条目模块中的统计数据

归纳呵呵：架构中最轻的基层单位是结点，结点加销售业务方法论形成模块，数个模块形成应用应用领域，这是后端架构的抽象化层次分割。

所以后端架构的组织工作基本原理是甚么呢？他们能用两个式子归纳：UI = F(state)

UI – 快照state – 状况F – 架构外部的管理体制

归纳起来是：架构外部的管理体制根据状况渲染快照

说到这儿大家可能将会有疑惑，既然另类后端架构的组织工作基本原理都是一样的，那它们有甚么差别呢？

答案是：预览粒度的差别

刚才讲过，架构有二级抽象化：应用应用领域、模块、结点，同样的，另类后端架构也分成三种预览粒度，应用应用领域级，模块级，结点级，接下来他们看看那些架构外部都由哪些技术形成：

结点级预览架构：Svelte

他们从最细的粒度，结点级预览的架构Svelte开始讲起（如果想了解那个架构，能点选这儿查阅官网）

46544.png

首先定义两个计数器模块，先定义模块方法论：

定义变量count，初始值为0定义函数handleClick，每次点选时count + 1然后定义两个渲染模块的<button>结点，将点选事件绑定为<button>结点的点选回调函数最后定义两个<p>结点，内容为一段文本

经过渲染，快照上的数字初始值为0，每次点选都会加1

结点级预览架构的基本原理分成三步：将状况变化可能将导致的结点变化编译为具体方法监听状况变化当交互导致状况变化后，直接调用具体方法，改变相关联快照

在他们上面的例子中：

变量count变化可能将导致<button>结点中的文本结点发生变化，由于<p>结点不包含状况变化，所以它不能出现在编译后的update方法中（这种将状况变化可能将导致的结点变化编译为具体方法的技术，被称为预编译，网站中实际运行的代码，都是预编译之后的代码）

监听状况变化，具体方案是采用了正式发布订阅设计商业模式,当创建两个状况后，会为状况维护一张订阅了该状况变化的表,所有须要监听变化的回调函数都在表中进行了注册，这是正式发布订阅中的订阅部份

每当状况变化，会正式发布这张表，将状况变了这一消息正式发布出去，每个订阅该状况变化的回调函数都会收到通知并执行，这是正式发布订阅中正式发布的部份

通过以上这种方式，架构能对每个状况化做出反应，这种精确到状况的预览被称为细粒度预览，这也是结点级预览架构的组织工作基本原理。

应用应用领域级预览架构：React

讨论到应用应用领域级预览架构，这种架构会采用虚拟DOM的技术，他们通过 React 来举例，首先，他们用 React 重写刚才的 Counter 模块：

import React, { useState } from react;

const Counter: React.FC = () => {

const [count, setCount] = useState(0);

const handleClick = () => setCount(count + 1);

return ;

};

export default () => (

);

在父模块内使用两个 <Counter /> 子模块，这两个 Counter 子模块能独立计数

首屏渲染时，React会根据应用应用领域的树结构，生成一颗相关联的虚拟DOM树

465454.png当点选 <button> 结点后，调用handleClick，触发状况预览，react会重新生成一颗完整的虚拟DOM树关于主流前端框架的本质区别

57867.png新生成的每个结点会与之前的虚拟DOM树的同级结点进行比较，如果存在差异，记录该差异关于主流前端框架的本质区别

ghgh.png在上面的例子中，进行到左边的<Counter />模块的<button>结点时，发现前后两个button结点的内容不一致，就会记录下来，等新的虚拟DOM生成完毕后，将记录的差别统一渲染到快照上

归纳

刚才讲过，结点级预览的架构须要监听状况的变化，与结点级架构不同，应用应用领域级架构不关心是哪个状况发生了变化，应用应用领域中的任何模块中的任何两个状况变化，都会从root根结点创建一颗完整的虚拟DOM树，然后通过前后两棵虚拟DOM树的比较，找到变化的部份，最终将变化的部份预览到快照，另类的应用应用领域级预览架构是React