一、前言
solidjs的GitHub、官网地址：
广东靓仔前阵子看到一个比较有意思的技术库SolidJS，在Github的star也高达13.1k。
SolidJS非常非常快，这是最大的亮点。
SolidJS用于构建用户界面的声明式、高效且灵活的 JavaScript 库。
一些大佬描述SolidJS“比React更React”～
二、简单描述
官方描述：
大体意思就是说：Solid是一个用于构建用户界面的 声明性 JavaScript 库，特点是高效灵活。
Solid 有很多特点：
- 没有虚拟 DOM！没有脏检查摘要循环（将其模板编译为真实的 DOM）
- 支持并建立在 TypeScript 之上
- 支持现代功能，例如 JSX、Fragment、Context、Portals、Suspense、Streaming SSR、Progressive Hydration、Error Boundaries 和 Concurrent Rendering
- 适用于无服务器环境，包括 AWS Lambda 和 Cloudflare Workers
- 具有高性能，并且具有极小的打包体积，适合打包为独立的模块嵌入其它项目压缩后的代码体积非常非常小
- Solid 上手简单，贴合 React 或是 Vue3 开发者的使用习惯
- Solid 中 JSX 直接返回 DOM 元素，符合直觉，并且很纯净
- Solid 某些地方需要使用其指定的东西才能达到高性能，高性能并不是毫无代价的
......等等
三、将JSX 编译为Dom的demo
菜单目录
广东靓仔从官网找了个Demo，可以直观看到编译结果：
简单的组件：
import { render } from "solid-js/web"; const HelloMessage = props => <div>Hello {props.name}</div>; render(() => <HelloMessage name="Taylor" />, document.getElementById("hello-example") );
Solid 使用render函数来创建应用程序的反应式挂载点。
将JSX 编译为高效的真实 DOM ：
import { render, template, insert, createComponent } from "solid-js/web"; const _tmpl$ = template(`<div>Hello </div>`); 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函数中。这是因为这是该组件中唯一将再次执行的部分。即使从外部更新名称，也只会重新估算的一个表达式。两全其美：编译器优化初始渲染，运行时优化更新。
更新速度快
Solid 的原理和新兴框架 Svelte 的原理非常类似，都是编译成原生 DOM，
创建 DOM 节点时， Solid做了点小技巧，利用了 innerHTML 代替 createElement 来创建，从而进一步提升了性能。
我们都知道：React与Vue有 Virtual DOM（React中叫Fiber树）。
每当发生更新，Virtual DOM 会进行比较（Diff算法），比较的结果会执行不同的DOM操作（增、删、改）。
而 Solid 与 Svelte 一样，发生更新时，直接调用编译好的DOM操作方法，省去了 Virtual DOM。
Solid更新流程，是哪里需要更新就更新一下，与React区别还是比较大的。因此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
如果是一些几个页面的小应用，我们可以独立安装，推荐Solid 与 JSX一起使用：
> npm install solid-js babel-preset-solid
增加 .babelrc 或 webpack 的 babel 配置：
"presets": ["solid"]
如果使用了TS，需要在TSconfig加下配置：
"compilerOptions" : { "jsx" : "preserve" , "jsxImportSource" : "solid-js" , }
Solid 没有以下内容：
- 没有Hooks顺序限制
- 没有useEffect闭包问题
- 没有Fiber树
广东靓仔看了下Solid现在的用户量以及社区，感觉要成为主流技术估计没那么顺利，还有很长一段路要走。不过可以给我们多一些技术选择，在技术选型的时候也可以考虑下。不要限制自己～
五、总结
在我们阅读完官方文档后，我们一定会进行更深层次的学习，比如看下框架底层是如何运行的，以及源码的阅读。
这里广东靓仔给下一些小建议：
- 在看源码前，我们先去官方文档复习下框架设计理念、源码分层设计
- 阅读下框架官方开发人员写的相关文章
- 借助框架的调用栈来进行源码的阅读，通过这个执行流程，我们就完整的对源码进行了一个初步的了解
- 接下来再对源码执行过程中涉及的所有函数逻辑梳理一遍
