- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章简单、好懂的Svelte实现原理由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
大家好,我卡颂.
Svelte问世很久了,一直想写一篇好懂的原理分析文章,拖了这么久终于写了.
本文会围绕一张流程图和两个Demo讲解,正确的食用方式是用电脑打开本文,跟着流程图、Demo一边看、一边敲、一边学.
让我么开始吧.
Svelte的实现原理如图:
图中Component是开发者编写的组件,内部虚线部分是由Svelte编译器编译而成的。图中的各个箭头是运行时的工作流程.
首先来看编译时,考虑如下App组件代码:
完整代码见Demo1 repl[1] 。
浏览器会显示:
这段代码经由编译器编译后产生如下代码,包括三部分:
首先来看create_fragment方法,他是编译器根据App的UI编译而成,提供该组件与浏览器交互的方法,在上述编译结果中,包含3个方法:
insert方法会调用target.insertBefore:
detach方法会调用parentNode.removeChild:
仔细观察流程图,会发现App组件编译的产物没有图中fragment内的p方法.
这是因为App没有「变化状态」的逻辑,所以相应方法不会出现在编译产物中.
可以发现,create_fragment返回的c、m方法用于组件首次渲染。那么是谁调用这些方法呢?
每个组件对应一个继承自SvelteComponent的class,实例化时会调用init方法完成组件初始化,create_fragment会在init中调用:
总结一下,流程图中虚线部分在Demo1中的编译结果为:
现在修改Demo,增加update方法,为H1绑定点击事件,点击后count改变:
完整代码见Demo2 repl[2] 。
编译产物发生变化,ctx的变化如下:
count从module顶层的声明语句变为instance方法内的变量。之所以产生如此变化是因为App可以实例化多个:
当count不可变时,所有App可以复用同一个count。但是当count可变时,根据不同App被点击次数不同,页面可能渲染为:
所以每个App需要有独立的上下文保存count,这就是instance方法的意义。推广来说,Svelte编译器会追踪<script>内所有变量声明:
一旦发现,就会将该变量提取到instance中,instance执行后的返回值就是组件对应ctx.
同时,如果执行如上操作的语句可以通过模版被引用,则该语句会被$$invalidate包裹.
在Demo2中,update方法满足:
所以编译后的update内改变count的语句被$$invalidate方法包裹:
从流程图可知,$$invalidate方法会执行如下操作:
p方法是Demo2中新的编译产物,除了p之外,create_fragment已有的方法也产生相应变化:
p方法会执行$$invalidate中标记为dirty的项对应的更新函数.
在Demo2中,App UI中只引用了状态count,所以update方法中只有一个if语句,如果UI中引用了多个状态,则p方法中也会包含多个if语句:
对应p方法包含多个if语句:
Demo2完整的更新步骤如下:
Svelte的完整工作流程会复杂的多,但是核心实现便是如此.
我们可以直观的感受到,借由模版语法的约束,经过编译优化,可以直接建立「状态与要改变的DOM节点的对应关系」.
在Demo2中,状态count的变化直接对应p方法中一个if语句,使得Svelte执行「细粒度的更新」时对比使用虚拟DOM的框架更有性能优势.
上述性能分析中第四行「select row」就是一个「细粒度的更新」。想比较之下,React(倒数第三列)性能就差很多.
[1]Demo1 repl
https://svelte.dev/repl/9945d189204a4168b4c23890f1d92a3a?version=3.19.1[2]Demo2 repl
https://svelte.dev/repl/bf22a31a0eff4875b5b3084aa2b85fc3?version=3.19.1 。
原文链接:https://mp.weixin.qq.com/s/6nS6jI-1Q0BOkxEQ1HmD_A 。
最后此篇关于简单、好懂的Svelte实现原理的文章就讲到这里了,如果你想了解更多关于简单、好懂的Svelte实现原理的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我看了你的文章 https://svelte.dev/blog/virtual-dom-is-pure-overhead和其他一些博客,但它们解释了与虚拟 dom 相比,svelte 如何更好。而我想
我正在尝试制作一个 Svelte 应用程序,其中我有一个创建 audioSource 并管理它的类(不是 svelte 组件)。 我想跨多个组件获取此类实例。 现在,我发现的唯一方法是这样做:
我有一个案例,我打开了两个选项卡 localhost:5000/和localhost:5000/stream并想更新 / 中的变量路径并查看 stream 中的更改实时路径。存储不是这样工作的,如果我
我正在尝试创建一个带有客户端文件输入的网站,其中一些数据完全在客户端上处理,并且不会发送到服务器。 我有以下 Svelte 组件 (App.svelte): let data; function h
我正在尝试创建一个带有客户端文件输入的网站,其中一些数据完全在客户端上处理,并且不会发送到服务器。 我有以下 Svelte 组件 (App.svelte): let data; function h
我正在研究 Svelte,并从其 Github 存储库中克隆了它。我可以从站点目录运行 REPL,但它使用来自 unpkg url 的 Svelte。我想尝试我本地构建的编译器并使用它而不是 unpk
我想将样式添加到 在纤细路由中标记,但我不能。 我试图添加一个有一些样式的类,但它没有用。 该类包含: .link { text-decoration: none; } 有没有人对此有解决方案
目前,当我在浏览器中打开开发人员工具时,我可以看到我的原始 svelte 组件,我想隐藏此信息并仅发送丑陋的代码。 这是我打开开发者工具时得到的。我正在构建一个单页应用程序。 这是我的 rollup.
我目前正在学习 Svelte,我想为这个副项目创建一个身份验证流程。通常,在 React 中,我习惯使用 Contexts 保存身份验证信息。 我想知道 Svelte 是否也可以执行类似的
调用 new Component({ target }) 将组件附加到目标,我想用新组件替换目标的所有旧内容。我该怎么做? 最佳答案 如果您正在混合服务器呈现的标记,最好使用 hydrate: tru
我有一个简单的 REPL example用于简单的列表详细信息编辑器。它由三个部分组成: Annotation是细节 Annotations遍历数据并创建 Annotation实例 App是创建 An
我正尝试在 Svelte 商店中维护实时股票报价,以便屏幕上的出价和要价实时更新。我不确定商店的结构如何来保持数据的 react 性和效率。数据来自 websocket,如下所示: {'symbol'
下面是一个非常简单的 Svelte 组件。 当您单击该按钮时,它会更新 pages[2].name。 Svelte 如何处理这个问题?它是否重新评估所有 3 个 DIV?或者它是否知道只修改第 3 个
我制作了一个用于输入财务数字的组件,用于我的输入表单。它现在工作得很好,除了一个奇怪的行为:当我点击输入字段时,它会按预期获得焦点,但是当它已经有焦点时点击它会带走焦点。 组件中只有一个 on:cli
我尝试实现一个自定义的 Svelte 商店,它允许我在订阅页面上“抛出”一个单一的状态对象。这是我准备的示例代码: import { derived, writable } from 'svelte/
我正在尝试安装带有 Svelte 的 Mermaid 来制作图表。所以我做了以下事情: npm 安装美人鱼 然后我得到以下内容: npm WARN svelte-app@1.0.0 No reposi
如何渲染使用 svelte.compile() 手动编译的组件?我正在编译这样的组件: import * as svelte from 'svelte/compiler'; var
我正在学习 Svelte 以及如何使用它制作自定义商店。我遇到了一个问题,当我尝试使用 update 更新可写数组时,它会在订阅该数组的组件中导致未定义的错误。 这是我的商店,我有一个简单的数组,其中
我正在尝试遍历数组以呈现具有 type 值的组件。 import One from './One.svelte'; import Two from './Two.svelte'; import
如何将数据(例如:导航栏标题)传递给父元素中使用的组件? import Nav from "../components/Nav.svelte"; let navTitle = "MyApp
我是一名优秀的程序员,十分优秀!