muspi_merol / blog / 2023-02-02

最后更新于:2023年3月7日

Learning SolidJS


The New Solid Docs 别说没有中文翻译了,甚至有的链接打开都还暂时404,官方说这是因为这个文档是不依赖老文档直接新建的一个项目

新文档遵循了一个 Diataxis 原则:

  • guide部分包括
    • 项目导向的教程
    • 基于topic的指南
  • reference部分不仅是API reference,还应该有explanations

我个人是很赞成项目导向的,对没基础的人这可以很激发热情,对有基础的人可以很快上手而且和别的框架对比。对于这个explanation,官方是这么解释的:

Explanation, unlike the other three forms of documentation, doesn’t have a direct part in a user’s practice or work. This means that it’s sometimes seen as being of lesser importance. That’s a mistake; it may be less urgent than the other three, but it’s no less important. It’s not a luxury. No practitioner of a craft can afford to be without an understanding of that craft, and needs the explanatory material that will help weave it together.

但是有一个没见过的特性:

可以选择自己由什么框架迁移到Solid,文档会在正文中时不时插入一些因框架而异的提示

一开始选错了也没关系,这个窗口会一直在侧栏可以选择~~(像我这种喜欢把每条支线都看遍的玩家就很需要)~~


刚开始就是一个 HelloWorld 组件,提到了组件名是title-cased,提到了返回值是JSX不是HTML,后面又解释了,好像除了文件后缀是jsx,这种返回值的类型也叫JSX

  • 后面提到了title-cased是为了让JSX分辨组件和原生的HTML元素

注意到JSX中style是可以传一个js对象的:

<div style={{ "background-color": "#2c4f7c", color: "#FFF" }}>Hello {name}!</div>;

传值用的时单大括号,和Svelte一样


讲到组件时,它开始提示我Solid和Svelte的区别,我点了点其它框架,发现提示有相同有不同

  • 在Svelte/Vue中存在生命周期的概念,在Solid中没有这回事:Solid’s rendering system is based on the reactive features you use
  • Solid中可以在一个文件中export多个组件
  • 在上一点中React和Solid一样(感觉从JSX就看出来Solid是跟随React的),但是 Solid component functions only run once to set up and never run again,这大概就是Solid的编译的特性了吧
  • JSX的编译:This is more involved than React’s JSX compiler, but much less involved than something like Svelte’s compiler. Solid’s compiler doesn’t touch your JavaScript, only your JSX.

Solid与Svelte

相同点

  • non-VDOM

不同点

  • HTML-first templating languages / JavaScript-first templating languages

Read more about the compiler 中:

Solid’s JSX compiler doesn’t just compile JSX to JavaScript; it also extracts reactive values (which we’ll get to later in the tutorial) and makes things more efficient along the way. This is more involved than React’s JSX compiler, but much less involved than something like Svelte’s compiler. Solid’s compiler doesn’t touch your JavaScript, only your JSX. If you’re curious about how Solid and other frameworks use compilation, check out A Look at Compilation in JavaScript Frameworks by the creator of Solid.

下面的笔记关于这篇Solid之父的文章。

早在2017年,就有人预言Web的未来是编译。

To offer better developer experience, you end up creating a language. A language needs a compiler. A compiler eventually wants a language server.

提高做某件事的效率的方法之一就是为其设计专门的语言。

Svelte separates its code between create and update lifecycles. Solid takes that one step further hoisting the DOM creation into clone-able Template elements that create whole portions of the DOM in a single call, incidentally a runtime technique used by Tagged Template Literal libraries like @webreflection’s uhtml and Lit.

Solid的组件的代码只运行一次,相同的组件会重用这部分代码。这可能是Solid比Svelte快的地方。

现在的编译型模板语言也还是免不了运行时。