solid
早在今年年初就听说了这个性能登仙的框架,一直没有去尝试,近期听了祖师爷的分享,对于这种脱离的虚拟dom的框架也有了兴趣就去试一下。
创建
作为羽化登仙的第一步就是直接创建它的脚手架,我在官网找了官方推荐的方法,居然是基于vite的,果然vite的势头越来越好了。
初始化命令
> 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
`
2022年了,我觉得还是直接使用ts的吧
一般我拉下来我都喜欢先看配置,可以看到这个官推的基于vite的脚手架,其实也是做了一个现成的插件,几乎0配置的开箱即用,祖师爷牛逼!
整体文件结构
乍一看真的以为是React,前几天祖师爷提过一嘴,solid内部实现比较接近vue,但是其实用起来长得像React,这个也是比较吸引我的一点,我就来看看它到底有多像
我随手捏个玩具组件
不能说很像,简直一摸一样,但是也和祖师爷说得一样,实现上是完成不一样的,可以看到虽然和React一样是读写分离的方式去操作响应式数据,但是他必须带个(),因为他内部实现和vue一样用的是proxy。
这是createSignal的源码,他中间具体怎么实现的我不管,但是可以看到,其实他返回的是2个函数,getter和setter,熟悉的观察者模式,在读取和写入的时候进行拦截。这个叫readSignal返回一个绑定了这个s对象也就是我们的响应式数据包装对象作为上下文的函数,转到这个函数的最下面
他返回了value。
确实没错他的内核和与vue确实有相似之处。
最大不同
他和我们国内现在用的主流框架都有相似之处,但是他又有着最大的不同,就是他编译方式的不同,总所周知虚拟dom一直都不是性能大提升的手段,他是保证性能下限的措施。而svelet,solid。并没有使用虚拟dom。直接使用浏览器的 DOM, 没有 虚拟DOM, DOM diff 一整套算法 ,可以发现它编译出来的代码,他的 DOM ,是原生 DOM ,其他的语法是直接调用的。所以整体的性能非常夸张。
思考
前几天尤大说过,vue有在做一个实验性的东西,就是去一套类似于solid的编译模式,那么加上我们现在用的就是2套编译模式,这是不是会提升我们开发时的心智负担,本身我们在用这些框架的时候并不不用过多的去关心他编译时的问题,那如果有2套,我们如何选择,怎么才算最佳开发实践?