# Learning SolidJS (December 19, 2022)
[The New Solid Docs](https://docs.solidjs.com/) 别说没有中文翻译了，甚至有的链接打开都还暂时404，官方说这是因为这个文档是不依赖老文档[直接新建的一个项目](https://docs.solidjs.com/#how-were-approaching-new-docs)
新文档遵循了一个 [Diataxis](https://diataxis.fr/) 原则：
+ guide部分包括
- 项目导向的教程
- 基于topic的指南
+ reference部分不仅是API reference，还应该有explanations
我个人是很赞成项目导向的，对没基础的人这可以很激发热情，对有基础的人可以很快上手而且和别的框架对比。对于这个explanation，[官方](https://diataxis.fr/explanation/#explanation-and-understanding)是这么解释的：
> 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`，后面又[解释](https://docs.solidjs.com/guides/tutorials/getting-started-with-solid/building-ui-with-components#what-is-jsx)了，好像除了文件后缀是jsx，这种返回值的类型也叫`JSX`
+ 后面提到了`title-cased`是为了让JSX分辨组件和原生的HTML元素
注意到JSX中`style`是可以传一个js对象的：
```jsx
Hello {name}!
;
```
传值用的时单大括号，和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
- HTML-first: [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/), [Marko](https://markojs.com/)
- JavaScript-first: [JSX](https://facebook.github.io/jsx/)
**在 **[**Read more about the compiler**](https://docs.solidjs.com/guides/tutorials/getting-started-with-solid/building-ui-with-components#jsx-is-compiled)** 中：**
> 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](https://dev.to/this-is-learning/a-look-at-compilation-in-javascript-frameworks-3caj) by the creator of Solid.
>
下面的笔记关于这篇Solid之父的文章。
早在2017年，就有人[预言](https://tomdale.net/2017/09/compilers-are-the-new-frameworks/)Web的未来是编译。
[To offer better developer experience, you end up creating a language. A language needs a compiler. A compiler eventually wants a language server.](https://dev.to/dx/language-servers-are-the-new-frameworks-1lbm)
提高做某件事的效率的方法之一就是为其设计专门的语言。
> [Svelte](https://svelte.dev/) separates its code between create and update lifecycles. [Solid](https://github.com/solidjs/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](https://dev.to/webreflection)'s [uhtml](https://github.com/WebReflection/uhtml) and [Lit](https://lit.dev/).
>
Solid的组件的代码只运行一次，相同的组件会重用这部分代码。这可能是Solid比Svelte快的地方。
现在的编译型模板语言也还是免不了运行时。