SolidJS是一个声明式 UI 库，用于构建 Web 应用程序，类似于 React、Angular 或 Vue。它采用高效的细粒度响应式设计（不使用虚拟 DOM）、临时组件模型，并充分利用了 JavaScript（TypeScript）和 JSX 的表达能力。虽然目前市场上很少有人会专门寻找新的 JavaScript UI 库，但 SolidJS 却非常出色，在同类产品中脱颖而出。以下五个理由足以让你了解 SolidJS。
JS框架基准测试（2020年2月）
这话说得有点大胆，当然，某些小型实验性渲染器在某些情况下确实能取得更好的成绩，但Solid才是真正的基准测试之王。它已经连续一年多稳居JS框架基准测试榜首，与最优化的手写纯JavaScript实现不相上下。这甚至超越了速度最快的底层WebAssembly实现，而这还是在一个声明式UI库的情况下。
我知道你现在肯定在想：那____呢？去看看吧，大家都在那里。Solid 的性能超越了 Inferno、LitHTML、Svelte、Vue 3.0、React 和 Angular。
WASM-bindgen你说的都行。（编辑：原始命令式 WASM 现在难分伯仲）
想了解 Web 组件吗？根据《创建 Web 组件的所有方法》一书，它也是速度最快的。
Solid 现在在服务器端的速度也是最快的。使用同构 UI 基准测试，它已经遥遥领先于其他竞争对手。
再次看看我们是如何编写出速度最快的 JavaScript UI 框架的
实际演示初始 JS 包大小
虽然在玩具演示和基准测试中，由于所有操作都在单个组件内完成，SolidJS 的体积优势可能不及 Svelte，但在实际应用中，SolidJS 的组件开销几乎为零（更像是虚拟 DOM 库而非响应式库）。因此，它的扩展性非常出色。例如，SolidJS 目前是著名的Realworld Demo的最小实现版本，其初始 JS 有效负载仅为 11.1kb。该实现充分利用了 Context API 和 Suspense，没有遗漏任何功能。相比之下，Svelte 的版本体积为 14.8kb，比 SolidJS 大 33%。SolidJS 的编译器在处理 tree shaking 方面表现出色，其代码库基于与渲染器相同的强大原语构建，使得运行时体积小巧且完全可扩展。
Solid 应用使用 JavaScript（TypeScript）和 JSX 构建。编译器只优化 JSX，其他部分则不做优化。这意味着您可以完全掌控这门语言。您不必局限于预制的辅助函数和指令来控制视图的渲染方式（尽管 Solid 也提供了一些）。您无法重写v-for组件的编写方式。虽然可以编写自定义指令或预编译器钩子，但在 Solid 中，它们只是另一个组件。如果您不喜欢现有的<For>实现方式，可以自己编写。Solid 的渲染器基于与最终用户在其应用程序中使用的相同的响应式原语构建。
Solid 的响应式基元在渲染系统之外管理自身的生命周期。这意味着它们可以组合成高阶钩子，用于创建自定义组件和存储机制。无论是在局部作用域还是从全局存储中获取数据，其行为都完全一致。
Solid 仍然将自身定位为一个库而非框架，因此你无法在它中找到 Angular 中的所有功能。然而，Solid 支持大多数 React 特性，例如 Fragments、Portal、Context、Suspense、错误边界、Lazy Components、异步和并发渲染、隐式事件委托、SSR 和 Hydration（尽管目前 Next.js 还没有对应的功能）。它还支持一些 React 尚未支持的功能，例如使用 Suspense 进行异步数据加载，以及使用 Suspense 进行流式 SSR。
鉴于上述原因，Solid 基于响应式框架，因此开发这些更高级的功能相对容易。而像 Preact 和 Inferno 这样的 React 克隆库则需要对其虚拟 DOM 核心进行重大修改才能实现相同的功能，因此开发过程要漫长得多。对于 React 在实验中探索的新方向，Solid 也同样适用，因为异步渲染和多根渲染在 Solid 中都轻而易举。总的来说，Solid 的方法使其能够轻松适应各种需求，因为它将开发细粒度控制在一定范围内，因此可以根据需要应用类似虚拟 DOM 库的差异比较功能，而不会在不需要的地方进行重复操作。
import { createSignal, onCleanup } from "solid-js";
import { render } from "solid-js/web";
const CounterComponent = () => {
const [count, setCount] = createSignal(0),
timer = setInterval(() => setCount(c => c + 1), 1000);
onCleanup(() => clearInterval(timer));
return <div>{count()}</div>;
};
render(() => <CounterComponent />, document.getElementById("app"));
虽然新的 UI 库理应脱颖而出，打破常规，但 Solid 在 API 和开发者体验方面并没有什么特别之处。如果你之前使用过 React Hooks，Solid 对你来说应该非常自然。事实上，由于 Solid 的模型更简洁，没有 Hook 规则，因此使用起来更加自然。每个组件只执行一次，而 Hook 和绑定会随着依赖项的更新而多次执行。
Solid 遵循与 React 相同的理念，采用单向数据流、读写隔离和不可变接口。它只是实现方式完全不同，放弃了使用虚拟 DOM。
这可不是浪得虚名。Solid 已经开发了四年多，但在社区和生态系统方面仍处于起步阶段。我希望您也认同它蕴藏着巨大的潜力。在竞争激烈的市场中脱颖而出总是很困难，对于 Solid 来说更是如此，因为它表面上看起来并不特别。但我希望这篇文章能让您深入了解为什么SolidJS是您从未听说过的最佳 JavaScript UI 库。
请在Github上查看：
Solid 是一个用于创建用户界面的声明式 JavaScript 库。它不使用虚拟 DOM，而是将模板编译成真实的 DOM 节点，并通过细粒度的响应来更新这些节点。您可以声明并在整个应用程序中使用它的状态，当某个状态发生变化时，只有依赖于该状态的代码才会重新运行。
import { createSignal } from "solid-js";
import { render } from "solid-js/web";
function Counter() {
const [count, setCount] = createSignal(0);
const doubleCount = () => count() * 2;
console.log("The body of the function runs once...");
return (
<>
<button onClick={() => setCount(c => c + 1)}>
{doubleCount(…