js级别的差异
主要来自两个方面:hook系统(不考虑类)和ecma-ast差异hook系统。 钩子系统的api更多地用于纯函数组件注入状态和生命周期。在这两个方面,Svelte提供的解决方案是不同的。 由于预运行编译,Svelte编译器扫描所有与UI相关的状态并注入黑魔法,使得状态的使用与变量声明和赋值一样简单。 基本上,开发人员不需要太在意所谓的副作用;因此,一些钩子接口在Svelte框架上是冗余的。然而,考虑到大量的钩子接口,我们选择了内置的svelte钩子来简化转换过程中的转换逻辑。SVelte钩子是一组基于SVelte的钩子接口,通过对react钩子进行基准测试来实现,这些钩子在使用中基本相同。
<script>
import Nested from './Nested.svelte';
</script>
<style> p {
color: purple;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
} </style>
<p>These styles...</p>
<Nested/>
ecma ast差异
ecma ast difference babel提供的解析是基于estree的,但同时一些类型也在此基础上进行了改进。有关具体差异,请参阅此处的babel解析器[1]。细化的数据类型有助于我们进行转换推断,因此我们没有使用babel来提供estree插件,并且在转换之后,ast再次被平滑。 CSS转换比上述两部分的转换简单得多。React样式是标准css,Svelte样式也是标准css。但是,它将增加一定的编译能力。可以理解,它是标准css的超集,可以直接使用。然而,为了平滑jsx和Svelte html在自定义组件的类选择器中的差异,我们仍然在编译阶段进行了一些转换,这里不再展开。
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? '