跳到主要内容

Solid.js 核心指南

Solid.js 是一个声明式、高效的 JavaScript 库，用于构建用户界面。它不使用虚拟 DOM，而是通过将模板编译为真实的 DOM 节点，并使用细粒度的响应式系统来更新它们。

1. 核心哲学：无虚拟 DOM​

与 React 不同，Solid.js 没有虚拟 DOM (Virtual DOM)。

  • 编译时优化：Solid 在编译阶段将 JSX 转换为高效的 DOM 操作。
  • 运行一次：组件函数本身只在初始化时运行一次。
  • 细粒度更新：只有当状态改变时，受影响的特定 DOM 节点才会更新，而不是重新运行整个组件。

2. 响应式基础 (Primitives)​

Solid 的响应式系统由三个核心部分组成：

Signal (createSignal)​

类似于 React 的 useState，但返回的是一对 getter 和 setter。

import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);

  // 注意：count 是一个 getter 函数，必须调用它才能获取值
  return <button onClick={() => setCount(count() + 1)}>{count()}</button>;
}

Memo (createMemo)​

类似于 React 的 useMemo，用于缓存派生状态。

const doubleCount = createMemo(() => count() * 2);

Effect (createEffect)​

类似于 React 的 useEffect，用于处理副作用，但它能自动追踪依赖，无需手动提供依赖数组。

createEffect(() => {
  console.log("当前计数是:", count());
});

3. 框架对比：Solid vs React vs Vue​

特性Solid.jsReactVue 3
渲染机制直接渲染实体 DOM虚拟 DOM (VDOM)虚拟 DOM (优化版)
更新粒度细粒度 (仅更新对应节点)粗粒度 (组件树重渲染)中/细粒度 (组件内更新)
组件运行次数仅 1 次每次状态改变都运行仅 1 次 (setup)
性能接近原生 JS (极高)中等 (依赖手动优化)高
学习曲线低 (JSX 语法类似 React)中低
API 风格响应式函数 (Signals)HooksComposition API

4. 为什么选择 Solid.js？​

  1. 极致性能：在 JS Framework Benchmark 中始终名列前茅，远超 React。
  2. 预测性：没有复杂的 diffing 过程，组件不重构渲染意味着没有闭包陷阱。
  3. 开发体验：如果你喜欢 React 的 JSX 和 Hooks 逻辑，但讨厌 useEffect 的依赖数组和 useCallback 的性能心智负担，Solid 是完美的选择。
  4. 互操作性：由于它直接操作 DOM，与第三方非 React 库（如 D3, Three.js）集成更加自然。

5. 局限性​

  • 生态系统相对于 React 和 Vue 较小。
  • 不支持旧版浏览器（依赖现代 JavaScript Proxy）。
  • 响应式解构会丢失：不能直接对 props 进行解构（类似于 Vue）。

参考资源：