SolidJS——前端新秀框架，性能直逼原生JS

SolidJS 是什么？SolidJS是一個聲明式、高效且靈活用於構建用戶界面的 JavaScript 庫。 Solid 號稱擁有 JSX 語法，類似於 React hook 的語法，你可以用現代化的開發方式，獲得性能最快的代碼。

一、性能比較

原生 JS 是 1， Solid 是 1.05， 比 Svelte 也快，React 跑到了 1.93 。如圖：

二、SolidJS 特點

1. 直接使用瀏覽器的 DOM, 沒有 虛擬DOM， DOM diff 一整套算法 ，可以發現它編譯出來的代碼，他的 DOM ，是原生 DOM ，其他的語法是直接調用的，也沒有那一整套復雜的虛擬 DOM。
2. 提前編譯，按需打包 ，無論是 react 還是 vue ，不管怎么編譯，都需要引入框架本身。也就是 runtime 。而且這個體積還比較大。這些框架都采用的是用運行時方案，運行時方案相比於編譯時方案，最大的優勢是可以「幾乎沒有任何語法約束」的去完成代碼編寫。而 Solid 則預編譯，將 jsx 部分的代碼，轉換成原生的語法。
3. 響應式原理，精准更新對應的值 ，如果了解 React 的原理，就會知道，只要是 props 或者 state 改變，React 組件就會重新渲染，而每一次判斷是否會重新改變，值是否不一樣，也是一整套算法…… 而 Solid 不一樣，他另辟蹊徑，每一個組件都是一個獨立的線程，每個組件里的 createMemo 或 createEffect 里面去收集對應的依賴， 在 set 改變值后，都會重新執行這些方法。看起來就像是實時更新了一樣。

三、簡單使用

Solid 和 React Hook 代碼風格、語法極其相似。減輕了開發者學習新框架的負擔，這點還是不錯的。eg：

import { render } from "solid-js/web";
import { createSignal, createEffect, createMemo, mapArray } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);
  const increment = () => setCount(count() + 1);

  createEffect((prev) => {
    const sum = a() + b();
    if (sum !== prev) console.log(sum);
    return sum;
  }, 0);

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

render(() => <Counter />, document.getElementById("app"));

在線體驗：Playground

四、SolidJs 總結

• 直接使用瀏覽器的 DOM, 沒有虛擬DOM， DOM diff 一整套算法
• 響應式原理，精准更新對應的值
• 提前編譯，更小的包體積，尺寸小

官網地址：Solid

---

歡迎訪問：天問博客