Solid，一個前端超新星項目？
本文適合對新興前端技術(shù)框架感興趣的小伙伴閱讀
歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進階～
一、前言
solidjs的GitHub、官網(wǎng)地址：
https://github1s.com/solidjs/solid/blob/HEAD/README.md
https://www.solidjs.com/
二、簡單描述
Solid?有很多特點：
沒有虛擬 DOM！沒有臟檢查摘要循環(huán)（將其模板編譯為真實的 DOM） 支持并建立在 TypeScript 之上 支持現(xiàn)代功能，例如 JSX、Fragment、Context、Portals、Suspense、Streaming SSR、Progressive Hydration、Error Boundaries 和 Concurrent Rendering 適用于無服務(wù)器環(huán)境，包括 AWS Lambda 和 Cloudflare Workers 具有高性能，并且具有極小的打包體積，適合打包為獨立的模塊嵌入其它項目壓縮后的代碼體積非常非常小 Solid 上手簡單，貼合 React 或是 Vue3 開發(fā)者的使用習(xí)慣
Solid 中 JSX 直接返回 DOM 元素，符合直覺，并且很純凈
Solid 某些地方需要使用其指定的東西才能達到高性能，高性能并不是毫無代價的
......等等
三、將JSX 編譯為Dom的demo
? ? 廣東靚仔從官網(wǎng)找了個Demo，可以直觀看到編譯結(jié)果：
簡單的組件：
import?{?render?}?from?"solid-js/web";
const?HelloMessage?=?props?=>?<div>Hello?{props.name}div>;
render(()?=>?
??<HelloMessage?name="Taylor"?/>,?
??document.getElementById("hello-example")
);
Solid 使用render函數(shù)來創(chuàng)建應(yīng)用程序的反應(yīng)式掛載點。
將JSX 編譯為高效的真實 DOM ：
import?{?render,?template,?insert,?createComponent?}?from?"solid-js/web";
const?_tmpl$?=?template(`Hello?`);
const?HelloMessage?=?props?=>?{
??const?_el$?=?_tmpl$.cloneNode(true);
??insert(_el$,?()?=>?props.name);
??return?_el$;
};
render(
??()?=>?createComponent(HelloMessage,?{?name:?"Taylor"?}),
??document.getElementById("hello-example")
);
從上面的代碼可以看出_el$是真正的 div 元素。props.name包含在insert函數(shù)中。這是因為這是該組件中唯一將再次執(zhí)行的部分。即使從外部更新名稱，也只會重新估算的一個表達式。兩全其美：編譯器優(yōu)化初始渲染，運行時優(yōu)化更新。
更新速度快
Solid 的原理和新興框架 Svelte 的原理非常類似，都是編譯成原生 DOM，
創(chuàng)建 DOM 節(jié)點時， Solid做了點小技巧，利用了 innerHTML 代替 createElement 來創(chuàng)建，從而進一步提升了性能。
我們都知道：React與Vue有 Virtual DOM（React中叫Fiber樹）。
每當(dāng)發(fā)生更新，Virtual DOM 會進行比較（Diff算法），比較的結(jié)果會執(zhí)行不同的DOM操作（增、刪、改）。
而?Solid 與?Svelte?一樣，發(fā)生更新時，直接調(diào)用編譯好的DOM操作方法，省去了 Virtual DOM。
Solid更新流程，是哪里需要更新就更新一下，與React區(qū)別還是比較大的。因此Solid更新路徑更短。
四、安裝使用
js安裝使用：
>?npx?degit?solidjs/templates/js?my-app
>?cd?my-app
>?npm?i?#?or?yarn?or?pnpm
>?npm?run?dev?#?or?yarn?or?pnpm
ts安裝使用：
>?npx?degit?solidjs/templates/ts?my-app
>?cd?my-app
>?npm?i?#?or?yarn?or?pnpm
>?npm?run?dev?#?or?yarn?or?pnpm
如果是一些幾個頁面的小應(yīng)用，我們可以獨立安裝，推薦Solid 與 JSX一起使用：
>?npm?install?solid-js?babel-preset-solid
增加?.babelrc 或 webpack 的 babel 配置：
"presets":?["solid"]
如果使用了TS，需要在TSconfig加下配置：
"compilerOptions"?:?{?
??"jsx"?:?"preserve"?,?
??"jsxImportSource"?:?"solid-js"?,?
}
Solid 沒有以下內(nèi)容：
沒有Hooks順序限制 沒有useEffect閉包問題 沒有Fiber樹
? ? 廣東靚仔看了下Solid現(xiàn)在的用戶量以及社區(qū)，感覺要成為主流技術(shù)估計沒那么順利，還有很長一段路要走。不過可以給我們多一些技術(shù)選擇，在技術(shù)選型的時候也可以考慮下。不要限制自己～
五、總結(jié)
在看源碼前，我們先去官方文檔復(fù)習(xí)下框架設(shè)計理念、源碼分層設(shè)計 閱讀下框架官方開發(fā)人員寫的相關(guān)文章 借助框架的調(diào)用棧來進行源碼的閱讀，通過這個執(zhí)行流程，我們就完整的對源碼進行了一個初步的了解 接下來再對源碼執(zhí)行過程中涉及的所有函數(shù)邏輯梳理一遍
關(guān)注我，一起攜手進階
歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進階～