我喜欢 Solid.js 的几个原因

阿斯多姆

早期阶段！

目前支持的 API

用法

Solid 是一款非常棒的响应式声明式工具，它使用简单的响应式声明式模板来编写和操作 DOM！迄今为止，它是 Web 领域最好的组件系统。Solid 的开发体验非常棒，Ryan 对性能也一丝不苟：你会感觉自己站在巨人的肩膀上，无所不能。

原因如下。

Solid 游乐场为所有其他框架设定了新的高标准，不仅使其能够非常轻松地共享如何使用 Solid 执行操作的片段，而且还通过解释（通过其编译输出）为什么以及如何在声明式 API 干净简单的情况下实现超快的反应式模板。

Solid 的魔力就在这里，显而易见，在任何游乐场示例的可见编译输出中：

https://playground.solidjs.com

这种开放性可以让技术领域变得更好。

您在 Playground 中看到的内容不仅开放，Solid 还公开邀请响应式库开发者挑战极限：Solid 的 JSX 编译器允许响应式开发者使用自己的响应式原语来驱动 JSX 模板。这邀请任何开发者以自己的速度挑战 Solid，并为开放式创新奠定了基础。详情请见此处：

https://github.com/ryansolid/dom-expressions

Solid 有效地改变了组件世界，因为它如此开放，以至于其他框架必须适应，否则就会在创新的尘埃中落后。正如 React 的首次亮相所产生影响一样，Solid 是下一个重大举措，它将如何在不牺牲开发体验的情况下，以原始速度操作响应式声明式 UI 树。

作为不牺牲开发经验的一个例子，在 Solid 中，我们可以通过将动画值直接传递到模板中并根据需要修改任何状态来声明性地为任何内容设置动画，即使在快速动画循环中（例如游戏和其他丰富体验中的循环）。

相反，在 React 组件的动画循环中对 state 或 props 进行动画处理被认为是一种不好的做法，很容易导致性能问题。例如，react-three-fiber（使用 Three.js 渲染以实现游戏等 3D 体验的 React 组件）在其性能陷阱指南中特别提到不要这样做：

永远不要使用 setState 动画！
避免每秒 60 次强制整个组件（及其子组件）通过 React 及其 diffing 机制。

Solid 使声明式模板成为一等公民，且无需担心性能问题。以声明式编写所有内容，并保证其编译速度与原生代码相当，速度极快。在 Solid 中，您可以随心所欲地以 60fps 的速度制作动画道具！

Solid 的所有部分均可独立复用，这使得用它构建各种不同类型的项目成为可能。而且由于 Solid 的响应式系统非常简单，因此可以很容易地将任何其他状态系统挂接到 Solid 组件中。例如，Storeon 的 Solid 绑定就非常简单：

https://github.com/storeon/solidjs

相比之下，人们不能独立导入 React 的状态系统并独立使用它，并且人们通常很难将外部状态系统集成到 React 组件中（例如，只需询问 Mobx 团队他们在双重渲染时遇到了什么样的问题）。

React 除了更难实现之外，其奇怪的 Hooks 规则也让代码更加冗长、难以理解，新手经常会遇到一些意想不到的麻烦。在 React 中，你会写更多代码，但代码却越来越难以理解。

Solid 高度模块化：人们可以使用其响应式原语，无需声明式模板（例如）来创建响应式状态机，或创建响应式后端服务器，而这两者都与 UI 开发无关。这类项目只需导入诸如createSignal、createStore或 之类的 API createMutable，其他一切都无需考虑。

在 Solidity 中，DOM 是一等公民：DOM 并非隐藏在抽象的虚拟 DOM 后面，因此完全可以访问。它就是 DOM！JSX 表达式会按照你的直觉提供元素，这意味着它可以轻松地与你能想到的任何 DOM 库进行互操作。在下面的示例中，我们只需将一个由 JSX 表达式创建的 div 传递给 jQuery，而 div 模板的内容是响应式的：

// Make a reactive variable (signal):
const [count, setCount] = createSignal(0)

// Increment the count value every second:
setInterval(() => setCount(count() + 1), 1000)

// Use count in a template:
const div = <div>The count is: {count()}</div>

// The JSX expression gave us back the *real* div element,
// now we can pass it to jQuery or any other DOM API:
jQuery(div).whatever()

console.log(div instanceof HTMLDivElement) // true!

// Even compose the DOM:
const info = <section>Info: {div}</section>

console.log(info instanceof HTMLElement) // true!

你看！这个 div 就是……一个真正的 div！它就是 DOM！这让事情变得简单！这有两个好处：

1. 我们只需得到一个 div 就可以用它做任何我们想要的常规 DOM 事情。
2. 每当 count 的值发生变化时，div 的内容就会自动更新。

我们获得了两全其美的效果：DOM 和反应式声明模板，合二为一！

由于 Solid 的简单反应性和快速模板化，再加上它只是 DOM！，Solid 非常适合用于自定义元素或任何其他基于 DOM 的项目。

相比之下，LitElement 的 lit-html 模板表达式不会返回 DOM。Lit 是一个 DOM 库，但它带来的麻烦比它应有的要多。例如：

import {html} from 'lit-html';

const div = html`<div>Hello World</div>`;

console.log(div instanceof HTMLDivElement) // false!

jQuery(div).foo() // ERROR

作为 Solid 如何与 DOM 项目完美契合的一个例子，LUME Element 是一个使用反应式模板以简单、简洁的方式制作自定义元素的系统，其核心就是 Solid：

http://github.com/lume/element

这使得我们能够以原生 JS 的速度制作自定义元素，而不会牺牲体验，也不需要使用初始普通原生 JS 所需的更难维护的命令式代码。

由于底层的 Solid，LUME 的 3D Webgl 驱动的 HTML 元素简单、反应灵敏且快速（尽管是声明式编写的，因为声明式模板不应该成为性能问题！）。

以下是用 HTML 编写的 3D WebGL 场景：

https://codepen.io/trusktr/pen/dypwZNP

（LUME 仍处于 alpha 阶段，请抱怨一切。:)

简而言之：Solid 是目前在不牺牲开发体验的情况下创建可组合 UI 组件的最佳方式（不受声明式模板使用限制，没有复杂的函数作用域规则，也没有不必要的冗长代码）。对于任何了解 DOM 并希望与现有应用程序（尤其是旧版 jQuery 应用程序）集成的人来说，该 API 都非常易于使用。

所有这些都以最快的速度作为奖励！

了解 Ryan，他会让 Solid 保持性能和能力的领先地位。

喜欢 SSR 的 SEO 和快速加载功能吗？Solid 能满足您的需求。

喜欢 TypeScript 吗？Solid 满足你的需求。

喜欢编写没有构建系统的纯 HTML？Solid 可以满足您的需求！您可以使用html模板标签代替 JSX。以下是 CodePen 上的一个示例：

https://codepen.io/trusktr/pen/eYWNrMJ

import html from 'solid-js/html'
import {createSignal} from 'solid-js'

const name = createSignal('Amadar')

// It's just DOM!
const div = html`<div>Hello name is ${name}</div>`

// ... change name later ...

jQuery(div).foo() // It works!

// Even compose the DOM:
const card = html`<section>Profile: ${div}</section>`

console.log(card instanceof HTMLElement) // true!

您需要路由吗？我们提供以下服务：

https://github.com/rturnq/solid-router
https://github.com/mduclehcm/solid-router

你需要 CSS 吗？这里有：

https://github.com/solidjs/solid-styled-components
https://github.com/solidjs/solid-styled-jsx
Emotion 已移植到 Solid（链接尚不可用）

需要一种方法来启动一个 Solid 应用程序吗？那就这样吧：

https://github.com/solidjs/solid-start

实在是太好了，而且全是真的！