又一個前端框架 Solid ？性能直逼原生 JS ？
Solid 是什么？Solid 號稱擁有 JSX 語法，類似于 React hook 的語法，你可以用現(xiàn)代化的開發(fā)方式，獲得性能最快的代碼。真正的既要又要還要。
到底有多快，我們看看 Benchmark
原生 JS 是 1， Solid 1.05， 比 Svelte 也快，React 跑到了 1.93 。為什么這么快？讓我們來揭開神秘的面紗。官方也提供了 playground，可以實時看到打包后的代碼，不如上去動手感受一下～
首先，官方代碼如下：
import { render } from "solid-js/web";
import { createSignal, createEffect, createMemo, mapArray } from "solid-js";
function CounterNum() {
const [count, setCount] = createSignal(0);
const increment = () => setCount(count() + 1);
createEffect(() => {
console.log("i am alive");
});
return (
<>
<button type="button" onClick={increment}>
{count()}
</button>
</>
);
}
這個代碼，看起來，可以說跟 React Hook 一毛一樣了，可以理解，也期望以后新創(chuàng)建的框架，都可以往 React 等框架語法靠攏。而不是又創(chuàng)建一套新的語法。真的學不動啊，程序員不要內卷程序員。這點 Solid 框架作者就做得不錯。
那為什么快，猜測有三點：
直接使用瀏覽器的 DOM, 沒有虛擬 DOM， DOM diff 一整套算法 響應式原理，精準更新對應的值 提前編譯，更小的包體積，尺寸小
一、 直接使用瀏覽器的 DOM, 沒有虛擬 DOM， DOM diff 一整套算法
我們看一下他編譯出來的代碼，可以發(fā)現(xiàn)，他的 DOM ，是原生 DOM ，其他的語法是直接調用的，也沒有那一整套復雜的虛擬 DOM
二、提前編譯，按需打包
無論是 react 還是 vue ，不管怎么編譯，都需要引入框架本身。也就是 runtime 。而且這個體積還比較大。這些框架都采用的是用運行時方案，運行時方案相比于編譯時方案，最大的優(yōu)勢是可以「幾乎沒有任何語法約束」的去完成代碼編寫。而 Solid 則預編譯，將 jsx 部分的代碼，轉換成原生的語法。
我們直接看代碼， 如果把對應的 click 事件去掉，看看 build 之后的代碼是怎么樣的。
可以看到，delegateEvents(["click"]); 這一行代碼不見了，也不會引入 delegateEvents 這個方法。這個特性非常厲害，這樣可以得到最小的包體積。
三、響應式原理，精準更新對應的值
如果了解 React 的原理，就會知道，只要是 props 或者 state 改變，React 組件就會重新渲染，而每一次判斷是否會重新改變，值是否不一樣，也是一整套算法…… Solid 不一樣，他另辟蹊徑，每一個組件都是一個獨立的線程，每個組件里的 createMemo 或 createEffect 里面去收集對應的依賴， 在 set 改變值后，都會重新執(zhí)行這些方法。看起來就像是實時更新了一樣。
核心的原理可以用下面兩段代碼來展示：
從這兩段代碼，他就可以實現(xiàn)，當 value 值改變時，會自動重新渲染 createMemo，createEffect 里的方法，自動更新 DOM 對應的值。響應式變化。
如果還是不理解的話，可以看一下下面這張圖，其實就是使用了 發(fā)布-訂閱方式：
關鍵的步驟如下：
createeffect 分析依賴還有回調，存入全局變量 read 的時候，如果有這個依賴對應的值，則放入 subscriptions。為什么這里需要使用 {count()} 函數(shù)才能讀取值也是因為這期間要處理一些事情。 write 的時候，去 subscriptions 里面觸發(fā)對應的函數(shù)
總結
我們分析了 Solid 為什么性能這么快，主要從下面三個方面來講：
直接使用瀏覽器的 DOM, 沒有虛擬 DOM， DOM diff 一整套算法 響應式原理，精準更新對應的值 提前編譯，更小的包體積，尺寸小
學習借鑒下原理挺不錯的，在生產(chǎn)環(huán)境中使用還是算了，畢竟一個新框架前期正處于快讀迭代的過程中，肯定會有一堆棄用的api。且他的生態(tài)距離 react，vue 的生態(tài)，還需要發(fā)展幾年。選用一個框架，如果考量他的性能，也要考量可維護性，編碼效率等…
前端的技術發(fā)展，從原生 DOM ，到虛擬 DOM，隨著瀏覽器自身性能越來越好，以后會不會又回歸到 原生 DOM ？
后臺回復：typescript，獲取我寫的 typescript 系列文章，絕對精品 后臺回復：電子書，自動獲取我為大家整理的大量經(jīng)典電子書，省去你篩選以及下載的時間 后臺回復：不一樣的前端，自動獲取精選優(yōu)質前端文章。 后臺回復：算法，自動獲取精選算法文章。另外也可關注我的另外一個專注算法的公眾號力扣加加。 后臺回復：每日一薦，自動獲取我為大家總結的每日一薦月刊，內含精品文章，實用技巧，高效工具等等
