在 2021 年的 JavaScript 調(diào)查問卷中，黑馬 Solid.js 一騎當(dāng)先登上榜首，在用戶滿意度的評分上連超兩大競爭對手，React 和 Svelte。雖然 React 仍有著不錯(cuò)的市場占有率，但要小瞧了 Solid.js 那可是犯了個(gè)大錯(cuò)誤。

React 開發(fā)者們會(huì)發(fā)現(xiàn) Solid 非常眼熟

先看一眼下面這段用 Solid.js 寫的簡單計(jì)數(shù)程序：

function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <div>
      <p>The current count is: {count()}</p>
      <button onClick={() => setCount((x) => x + 1)}>Plus</button>
    </div>
  );
}

我敢打包票，即使從來沒接觸過 Solid.js，React 的開發(fā)者們讀這段代碼也是完全不費(fèi)力。這是因?yàn)?Solid.js 在 API 上和 React 有著異曲同工之妙。其中一個(gè)原因是 Solid.js 也使用了 JSX，意味著 React 開發(fā)者們刻在 DNA 里關(guān)于元素和組件的應(yīng)用方式也會(huì)在 Solid.js 里體現(xiàn)。比如說下面這個(gè)“歡迎”組件，我們完全可以以和 React 應(yīng)用類型的方式來實(shí)現(xiàn)：

function Welcome(props) {
  return <p>Welcome, {props.name}</p>;
}

這二者之間的相似之處不僅限于此，Solid.js 在圖元的使用上也和 React 的 hook 類似，大部分 Solid 響應(yīng)式圖元的 API 你都可以在 React 的 hook 找到對應(yīng)的存在。

但請注意，Solid.js 可不是 React API 的復(fù)制品，React 應(yīng)用直接放到 Solid.js 中運(yùn)行是肯定行不通的。但不得不說，有這么個(gè)和 React 如此相似的 API 對大部分開發(fā)者來說都是件好事，至少學(xué)習(xí)曲線不會(huì)太過陡峭。

一切都是為了圖元

盡管這二者在表面上有如此多的相似點(diǎn)，但他們之間的不同之處才是讓 Solid.js 得以在眾多競爭者中脫穎而出，比如說，Solid.js 的應(yīng)用并不是圍著組件轉(zhuǎn)的。Solid 曾驕傲地稱他們的組件為“消失的組件”。在組織代碼階段，Solid 的組件很有幫助，但等到了初始的渲染階段，你就再也見不到它們了。

與 React 不同，Solid.js 的宇宙中心其實(shí)是圖元。Solid 有著一套“完善的響應(yīng)式圖元”。這些圖元功能類似 React 的 hook，但又有著些許不同。對 React 來說，hook 是獨(dú)立于 React 的組件生命周期的，需要使用者對虛擬 DOM 和 React 的渲染生命周期有一定的了解。而它的這種獨(dú)立性也就意味著開發(fā)者們需要下很深的工夫才能玩轉(zhuǎn) hook。首先讓我們以 React 的組件為例：

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

  useEffect(() => {
    document.title = `The current count is: ${count}`;
  }, [count]);

  return (
    <div>
      <p>The current count is: {count}</p>
      <button onClick={() => setCount((x) => x + 1)}>Plus</button>
    </div>
  );
}

雖然這個(gè)例子并不難，但其中也涉及了幾條必不可少的規(guī)則，忽略這些規(guī)則將帶來一些不必要的麻煩。但 Solid 的響應(yīng)式圖元就不同了，它們可以讓你用起來沒有后顧之憂。你可以選擇性地調(diào)用這些圖元，就連組件里你都可以選擇不調(diào)用。用 Solid 來重寫上面的例子，就像這樣：

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

createEffect(() => {
  document.title = `The current count is: ${count()}`;
});

function Counter() {
  return (
    <div>
      <p>The current count is: {count()}</p>
      <button onClick={() => setCount((x) => x + 1)}>Plus</button>
    </div>
  );
}

把所有的響應(yīng)式圖元全部挪到了組件之外、方法之前。我們能這么做的原因完全是因?yàn)?Solid 是以響應(yīng)式圖元本身為基礎(chǔ)搭建的，而不是完全依賴組件。

響應(yīng)式還是虛擬 DOM

就像是其他大眾框架，“虛擬 DOM”這個(gè)概念是 React 框架的核心。虛擬 DOM 是指在內(nèi)存中用于描述真實(shí) DOM 的 JS 對象。因?yàn)閯?chuàng)建虛擬 DOM 的成本要遠(yuǎn)小于創(chuàng)建一個(gè)真實(shí)的 DOM，所以多次運(yùn)行組件或者對虛擬 DOM 進(jìn)行更新時(shí)的消耗也會(huì)更小。除非是對真實(shí)的 DOM 進(jìn)行修改，React 才會(huì)對虛擬 DOM 進(jìn)行更新，使其與真實(shí)的 DOM 相符。想在 React 中熟練調(diào)用 hook，就意味著開發(fā)者們要對虛擬 DOM 的生命周期有一定的了解。

而另一方面，Solid.js 更依靠一套“完善的”響應(yīng)式。舉例來說，Solid 程序中的 JSX 語句依賴于一個(gè)響應(yīng)式信號，也就是說，只有依賴于這個(gè)信號數(shù)值的 JSX 才會(huì)隨著信號的變更在方法中被重新調(diào)用。同理，所有在 creatEffect 圖元中運(yùn)行的效果也是一樣，如果這個(gè)效果依賴于一個(gè)或多個(gè)響應(yīng)式數(shù)值，那么只有在這些數(shù)值變更時(shí)才會(huì)重新渲染。這樣一來，依賴數(shù)組也不需要了，因?yàn)?Solid 已經(jīng)提前知道那些數(shù)值可以變更，以及受這些響應(yīng)式數(shù)值影響需要重新渲染的效果都有那些。

這也就是為什么前文會(huì)說 Solid 中組件“消失不見”，以及是如何在組件之外調(diào)用響應(yīng)式圖元的了。在初始的渲染之后，只有應(yīng)用中“完善”的部分會(huì)繼續(xù)存在。

來自 React 的“小玩笑”

搞清楚這兩個(gè)框架的底層工作原理大概會(huì)讓不少 React 開發(fā)者們在初次嘗試 Solid 時(shí)手忙腳亂。首先你重新學(xué)習(xí)的就是，組件并不會(huì)重新運(yùn)行。也就是說，我們在 React 中學(xué)到的大部分規(guī)矩都不再適用于 Solid.js。我們不需要用 useCallback 或者 useRef 來調(diào)用 hook，因?yàn)榻M件都是一次性的。而如果我們想要在 JavaScript 里賦值給變量，只需要這么做：

function MyForm() {
  const handleSubmit = (e) => {
    /* handl submit */
  };

  let myInput;
  // use onMount or createEffect to read after connected to DOM
  onMount(() => myInput.focus());

  return (
    <form onSubmit={handleSubmit}>
      <input ref={myInput} />
    </form>
  );
}

第二點(diǎn)要重新熟悉的是，在銷毀 prop 函數(shù)的時(shí)候，Solid.js 的那些細(xì)粒度的響應(yīng)式也會(huì)被銷毀，雖然你可能并沒有在 prop 對象中存儲(chǔ)任何響應(yīng)式數(shù)值，但要記住，這些對象一旦被銷毀，這些響應(yīng)式也就全沒了。這也就是并不推薦下面這種代碼的原因：

function Greeting(props) {
  const { greeting, name } = props;
  return (
    <h3>
      {greeting} {name}
    </h3>
  );
}

但如果你寫成這個(gè)樣子，那么效果會(huì)好很多：

function Greeting(props) {
  return (
    <h3>
      {props.greeting} {props.name}
    </h3>
  );
}

或者可以直接利用 Solid 的 mergeProps 或者 splitProps 函數(shù)，在不影響響應(yīng)式的情況下對帶有響應(yīng)式數(shù)值的對象進(jìn)行合并或拆散。

在 React 面世的時(shí)候，它挑戰(zhàn)了當(dāng)時(shí)最優(yōu)秀的架構(gòu)，并影響著我們現(xiàn)今編寫網(wǎng)頁應(yīng)用的方式。而現(xiàn)在 Solid 要做的，就是再次重現(xiàn)當(dāng)年 React 的影響。

原文鏈接：https://non-traditional.dev/an-intro-to-solidjs-for-react-developers