Nevermind

SolidJS：一個真正具有響應性的 JavaScript 框架

5 分鐘

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