表面上看，SolidJS和反应似乎是密切相关的. 客户端框架是相互可理解的，并且都用于创建 单页面应用程序 (温泉). 虽然两者的开发人员体验几乎相同, 每个框架的底层机制形成了显著的对比.
两个SPA框架都负责划分应用程序的网页结构和功能, 但是在浏览器中, 这些框架以不同的方式操作页面的HTML元素，以提供所需的用户体验. SolidJS 和反应在使用文档对象模型(DOM). 让我们扩展一下反应和SolidJS组件如何允许应用程序逻辑模拟多页面网站.
我是TL;DR方法的坚定信徒, 所以我总结了反应和SolidJS的主要区别如下表:
功能 | 反应 | SolidJS |
|---|---|---|
打印稿的支持 |
✔ |
✔ |
声明性性质 |
✔ |
✔ |
单向数据流 |
✔ |
✔ |
JSX一流的支持 |
✔ |
✔ |
直接操作DOM |
✘ |
✔ |
避免组件重新渲染 |
✘ |
✔ |
高性能 |
✘ |
✔ |
丰富的群落和生态系统 |
✔ |
✘ |
优秀的开发人员文档 |
✔ |
✔ |
脚手架的工具 |
✔ |
✔ |
有条件的呈现 |
✔ |
✔ |
服务器端呈现(i).e.水合作用) |
✔ |
✔ |
并发呈现(i).e.悬念) |
✔ |
✔ |
现在我们将更详细地介绍反应和SolidJS之间的异同.
反应和SolidJS具有完全相同的编程结构和对组件(独立组件)的支持, 可重用的代码段).
在现代反应和SolidJS中，组件都由一个 渲染 以属性作为参数的函数. 连同每个组件的 JSX，代码紧凑而简洁. JSX很容易理解, 并且允许有经验的开发人员在其定义中可视化地描述组件的模型.
反应和SolidJS提供相同的组件，但每个框架都有独特的呈现方法. 反应组件 每次渲染(禁止使用记忆)，而SolidJS组件只渲染一次.
这两个框架之间的另一个区别是它们支持组件功能的不同特性.
没有功能的组件只是标记. 那么反应和SolidJS是如何让组件运行的呢? 他们的做法是相似的:
功能 | 前缀 | 描述 | |
|---|---|---|---|
反应 | 钩子 |
|
这些函数是框架在组件生命周期的特定时间触发时运行的. 钩子函数 相互独立，但可以在同一组件内调用其他钩子. 这样的调用链允许实现更复杂的功能，并允许将代码组成子函数. |
SolidJS |
| 这些函数的api类似于钩子. |
在引擎盖下, 钩子和响应式原语都是连接到各自的反应和SolidJS变更管理系统的一种方式. 总的来说，这两个框架处理 组件功能 以类似的方式，但使用不同的方法或命名来完成.
让我们来探讨更复杂的功能差异:状态、记忆和效果.
有时，框架需要跟踪与组件相关的信息和某些属性. 这个概念被称为状态，可以在反应中使用 使用状态 函数. 在SolidJS中，这个概念被称为信号，其对应的创建函数为 创建Signal.
状态和信号存放组件数据(以道具的形式), 使框架能够跟踪值的变化. 当框架检测到变化时，该组件将呈现相应的值。.
effect是一个特殊的函数，是反应和SolidJS的核心构建块. 而不是响应用户与浏览器的直接交互, 当组件状态改变时，会触发一个效果, 类似于回调或事件侦听器.
类定义一个效果 使用效果 函数，而SolidJS使用 创建效果 函数.
记忆通过缓存昂贵的组件渲染结果来优化框架性能, 并在适当的时候使用缓存的值，而不是重新计算值. 在反应中，我们 实现记忆有关 通过使用三种钩子之一:
记忆挂钩 | 使用 |
|---|---|
| 纯粹的组件 |
| 依赖于函数道具的组件 |
| 昂贵的操作和组件操作 |
反应依赖于它的应用程序的记忆来快速渲染. 与此形成鲜明对比的是, 因为它优化了更改跟踪和DOM使用, SolidJS很少需要显式记忆. 对于组件道具更改不需要渲染更新的极端情况, SolidJS通过一个 方法称为 创建Memo.
SolidsJS和反应的性能差异超出了它们的记忆方法. 这两种语言以非常不同的方式处理HTML操作. 这种差异的焦点在于它们如何更新浏览器DOM.
反应的创始人给了它一个轻量级的虚拟DOM来与浏览器的实际DOM接口. 反应的代码会导致自己的虚拟DOM在组件呈现时更新. 然后反应将更新后的虚拟DOM与浏览器的DOM进行比较, 识别的更改渗透到实际的页面结构中(例如.e.(DOM).
我们可以这么说——因为反应默认会重新渲染组件, 依赖于DOM差异计算的更新- react做了两次工作. 因为它每次都渲染组件, 反应需要记忆来避免不必要的, 重复的计算.
相比之下，SolidJS的创始人设法避开了所有这些往返. 通过使用一种叫做 细粒度的反应性 来直接操作浏览器的DOM, SolidJS提供了更少的内存占用和极快的页面编辑和注入代码应用程序.
细粒度的反应性跟踪变量的相互依赖性. 基于变量依赖和编辑链, SolidJS限制我们的页面结构更新，以反映只改变了什么, 绕过不必要的组件渲染. 这使得反应的性能得到了巨大的提升.
虽然我很想在这里结束这篇文章，但是由于它的速度，SolidJS是明显的赢家, 讨论这两个框架在开发人员效率方面是如何叠加的仍然很重要.
当我们考虑反应与SolidJS的开发人员生产力时，有几个关键的考虑因素:
客观的 | 反应 | SolidJS |
|---|---|---|
识别和跟踪组件依赖关系 |
✔ 用使用效果手动标记组件依赖. |
✔ 自动检测和跟踪组件依赖关系. |
内部的破坏属性 |
✔ 支持此特性. |
✘ 不支持开箱即用的功能，但是这个 公用事业项目 弥合差距. |
使用没有标记的状态组件 |
✔ 需要更多的脚本来实现多个组件之间的共享状态. |
✔ 高效且原生地支持此功能. |
对项目特定用例的回顾可以揭示哪个框架是更好的选择, productivity-wise.
我对SolidJS和反应都有相当的经验. 从我的角度来看，SolidJS显然是两者中的赢家. SolidJS与反应的强大和健壮的特性相匹配. 此外，它为最终用户提供了反应无法比拟的快速响应.
对于一个 开发人员反应 来加快SolidJS的速度, 哪些可以利用这些教训, 结构, 以及在反应的生命周期中学习的抽象方法, 几乎没有学习曲线. 我建议你现在就开始使用SolidJS——它可能是前端的未来.
Toptal工程博客的编辑团队向 Yonatan Bendahan 用于回顾本文中介绍的技术内容.
SolidJS是一个JavaScript框架，它支持将数据绑定到元素，然后同步并显示在网页上.
是的, SolidJS比反应好, 因为SolidJS提供了比反应更快的开发体验.
SolidJS使用一种称为细粒度反应的系统直接将更新写入网页. 相反，反应用它的页面更改更新一个虚拟DOM. 将虚拟DOM与当前页面的DOM进行比较，只写入差异. 反应的方法比SolidJS的方法慢.
反应是健壮的客户端接口的行业标准. 反应拥有庞大的库生态系统、强大的知识库和庞大的开发人员池. SolidJS较新，无法在这些领域竞争.
世界级的文章，每周发一次.
世界级的文章，每周发一次.
作者都是各自领域经过审查的专家，并撰写他们有经验的主题. 我们所有的内容都经过同行评审，并由同一领域的Toptal专家验证.