SolidJS硬氣的說(shuō)：我比React還react

大家好，我是卡頌。

最近刷推時(shí)，有個(gè)老哥經(jīng)常出現(xiàn)在前端框架相關(guān)推文下。

我想：“老哥你哪位？”

一查，原來(lái)是個(gè)框架作者，作品叫SolidJS。

翻翻框架介紹，這句話成功吸引我的注意：

支持現(xiàn)代前端特性，例如：JSX, Fragments, Context, Portals, Suspense, Streaming SSR, Progressive Hydration, Error Boundaries和Concurrent Rendering

我琢磨您不會(huì)是React在逃公主吧？這不能說(shuō)和React類似，只能說(shuō)完全一樣吧？

作為傳統(tǒng)中國(guó)人，秉承來(lái)都來(lái)了思想，我試用了一天，又看了下源碼，結(jié)果發(fā)現(xiàn)這個(gè)框架真是個(gè)寶藏框架。

本文會(huì)比較SolidJS與React的異同，闡述他的獨(dú)特優(yōu)勢(shì)，看完后不知道你會(huì)不會(huì)和我發(fā)出同樣的感嘆：

這簡(jiǎn)直比React還react（react譯為響應(yīng)）

相信看完本文后，不僅能認(rèn)識(shí)一個(gè)新框架，還能對(duì)React有更深的認(rèn)識(shí)。

開(kāi)整！

初看很相似

讓我們從一個(gè)計(jì)數(shù)器的例子看看與React語(yǔ)法的差異：

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

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

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

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

和React不同的地方：

• useState改名成createSignal

• 獲取count狀態(tài)從React中直接使用count變?yōu)橥ㄟ^(guò)方法調(diào)用，即：count()

編譯時(shí)大不同

一定條件下的體積優(yōu)勢(shì)

你不需要為你沒(méi)使用的代碼付出代價(jià)

delegateEvents(["click"]);

更快的更新速度

• 處理事件
• 對(duì)比并生成Fiber樹(shù)
• 根據(jù)對(duì)比結(jié)果執(zhí)行DOM操作

響應(yīng)原理

const [name, setName] = createSignal("KaSong");

const el = document.createElement("div");
createEffect(() => el.textContent = name());

useEffect(() => {
  el.textContent = name;
}, [name])

<div>KaSong</div>

setName("XiaoMing") 

<div>XiaoMing</div>

由于篇幅有限，實(shí)現(xiàn)細(xì)節(jié)咱下回細(xì)聊。

辛勞苦干React

總結(jié)

• 編譯時(shí)
• 運(yùn)行時(shí)
• 響應(yīng)原理