这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
这是一个全新的系列文章，我们来看 solid.js，这是一个前端库，不能算是非常新，不过目前的知名度也不算高，相比较于比较成熟的 vue、react，也算得上是一个新兴事物。vue 和 react 是目前最流行的 UI 层开发库，这里称为库而不是框架是因为它们的官网上对其的定位就是库，而 vue 和 react 本身也只是提供了 UI 层的抽象能力，和 Angular 这种大而全的框架还是有区别的。而我们今天的主角 solid.js 的定位也是 UI 层开发库，官网的描述是 Simple and performant reactivity for building user interfaces. 翻译成中文为：一个用于构建用户界面，简单高效、性能卓越的JavaScript库。 目前前端开发领域的主要工具库还是 vue 和 react，这两者都已经非常成熟了，它们都有比较稳定的生态体系和社区资源，本身体积和性能上也足够优秀，因此现在前端开发库基本处于稳定状态。那么为什么还会有 solid.js 呢？在正式介绍 solid.js 之前绕不开另一个 UI 库 —— svelte.js。
相比较于 solid.js，svelte.js 的知名度要高很多，svelte.js 的作者是 rollup 的开发者 Rich Harris，作者本人喜欢极简风格，而且专长于编译领域，在 vue 和 react 大行其道的时候，以轻量高效为特色的 svelte.js 诞生了。
前端的本质就是修改 DOM，在 angular.js（不是 angular）出现之前，前框工具库的工作重点还是如何简化 DOM 操作，很长的一段时间 JQuery 都是最流行的前端库，直到 angular.js 提出的数据模型绑定思想流行起来，前端库才开始发生了重大革命，到了今天 vue 和 react 技术已经非常成熟。在这个过程中，工具库做的事情越来越多，上层抽象程度越来越高。这件事情本身并不是坏事，库做得越多上层开发者就越简单，但是这也带来一个问题，库本身非常重。
svelte.js 能够脱颖而出最大的特色就是没有虚拟 DOM，重编译轻运行。抛弃虚拟 DOM 是一个非常具有创造性的实现，新手开发者常常有误区，vue、react 中使用虚拟 DOM 是为了优化性能，但是这是建立在 vue 的响应式更新和 react 的 fiber tree diff 的基础之上的，虚拟 DOM 方便了框架内的抽象处理，并不是虚拟 DOM 比直接操作 DOM 快，别忘了浏览器的本质是操作 DOM，setState(xxx) 不可能比 dom.innerText = xxx 快。svelte.js 没有虚拟 DOM，就不会有前面这些困扰，借助编译时的能力，直接把操作转化为原生 DOM 操作，因此 svelte.js 开发的应用可以做到体积小且性能高。
有关 svelte.js 更多的内容就不介绍了，因为我们系列文章的主角不是它。svelte.js 本身使用了模板的写法，加上标签指令和响应式语法，svelte.js 写出来看上去更接近 vue 的用法。而我们要介绍的 solid.js 采用了 jsx 的写法，加上类似 hooks 的语法，写出来看上去更像是 react。不过 solid.js 和 react 有本质的区别，它们只是看上去像，从原理上来说，solid.js 和 svelte.js 更接近，这也是为什么要花这么多篇幅介绍 svelte.js。
铺垫了这么多，solid.js 到底是什么，它有哪些优势，它和 react 有哪些联系和区别，后面我们会一一展开介绍。
