React.js VS Solid.js，作为初学者，你应该学习哪个？

作为初学者，哪个框架对您的开发之旅最有帮助？

作为第一次接触 javascript 前端框架的初学者，您可能想知道一些事情，例如，哪个最快，哪个最常用，哪个更容易学习或哪个赚更多。好吧，如果您想知道类似的事情，那么您偶然发现了这篇文章，因为我们将讨论 Solid.js 或 React.js 哪个框架最适合初学者，并回答您的一些问题可能有。

由于这是一篇针对初学者的文章，我将对在讨论前端框架时使用的一些术语进行简短的解释。请记住，我们不会讨论任何高级的东西，例如水合方法、服务器端渲染、差异算法、粒度等。

• DOM : 也称为文档对象模型是 HTML 文档的 API，它定义了文档的逻辑结构以及可以访问和操作文档的方式。
• JSX/多伦多证券交易所 ：这是分别对 javascript 和 typescript 的语法扩展。你会经常看到它们，尤其是在包含 React.js 或 Solid.js 代码的代码库中。具有 .jsx 或 .tsx 文件扩展名的文件将包含 JSX 或 TSX 代码。
• 虚拟DOM（VDOM） ：这是存储在由 React.js 等库创建的内存中的 DOM 的表示，它通过使用 diffing 算法与真实 DOM 同步。
• 差异化 ：这是一种算法，它接受 2 个输入并找出这些输入之间的差异。由于它是一种算法，因此不同的框架和库以不同的方式实现它，而 React.js 就是其中之一。
• 成分 ：React 和 Solid 都有称为组件的东西，它们可以是不同的可重用代码，例如导航菜单、下拉菜单、按钮、表单、助手等。您拥有的组件种类取决于您。两种类型的组件是函数组件和类组件。这只是一个简单的总结，
• 渲染 ：这是您的框架将您的代码转换为浏览器可以理解的 DOM（文档对象模型）节点的过程。

好的，现在我们已经解决了一些令人困惑的术语，让我们来谈谈您最好奇的是什么——哪个更流行或更广泛使用？

人气

毫无疑问，React.js 比 Solid.js 更受欢迎，因为它更老，而且它是由一个更知名的公司/团队（即 Meta）制作的。随着 React.js 于 2013 年发布，它比 Solid.js 更受欢迎也就不足为奇了，后者于 2018 年首次开源并于 2021 年正式发布 1.0 版，比 React 大约年轻 5 年。 js。 Meta、Netflix、Airbnb、Dropbox 等公司使用 React.js。让 React.js 成为你学习的第一个框架并不是一个坏主意。

如果你正在考虑一个框架，因为它很受欢迎，我建议你使用 React.js 而不是 Solid.js，因为它提供了更多的工作机会。

注意 : 从这里开始 React.js 将被称为 React 或 react 而 Solid.js 将被称为 solidjs 或 Solid

学习曲线和发展经验

React 和 Solid 的学习曲线都相当低。对于刚从 HTML、CSS 和 Vanilla JavaScript 训练营出来的初学者来说，它们是理想的前端框架，只要对这 3 个有基本了解，掌握 React 或 Solid 应该不会花费超过 3 个月的时间。

但 您需要牢记以下几点：

• React 具有钩子，这些钩子是您在函数组件中使用的函数，它们为您提供仅在类组件中可用的功能。它们不能在功能组件之外使用，因为它们主要是为了在它们内部使用而构建的。如果您尝试在功能组件之外使用它们，您将遇到错误。
• 另一方面，Solid 具有可以在组件内部和外部使用的基元。 Solid 只有函数组件，所以您不必担心遇到类组件并想知道“这到底是什么？”。
• 在 React 中，要在组件中存储状态，您必须使用 useState 挂钩。在 Solid 中，您必须使用 createSignal 原语或 createStore 原语。 CreateStore 更多用于数组和对象，而 createSignal 更多用于存储数字、字符串和布尔值。我敢肯定你想知道为什么有两件事情做同样的事情，Solid 这样做是因为他们使 createStore 以这样一种方式使用它来嵌套对象和数组，使其更快、更轻、更具反应性.我不会对此进行太多详细介绍，但是如果您想了解有关它的详细信息，可以找到它 这里 .

说了这么多，我敢肯定你仍然想知道哪个更容易学习，好吧，我不得不说 Solid 在这方面占了上风。由于需要担心的具体事情较少，组件/帮助程序使很多事情变得更容易，Solid 只是让 React 看起来仍处于测试阶段，我敢肯定，作为初学者，你不会想要处理工作的复杂性带有测试版软件。

例如，Solid 有一个名为 For 的简洁内置组件，它有助于简化在 JSX 代码中处理数组或其中数据的复杂性。例如：

This code was pulled from the Solid.js documentation

现在这是 React 中的相同代码

注意到 For 组件的细微差别和缺失了吗？在这种特殊情况下，根据您的类型，您可能更喜欢 React，但是使用 Solid 具有的内置组件，很难说开发体验没有更好。

稍后，一旦你开始使用更复杂的库并编写更复杂、更繁重的代码，你就会遇到 React 重新渲染的障碍，直到今天这让全世界的开发人员都感到烦恼。当你无限次地重新初始化某个东西只是为了发现它只是 React 在做它的 shananigans 时，你会明白。

当您决定学习 Solid 或 React 时，您将学习和理解更多的东西。在本文的最后，我将提供他们两个文档的链接，所以一旦你完成了，请随意阅读你选择的任何框架。

表现

现在让我们进入最重要的部分，即公司或初创公司在决定他们的技术堆栈之前应该考虑的部分，即性能。在这个类别中没有竞争，Solid 将 React 淘汰出局。这里有几张照片可以为您提供一些背景信息

In all these comparisons lower is better

我知道这些对你们中的一些人来说可能看起来像胡言乱语，但表格分析了每个框架执行第一列中的任务所花费的时间和内存。在第一张图片中，您会注意到 Solid 比 vanilla javascript 慢 5%，而 React 则慢约 93%。这是一个巨大的利润。这是查看完整表格的链接 交互式结果 (krausest.github.io)

Solid 几乎和 vanilla JS 一样快，没有多少框架可以超越它的速度。另一方面，React 使用 VDOM 等技术使自己膨胀，即使是最小的更改也会重新渲染整个组件，将长期处置的组件保留在内存中等等。Solid 的做法非常不同，仅更新已更改的内容并尽最大努力仅通过惰性道具评估实时渲染和加载需要的东西，然后在不再需要它们时将其删除。换句话说，这被称为消失组件方法。如果需要，我可以在另一篇文章中写下这个和其他高级概念。

我敢肯定你可能还在问“迈克尔，是什么让 Solid.js 如此快速？”，我很高兴你问到，幸运的是，我从 Solid.js 的创建者 Ryan Carniato 那里得到了答案.他回答：

虽然 Solid 有一个用于创作的组件模型，但它对其执行方式的影响很小。通过在运行时转义组件模型，Solid 能够比使用编译或 VDOM 进行差异的其他库进行更有效的更新。 - 瑞恩卡尼亚托

您可以在 Ryan 发布的文章中找到更多相关信息（ 细化思考：SolidJS 为何如此高效？ — 开发社区‍‍ ) 他在其中更详细地解释了这一点。

我们可以继续讨论 Solid 如何在性能方面将 React 淘汰出局，但让我们继续讨论你们大多数人（如果不是所有人）都在考虑的事情，而且很可能是为了找出答案。

工作机会

工作机会。首先成为开发人员的最终目标之一。多年来，许多公司已经将 React 集成到他们的网站、应用程序甚至他们的公司基础设施中。直到今天，React 仍然是世界上最流行和使用最广泛的框架，无论您在哪里生活或工作，无论您身在何处，您都会遇到公司、个人、政府机构甚至咖啡店想要雇用React 开发人员。使用 React 有无数的工作机会，但请记住，伴随着无数的工作机会，也有无数人希望接受这些工作。

另一方面，我还没有遇到任何专门招聘 Solid.js 开发人员的公司 然而。 您可能会创建第一个创建第一个 Solid.js 开发人员职位列表的创业公司，谁知道‍♂️。 **** 说了这么多， **** 我非常确定这种情况在未来会有所改变，尤其是在 React 开发人员每天表达的沮丧程度的情况下（我就是其中之一）。

社区支持和文档

React 社区是开发者空间中最大的社区之一。在撰写本文之日，React 大约 9 岁，这不足为奇。另一方面，Solid 刚刚成立超过 4 年，它的社区要小得多，但这不会永远保持不变。

在文档和覆盖范围方面，React 在官方文档和文档之外都有更多的文档，开发人员在使用它时编写、记录和截屏关于他们的应用程序、障碍、问题、里程碑或挫折。 SolidJS 在网上发布了一些文章和视频，团队和创建者是社区的活跃成员。但目前无法与 React 相比。

综上所述，请记住 Solid 和 React 非常相似，也非常不同，因此如果您遇到 SolidJS 特定问题，您可以随时向整个社区提问，因为每个人都在这里学习和成长。令您惊讶的是，一位从未接触过 SolidJS 的高级 React 开发人员可能会帮助您解决问题。

反应文档： 入门 - React (reactjs.org)

可靠的文档： SolidJS · 反应式 Javascript 库

结论

总之，如果我要提出建议，我会说从 React 开始 马上。 我不确定您会在何时何地看到这篇文章，也许 SolidJS 已经从 ReactJS 手中夺走了王冠。但截至 2022 年 9 月 1 日，React 是作为初学者从 Vanilla javascript 开始使用的框架/库。只有当你学习完 React 并磨练了你的技能后，我才会 强烈 建议学习 Solid，因为它性能更高，开发体验更好，并且更接近社区。

如果这篇文章对您有帮助，请点个掌声，分享并发表您对它的想法的评论。如果我遗漏了什么或犯了任何错误，请随时告诉我。我一直在寻找改进的方法。

快乐编码，祝你有美好的一天✌️。

查看我的其他一些文章：

[

使用 VelocityX 和 Sensor Plus 将视差动画添加到 Flutter 应用程序

学习在 Flutter 中使用 Tween 动画的新方法

博客.devgenius.io

](https://blog.devgenius.io/add-parallax-animation-to-your-flutter-app-using-velocityx-and-sensor-plus-c0a832e4e12f)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/11826/53440321