JavaScript 是最常用的编程语言之一，因为它可以创建客户端和服务器端应用程序。
JavaScript 有许多框架和库可以简化 Web 应用程序的创建并扩展它们的功能。
Svelte 和 React 都是深受开发者喜爱的前端框架。 作为开发人员，您应该选择哪一个？ 本文将介绍 Svelte 与 React 的争论，讨论它们的差异并说明在何处使用它们。
什么是 Svelte？
Svelte 是一个开源的 JavaScript 在线编译器。 与大多数在浏览器中完成大部分工作的 JavaScript 框架不同，Svelte 使用其编译器在构建期间优化其代码。
Svelte 由 Rich Harris 于 2016 年创建，此后吸引了庞大的用户群。 根据 Stack Overflow 2022 调查，Svelte 是最受欢迎的 JavaScript 框架之一。
要创建 Svelte，您必须先在本地计算机上安装 Node.js。
安装 NodeJS 后，您可以使用以下命令开始使用 Svelte：
npx degit sveltejs/template moz-todo-svelte cd moz-todo-svelte npm install npm run dev
这就是将在您的浏览器上呈现的内容
苗条的特点
- 反应性。 Svelte 在构建时更新 DOM。 开发人员在使用该框架时不必使用外部状态管理库。
- 使用纯 JavaScript。 熟悉 HTML、CSS 和纯 JavaScript 的开发人员将很容易学习 Svelte。
- 轻量级，使用更少的代码。 您可以使用以下几行代码在 Svelte 中创建一个简单的 hello world：
<script>
let name = "World"
</script>
<h1>Hello {name}!</h1>
使用 Svelte 的好处
- 体积小：与其他框架相比，Svelte 的应用程序体积小，加载速度快。
- 语法简单：Svelte 语法简单易学，易于学习。
- 不使用虚拟 DOM：与大多数框架不同，Svelte 缺少虚拟 DOM，这会导致快速渲染。
- 出色的性能：此在线编译器在构建时编译代码，创建快速且小巧的应用程序。
什么是反应？
React 是一个流行的 JavaScript 库，用于创建用户界面。 这个开源库由 Meta（前身为 Facebook）维护，并为 Airbnb、Facebook 和 Instagram 等流行网络应用程序的用户界面提供支持。
第一家使用 React 的公司是 Facebook 的 newsfeed。 当该库于 2013 年开源时，更多的公司选择了它，它已成为现代开发领域中使用最广泛的 JavaScript 库之一。
React 也在 NodeJS 上运行。 在您的 PC 上安装 Node 后，运行这些命令来设置您的 React 应用程序：
npx create-react-app my-app
cd my-app npm start
这是 React 应用程序的文件结构
反应的特点
- JavaScript 语法扩展 (JSX)：JSX 允许开发人员在包含 JavaScript 代码的同一文件中编写 HTML 代码。 JSX 与 HMTL 的不同之处还在于它如何命名其分区 (DIV)，因为它使用“className”(camelCase) 而不是 class。
- 虚拟文档对象模型 (VDOM)：React 通过其虚拟 DOM 具有真实 DOM 的轻量级表示。 当一个对象的状态改变时，VDOM 只更新真实 DOM 中的那个对象，而不是更新整个项目。
- 模块化架构：React 允许开发人员编写小型且可重用的组件。 更新和维护这些组件也很容易。
使用 React 的好处
- 基于组件：React 允许开发人员将他们的代码拆分为小的可重用组件。
- 支持各种库：您可以使用各种库和框架扩展 React 应用程序的功能，以支持身份验证等功能。
- 声明式：使用 React 创建交互式用户界面非常简单。 React 应用程序的声明式视图使阅读和调试代码变得简单。
- 灵活：您可以使用 React 制作各种 Web 应用程序，从社交媒体和娱乐平台到教育网站。
Svelte 与 React：相似之处
尽管 Svelte 和 React 不同，但它们有一些相似之处：
- 基于组件。 Svelte 和 React 都遵循基于组件的架构。 这种方法允许开发人员将他们的代码库分成小块。
- 反应性。 这两个框架都消除了手动干预，因为它们的应用程序会在数据更改时自动更新。
Svelte 与 React：差异
#1。 尺寸
Svelte 的 .gzip 版本只有 1.6 KB。 因此，您可以快速加载此应用程序并确保高性能。
React 的 .gzip 版本是 42.2 KB。 该应用程序稍大一些，因为它带有 ReactDOM。
#2。 表现
React 使用虚拟 DOM，这是一种临时内存存储，用于对用户界面所做的更改。 因此，React 比普通 JavaScript 中使用的传统文档对象模型 (DOM) 更快，因为虚拟 DOM 会延迟更新，直到可以有效地完成渲染和更新。
Svelte 不使用虚拟 DOM。 该框架在构建时解释其代码。 Svelte 是一个无服务器优先的框架，只要分配/操作触发组件阶段的更改，它的 DOM 就会更新。
Svelte 中没有虚拟 DOM 使得 Svelte 应用程序比 React 更快。
#3。 维护
Svelte 在 2016 年推出时还不到十年。然而，这个在线编译器拥有一支了不起的开发和维护团队。
React 由 Meta、各种公司和个人开发人员维护。 这个库有一个专门的团队，解释为什么它总是引入新功能。
React 在维护方面胜出。
#4。 测试
Svelte 使用@testing-library/svelte 作为其测试框架。 该库旨在使用一种密切反映用户与应用程序交互方式的方法来测试应用程序。
React 使用 React 测试库从用户的角度测试组件。 如果您希望对测试过程进行精细控制，也可以使用 Enzyme 库。
Svelte 和 React 有专门的测试库来帮助开发人员构建功能性应用程序。 您还可以使用 Mocha 等外部测试框架来测试 Svelte 和 React 应用程序。
Svelte 是一个相当新的框架，与 React 相比，它的社区并不大。 使用 Svelte 的开发人员和公司的数量也很少。
React 拥有强大的社区支持，可以创建教程、指南、更新和组件。 它是最常用的 JavaScript 库之一，由技术巨头 Meta 维护。 从 React 社区获得帮助很容易，因为它庞大且支持。
React 赢得社区支持。 与 Svelte 相比，React 开发人员的需求量也很大。
#6。 图书馆
Svelte 有一个开源社区，可以为 React 提供额外的功能。 例如，您可以使用 SvelteNavigator 路由您的 Svelte 应用程序。 Svelte 还拥有强大的 UI 库，例如 Sveltestrap 和 Svelte Material UI。
React 得到其开源社区的支持，该社区创建工具和库来增强其功能。 例如，这个库有 Material UI 和 React Bootstrap，UI 库，也使用 React Router 进行路由。 React 使用 Next.js 和 Gatsby 进行服务器端渲染。
尽管 Svelte 的社区正在努力添加新的工具、框架和库，但 React 仍然遥遥领先。
#7。 语法和易用性
Svelte 语法简单，使用纯 HTML、JavaScript 和 CSS。 任何具有 HTML、CSS 和 JavaScript 基础知识的人都可以轻松掌握 Svelte。
React 具有陡峭的学习曲线，因为用户必须学习和掌握 JSX 和 CSS-in-JS 等新概念。 在 div 中命名类时，React 使用 className (camelCase)，这可能会使来自 HTML 和 CSS 的人感到困惑。
Svelte 在语法简单性方面优于 React，因为它更容易让那些了解 vanilla CSS、HTML 和 CSS 的人学习。
FeatureReact SvelteSize 42.2 KB1.6 KBPerformanceUses Virtual DOMDoesn’t use Virtual DOMMaintenanceMeta, Individual developers, and companyCore team of developers leaded Testing Use React Testing LibraryUses @testing-library/svelteCommunity supportHugeStill growingSyntaxJSXPPure HTML, JavaScript, and HTML
哪个最好？ Svelte 还是 React？
Svelte 和 React 是很棒的 JavaScript 库，可以创建范围广泛的应用程序。 他们都有自己的长处和短处，决定使用哪一个可能具有挑战性。 基于对特性和性能的分析，您可以按如下方式使用这些框架：
什么时候使用 Svelte？
- 构建小型项目：如果你想创建一个简单的网站，比如具有一些功能的投资组合网站，Svelte 是合适的。
- 您重视性能和优化代码：Svelte 不使用虚拟 DOM，这使其比 React 应用程序更快。
- 您想构建动态用户界面：此编译器将代码编译成高度优化的 JavaScript，使其非常适合经常变化的用户界面。
什么时候使用反应？
- 构建复杂的用户界面时：如果你想构建具有复杂界面的应用程序，React 的可重用组件特性使其成为一个完美的选择。
- 构建大型应用程序时：React 具有大量功能，可以轻松构建大型应用程序。
- 在寻找具有许多库、工具和强大支持的库时：React 得到了大型社区的支持，因此您可能会快速获得帮助。
结论
我们现在希望您能参与 Svelte 与 React 的辩论，并说明它们的异同和最佳用例。 始终确保您确定要创建的应用程序的性质，以便做出明智的决定。
如果您在创建小型应用程序和构建动态界面时重视速度，那么 Svelte 是合适的。 另一方面，如果你想构建复杂的用户界面，想要一个有强大支持的库，以及在构建大型应用程序时，React 应该是你的首选库。
您还可以探索 React 和 React Native 之间的区别。
