Solid，一个前端超新星项目？
本文适合对新兴前端技术框架感兴趣的小伙伴阅读
欢迎关注前端早茶，与广东靓仔携手共同进阶～
一、前言
solidjs的GitHub、官网地址：
https://github1s.com/solidjs/solid/blob/HEAD/README.md
https://www.solidjs.com/
二、简单描述
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(`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函数中。这是因为这是该组件中唯一将再次执行的部分。即使从外部更新名称，也只会重新估算的一个表达式。两全其美：编译器优化初始渲染，运行时优化更新。
更新速度快
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现在的用户量以及社区，感觉要成为主流技术估计没那么顺利，还有很长一段路要走。不过可以给我们多一些技术选择，在技术选型的时候也可以考虑下。不要限制自己～
五、总结
在看源码前，我们先去官方文档复习下框架设计理念、源码分层设计 阅读下框架官方开发人员写的相关文章 借助框架的调用栈来进行源码的阅读，通过这个执行流程，我们就完整的对源码进行了一个初步的了解 接下来再对源码执行过程中涉及的所有函数逻辑梳理一遍
关注我，一起携手进阶
欢迎关注前端早茶，与广东靓仔携手共同进阶～