我最近學習了Svelte，并學會了如何建立一個簡單的購物車應用。此外，我忍不住注意到它具有React的許多相似之處。令人驚訝的是，看到競爭者的競爭者有多令人驚訝，它可以是建立用戶界面的最受歡迎的JavaScript庫之一。在本文中，我將比較Svelte與對React以及它們在幕后彼此的技術。

[[417721]]

> Image by Iván Tamás from Pixabay

Svelte是一個編譯器，而React使用Virtual DOM

react和svelte，兩者都提供了類似的基于組件的架構 - 這意味著都能啟用CDD自下而上的開發，并且都能在應用程序和平臺(GitHub)之間的工具和平臺之間共享它們的組件。

> Example: React components shared on Bit.dev using Bit

它們之間的顯著差異是Svelte是一個編譯器，它在構建時間期間將應用程序轉換為理想的JavaScript，而不是像React，使用虛擬DOM在運行時解釋應用程序代碼。是的，這是一個很復雜的術語，讓我一探究竟。

> Svelte vs. React Behind the Scenes

React虛擬DOM

React使用稱為Virtual DOM(VDOM)的概念，其中UI的虛擬表示保存在內存中，并通過名為reconciliation的過程與真實DOM同步。reconciliation進程將在虛擬DOM(內存中的對象之間找到差異，其中我們將最新更新推送到UI)和Real DOM(DOM包含先前呈現的UI)。使用特定啟發式算法，它決定如何更新UI。這一過程大多是快速，可靠，無可比擬的反應性。雙關語意圖。

為實現此目的，React捆綁一定數量的架空代碼，該代碼將在瀏覽器的JS引擎中運行，以根據各種用戶交互監視和更新DOM。

Svelte編譯器

Svelte純粹是一個編譯器，當您構建生產應用程序時，將應用程序轉換為理想的JavaScript代碼。意味著當應用程序運行以更新DOM時，它不會注入任何架空代碼以在瀏覽器中運行。

與React相比，這種方法相對較新，這通常利用虛擬DOM。

Svelte強勢的地方

讓我們了解我們可以使用Svelte獲得的主要優點是什么。

• 與React甚至其他框架相比，古劍時間快速。匯總插件的用法作為捆綁程序可能是這里的秘密。
• 與React相比，打包尺寸較小，這是一個巨大的加分點。即使使用我構建的購物車應用程序，初始加載時間和持續時間呈現UI非常低，只有我添加的圖像只需要一些時間:)。
• 綁定類和變量相對容易，并且在綁定類時不需要自定義邏輯。
• 在組件本身內的范圍CSS
• 允許靈活的樣式。
• 與其他框架相比，更容易理解并開始入門，因為Svelte的重要部分是普通的JavaScript，HTML和CSS。
• 與React的上下文API相比，更直接的狀態實現，授予上下文API提供了更多功能，并且Svelte可能足夠簡單以進行常見方案。

Svelte落后的地方

讓我們了解Svelte有缺點的地方。

• Svelte不會偵聽參考更新和陣列變化，這是一個bummer，開發人員需要積極尋找此問題，并確保重新分配陣列，以便更新UI。
• DOM事件的使用風格也可能很煩人，因為我們需要遵循Svelte的特定語法而不是使用預定義的JS語法。不能直接使用像React中的onclick，而是必須使用特殊語法，例如：on:click。
• Svelte是一個新的社區支持的新框架，從而不支持繁重的生產應用可能需要的廣泛插件和集成。反應是這里有強大的競爭者。
• 沒有額外的改進。積極控制您的代碼以及它如何運行和嘗試在更新DOM時優化，并且有時甚至在等待數據時提供自動加載旋轉器。這些額外的功能和持續的改進在Svelte中相對較低。
• 某些開發人員可能無法使用其模板中的特殊語法，例如#IF和#ECHEACH，而是希望使用純粹的JavaScript，這是允許的。這可能會歸結為個人喜好。

結論

與React相比，Svelte的快速構建時間和微小的打包尺寸非常有吸引力，特別是對于小日常應用。然而，增強的功能(上下文API，懸疑等)，社區支持，廣泛的插件和集成以及某些語法簡化確實渲染也有吸引力。

svelte比react更好，反之亦然?

嗯，與react相比，Svelte確實在某些特征中提供了明顯的改進。但它可能仍然沒有重要或強大到足以完全取代react。React仍然堅固且廣泛采用。Svelte有很多追趕。但是，概念明智，Svelte采取的編譯方法證明了虛擬DOM的差異不是構建快速應用的唯一方法，并且足夠好的編譯器可以獲得與它獲得的相同的工作。

那么您應該使用哪種框架用于您的下一個應用程序?

在我看來，在我看來，如果你正在構建一個小應用程序，就像一個簡單的電子商務應用程序，就推薦Svelte。如果您對JS，HTML和CSS有了很好的了解，它更容易掌握Svelte。您還可以使用Svelte構建一些功能強大的快速和輕量級應用程序。

對于需要多個集成和特定插件的巨大生產應用程序，那么可能是react仍然可能是最好的方式。然后，很多就像React提供了Next.js，Svelte還提供了它的制作準備的單頁應用程序框架，稱為Sapper，這可能值得研究。

兩位競爭者都是建立輝煌的用戶界面的實用和有效的工具。截至現在的兩者之間的選擇主要是基于您的場景和偏好。正如我上面提到的那樣，宣布一個獲勝者挑戰，因為它們都表現得很精心，以實現他們的主要目標。

我希望這篇文章能夠快速比較React和Svelte。決定哪個庫選擇您的下一個應用程序會有所幫助。干杯!

本文由聞數起舞翻譯自Keshav Kumaresan的文章《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