我最近了解了Svelte，并学习了如何构建一个简单的购物车应用程序。此外，我不禁注意到它与React有很多相似之处。令人惊奇的是，看到一个竞争者可以成为最流行的用于构建用户界面的JavaScript库之一。在本文中，我将比较Svelte和React以及它们在幕后的技术。>IvánTamás图片来自PixabaySvelte是一个编译器，而React使用VirtualDOMreact和svelte，它们都提供类似的基于组件的架构——这意味着它们都支持CDD自下而上的开发，并且都在工具和平台上工作，在应用程序之间共享它们的组件和平台（GitHub）。>示例：使用Bit在Bit.dev上共享的React组件它们之间的显着区别在于Svelte是一个编译器，可以在构建期间将应用程序转换为理想的JavaScript，而不是像React，后者在运行时使用虚拟DOM，同时解释应用程序代码.是的，这是一个复杂的术语，让我深入研究一下。>Svelte与React幕后对比ReactVirtualDOMReact使用一个称为虚拟DOM(VDOM)的概念，其中UI的虚拟表示保存在内存中，并通过称为协调的过程与真实DOM同步。协调过程将发现虚拟DOM（我们将最新更新推送到UI的内存中的对象）和真实DOM（DOM包含先前呈现的UI）之间的差异。使用某些启发式方法，它决定如何更新UI。该过程大多快速、可靠且反应性无与伦比。双关语。为了实现这一点，React捆绑了一定数量的开销代码，这些代码将在浏览器的JS引擎中运行，以根据各种用户交互监视和更新DOM。Svelte编译器Svelte纯粹是一个编译器，可在您构建生产应用程序时将您的应用程序转换为理想的JavaScript代码。这意味着当应用程序运行以更新DOM时，它不会注入任何开销代码以在浏览器中运行。与通常利用虚拟DOM的React相比，这种方法相对较新。Svelte的强大之处让我们了解使用Svelte可以获得哪些主要优势。与React甚至其他框架相比，Gujian是快的。将rollup插件用作捆绑器可能是这里的秘密。与React相比，包大小更小，这是一个巨大的优势。即使使用我构建的购物车应用程序，初始加载时间和呈现UI的持续时间也很短，只有我添加的图像才需要一些时间:)。绑定类和变量相对容易，并且在绑定类时不需要自定义逻辑。组件本身内的作用域CSS允许灵活的样式。与其他框架相比，它更容易理解和上手，因为Svelte的重要部分是纯JavaScript、HTML和CSS。比React的contextAPI更直接的状态实现，grantcontextAPI提供了更多的功能，Svelte对于常见的场景可能足够简单。Svelte落后的地方让我们了解了Svelte的缺点。Svelte不监听引用更新和数组更改，这很糟糕，开发人员需要积极寻找这个问题并确保重新分配数组以便更新UI。DOM事件的使用风格也很烦人，因为我们需要遵循Svelte特定的语法而不是使用预定义的JS语法。不能像React中那样直接使用onclick，必须使用特殊的语法，比如：on:click。Svelte是一个新的社区支持框架，不支持大量生产应用程序可能需要的大量插件和集成。回应是这里有强大的竞争者。没有额外的改进。主动控制您的代码及其行为方式，并在更新DOM时尝试优化，有时甚至在等待数据时提供自动加载微调器。这些额外的功能和持续改进在Svelte中相对较低。一些开发人员可能无法在他们的模板中使用特殊语法，如#IF和#ECHEACH，而更喜欢使用纯JavaScript，这是允许的。这可能归结为个人喜好。结论与React相比，Svelte的快速构建时间和小巧的包尺寸非常有吸引力，特别是对于小型日常应用程序。然而，增强功能（上下文API、悬念等）、社区支持、广泛的插件和集成以及一些语法简化也确实具有吸引力。苗条比反应更好，反之亦然？好吧，与React相比，Svelte确实在某些功能上提供了显着的改进。但它可能仍然不够重要或不够强大，无法完全取代React。React仍然很可靠并被广泛采用。Svelte有很多迎头赶上的地方。但是，从概念上讲，Svelte所采用的编译方法证明，虚拟DOM差异并不是构建swift应用程序的唯一方法，并且足够好的编译器可以完成与它相同的工作。那么你应该为你的下一个应用程序使用哪个框架呢？在我看来，如果你正在构建一个小型应用程序，比如一个简单的电子商务应用程序，建议使用Svelte。如果你对JS、HTML和CSS有很好的理解，那么掌握Svelte会更容易。您还可以使用Svelte构建一些功能强大的快速轻量级应用程序。对于需要多个集成和特定插件的大型生产应用程序，也许React可能仍然是最好的方法。然后，就像React提供Next.js一样，Svelte还提供其生产就绪的单页应用程序框架，称为Sapper，这可能值得研究。这两个竞争者都是构建出色用户界面的实用且有效的工具。到目前为止，两者之间的选择主要取决于您的场景和偏好。正如我上面提到的，宣布获胜者是一项挑战，因为他们都为实现他们的主要目标而一丝不苟地表现。我希望这篇文章是对React和Svelte的快速比较。决定为您的下一个应用程序选择哪个库会有所帮助。干杯!本文由文舒琪伍翻译自KeshavKumaresan的文章《React vs. Svelte: The War Between Virtual and Real DOM》，转载请注明出处，原文链接：https://blog.bitsrc.io/react-vs-sveltejs-the-war-between-virtual-and-real-dom-59cbebbab9e9
