SolidJS硬气的说:我比React还react

时间:2021-09-13来源:栏目:新媒体

作者:卡松。来源:SegmentFault社区。大家好,我是卡森。在最近的推文中,一个哥哥经常出现在与前框相关的推文下面。我想:“兄弟,你是谁?”查了一下,原来是一个框架作者,工作叫SolidJS...

作者:卡松。

来源:SegmentFault社区。

大家好,我是卡森。

在最近的推文中,一个哥哥经常出现在与前框相关的推文下面。

我想:“兄弟,你是谁?”

查了一下,原来是一个框架作者,工作叫SolidJS。

翻着画框介绍,这句话成功吸引了我的注意力:

支持现代前端功能,如JSX、片段、上下文、门户、挂起、流式SSR、渐进式水合、错误边界和并发渲染。

不知道你是不是逃亡的公主。这不能说是相似,而只能说是完全一样?

作为一个传统的中国人,秉承着“来自四面八方”的思想,尝试了一天,又看了一遍源代码,发现这个框架真的是一个宝藏框架。

本文将比较其异同,并阐述其独特的优势。看完之后,不知道你会不会发出和我一样的感叹:

这只是反应性大于反应性。

相信看完这篇文章,不仅能知道一个新的框架,还能对它有更深的理解。

打开整个!

初看很相似

让我们举一个计数器的例子来看看它和语法的区别:

不同的地方:

重命名为

获取状态由直接使用变为方法调用,即:

只是一个类框架吗?

不用担心,我们从编译时、运行时、响应原理三个方面来看。

编译时大不同

编译的时候很细,基本上只是编译语法。

采用类似的方案:编译时,状态更新作为独立的操作方式进行编译。

这样做有什么好处?主要有两点。

一定条件下的成交量优势。

你不必为你不用的代码付费。

使用时,即使不使用,其代码也会出现在最终编译的代码中。

在中,未使用的功能不会出现在编译的代码中。

例如,在上面的计时器示例中,一行编译后的代码如下所示:

这行代码的目的是在上注册事件代理。

如果不在计时器中使用,这一行将不会出现在编译后的代码中。

一些热心的网友将源代码和编译代码之间的体积差异与类似的编译时方案进行了比较。

横轴表示源代码量,纵轴表示编译后的代码量,红线表示,蓝色表示:

因此,在临界值(业务源代码量达到120kb)之前,编译时方案具有一定的量优势。

因为使用描述性视图比使用类似的模板语法更灵活,所以在编译时不可能实现同样极端的编译优化,这使得它比运行时更重。

这给他带来了额外的好处:在真实项目(120kb)中,代码体积比大约小25%。

真的,每朵云都有一线希望?

更新速度更快。

正如我们所知,在和中有一层虚拟DOM(叫树中部)。

每当发生更新时,将对虚拟DOM进行比较(算法),并对比较结果执行不同的操作(添加、删除和修改)。

但是,当更新发生时,可以直接调用编译后的操作方法,从而节省了虚拟DOM比较步骤中消耗的时间。

例如,单击上面的计时器后,从触发更新到视图更改的调用堆栈如下所示:

触发事件,更新状态,更新视图,一路调用到底,清晰明了。

同样的例子放入,调用栈如下:

左、右红色、绿色和蓝色帧调用堆栈对应于:

处理事件。

比较生成树。

根据比较结果。

可以看出的更新路径比短很多。

为什么这么问?这得从它的特殊反应原理说起。

响应原理

假设有一个状态的初始值为。我们想根据。

编译后的代码类似:

其中,类似的。

由于它在回调中的依赖性,它会触发回调,改变并导致一次又一次的更新。

类似:

第一个屏幕渲染结果:

接下来,触发更新:

更新后结果:

为什么更新后会触发?

这里也没有什么黑魔法,就是订阅发布。

回调依赖,所以会订阅的变化。

由于篇幅有限,实现细节咱下回细聊。

这里的关键在于,的状态具有原子性。

即状态互相之间有依赖关系,他们形成局部的依赖图。当改变一个状态后,依赖图中的其他状态也会改变。

中如果使用了这些依赖,就会订阅他们的变化。

当状态改变后,回调会执行,进而执行具体的方法,更新视图。

真。响应式更新,指哪打哪,李云龙直呼内行。

有同学会问,不是这样么?

那我问你个问题:

为什么会有调用顺序不能变的要求?

为什么回调会有闭包问题?

答案已经呼之欲出了:只有在这些限制下才能实现响应式。

辛劳苦干React

有一个可能反直觉的知识:并不关心哪个组件触发了更新。

在中,任何一个组件触发更新(如调用),所有组件都会重新走一遍流程。因为需要构建一棵新的树。

为了减少无意义的,内部有些优化策略用来判断组件是否可以复用上次更新的节点(从而跳过)。

同时,也提供了很多(比如:、...),让开发者告诉他哪些组件可以跳过。

如果说,的更新流程像一个画家,画面中哪儿需要更新就往哪儿画几笔。

那么的更新流程像是一个人拿相机拍一张照片,再拿这张照片和上次拍的照片找不同,最后把不同的地方更新了。

总结

今天,我们聊了与的差异,主要体现在三方面:

编译时

运行时

响应原理

不知道你喜欢这款:没有顺序限制、没有闭包问题、没有树、比更的框架么?

如果你问我选哪个?当然,哪个给工资高我用哪个。

1.本站部分来源于互联网用户自主整合上传,如有侵权,请联系我们删除;

2.文章内容并不代表本站的观点或立场,如有关于文章内容,版权或其它问题请联系删除;

3.本文地址:https://jiatu888.com/xmt/83515.html

js 代码 卡颂 调用 视图

最新文章

网站介绍

本站部分内容收集于互联网,如有侵犯贵司(个人)版权,请联系本站删除。

Copyright@2018-2021 www.jiatu888.com 嘉图网 All Rights Reserved 粤ICP备20051635号 网站地图 tag列表

嘉图网