Nevermind

SolidJS：一个真正具有响应性的 JavaScript 框架

5 min

1. 前端框架的“圣杯”：性能与体验

自 React 推广虚拟 DOM (Virtual DOM) 以来，VDOM 似乎成了现代前端框架的标配。它通过在内存中维护一个虚拟的 UI 表示，并通过 diff 算法来计算最小化的 DOM 更新，从而提升了开发体验和大多数场景下的性能。

但 VDOM 并非没有代价。它本身需要占用内存，diff 过程也需要计算成本。一个问题随之而来：我们能否绕过 VDOM，直接将状态变更精确地更新到 DOM 上，同时还保持声明式的、类似 React 的开发体验？

SolidJS 给出了它的答案。

2. SolidJS 的核心：细粒度响应式 (Fine-Grained Reactivity)

SolidJS 是一个声明式的、响应式的 JavaScript 框架。它虽然使用 JSX，看起来和 React 非常相似，但其底层原理完全不同。

SolidJS 的编译器会将你的 JSX 代码转换为最优的原生 DOM 操作。它不使用 VDOM，而是建立了一个由响应式“信号” (Signals) 组成的依赖图。当一个信号的值发生变化时，只有订阅了这个信号的“效果” (Effects) 或计算（Memos）会重新执行。

一个颠覆性的心智模型：组件只运行一次！

在 React 中，当 state 或 props 变化时，整个组件函数会重新执行。但在 SolidJS 中，你的组件函数 从头到尾只会运行一次。

import { createSignal } from 'solid-js';

function Counter() {
  console.log('Component function runs!'); // 这句话只会在组件挂载时打印一次

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

  const increment = () => setCount(count() + 1);

  return (
    <button type="button" onClick={increment}>
      Count: {count()}
    </button>
  );
}

当你点击按钮时，只有 count() 这个信号的读取器和依赖它的 DOM 文本节点会更新。Counter 函数本身不会再次运行。这种“外科手术式”的更新是 SolidJS 极致性能的根源。

3. 核心 API

SolidJS 的响应式系统主要由三个核心原语构成：

  • createSignal(initialValue): 创建一个响应式信号，返回一个 getter 和一个 setter。[count, setCount]
  • createEffect(() => {}): 创建一个“效果”，它会自动追踪其内部读取的所有信号，并在任何一个信号变化时重新执行。非常适合用来执行副作用，如手动操作 DOM。
  • createMemo(() => {}): 创建一个缓存的、衍生的计算值。只有当其内部依赖的信号变化时，它才会重新计算。
import { createSignal, createEffect } from 'solid-js';

function App() {
  const [firstName, setFirstName] = createSignal('John');
  const [lastName, setLastName] = createSignal('Smith');

  // createEffect 会在 firstName 或 lastName 变化时自动运行
  createEffect(() => {
    console.log(`Full name: ${firstName()} ${lastName()}`);
  });

  // ...
}

4. 为什么选择 SolidJS？

  • 极致的性能: 在各种独立的性能测试中，SolidJS 常常名列前茅，其性能与原生 JavaScript 代码非常接近。
  • 极小的包体积: 由于没有 VDOM 运行时，其核心包非常小。
  • 熟悉的开发体验: 如果你熟悉 React Hooks，你可以很快上手 SolidJS。JSX 和响应式原语的组合既强大又直观。
  • 真正的响应式: 它的模型更接近于 MobX 或 Vue 的 Composition API，但通过编译器实现了零运行时代价。

结论

SolidJS 代表了前端框架演进的一个重要方向：即通过编译器在构建时做更多的工作，来实现更少的运行时代码和更高的性能。它向我们证明了，在不牺牲声明式开发体验的前提下，完全可以摆脱虚拟 DOM 的束缚。对于追求极致性能的应用，SolidJS 提供了一个极具吸引力的选择。

SolidJS Framework Reactivity Performance