建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
我最近學(xué)習(xí)了Svelte，并學(xué)會(huì)了如何建立一個(gè)簡(jiǎn)單的購(gòu)物車(chē)應(yīng)用。此外，我忍不住注意到它具有React的許多相似之處。令人驚訝的是，看到競(jìng)爭(zhēng)者的競(jìng)爭(zhēng)者有多令人驚訝，它可以是建立用戶(hù)界面的最受歡迎的JavaScript庫(kù)之一。在本文中，我將比較Svelte與對(duì)React以及它們?cè)谀缓蟊舜说募夹g(shù)。
創(chuàng)新互聯(lián)長(zhǎng)期為上千家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為平頂山企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)，平頂山網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
> Image by Iván Tamás from Pixabay
Svelte是一個(gè)編譯器，而React使用Virtual DOM
react和svelte，兩者都提供了類(lèi)似的基于組件的架構(gòu) - 這意味著都能啟用CDD自下而上的開(kāi)發(fā)，并且都能在應(yīng)用程序和平臺(tái)(GitHub)之間的工具和平臺(tái)之間共享它們的組件。
> Example: React components shared on Bit.dev using Bit
它們之間的顯著差異是Svelte是一個(gè)編譯器，它在構(gòu)建時(shí)間期間將應(yīng)用程序轉(zhuǎn)換為理想的JavaScript，而不是像React，使用虛擬DOM在運(yùn)行時(shí)解釋?xiě)?yīng)用程序代碼。是的，這是一個(gè)很復(fù)雜的術(shù)語(yǔ)，讓我一探究竟。
> Svelte vs. React Behind the Scenes
React虛擬DOM
React使用稱(chēng)為Virtual DOM(VDOM)的概念，其中UI的虛擬表示保存在內(nèi)存中，并通過(guò)名為reconciliation的過(guò)程與真實(shí)DOM同步。reconciliation進(jìn)程將在虛擬DOM(內(nèi)存中的對(duì)象之間找到差異，其中我們將最新更新推送到UI)和Real DOM(DOM包含先前呈現(xiàn)的UI)。使用特定啟發(fā)式算法，它決定如何更新UI。這一過(guò)程大多是快速，可靠，無(wú)可比擬的反應(yīng)性。雙關(guān)語(yǔ)意圖。
為實(shí)現(xiàn)此目的，React捆綁一定數(shù)量的架空代碼，該代碼將在瀏覽器的JS引擎中運(yùn)行，以根據(jù)各種用戶(hù)交互監(jiān)視和更新DOM。
Svelte編譯器
Svelte純粹是一個(gè)編譯器，當(dāng)您構(gòu)建生產(chǎn)應(yīng)用程序時(shí)，將應(yīng)用程序轉(zhuǎn)換為理想的JavaScript代碼。意味著當(dāng)應(yīng)用程序運(yùn)行以更新DOM時(shí)，它不會(huì)注入任何架空代碼以在瀏覽器中運(yùn)行。
與React相比，這種方法相對(duì)較新，這通常利用虛擬DOM。
Svelte強(qiáng)勢(shì)的地方
讓我們了解我們可以使用Svelte獲得的主要優(yōu)點(diǎn)是什么。
- 與React甚至其他框架相比，古劍時(shí)間快速。匯總插件的用法作為捆綁程序可能是這里的秘密。
- 與React相比，打包尺寸較小，這是一個(gè)巨大的加分點(diǎn)。即使使用我構(gòu)建的購(gòu)物車(chē)應(yīng)用程序，初始加載時(shí)間和持續(xù)時(shí)間呈現(xiàn)UI非常低，只有我添加的圖像只需要一些時(shí)間:)。
- 綁定類(lèi)和變量相對(duì)容易，并且在綁定類(lèi)時(shí)不需要自定義邏輯。
- 在組件本身內(nèi)的范圍CSS
- 允許靈活的樣式。
- 與其他框架相比，更容易理解并開(kāi)始入門(mén)，因?yàn)镾velte的重要部分是普通的JavaScript，HTML和CSS。
- 與React的上下文API相比，更直接的狀態(tài)實(shí)現(xiàn)，授予上下文API提供了更多功能，并且Svelte可能足夠簡(jiǎn)單以進(jìn)行常見(jiàn)方案。
Svelte落后的地方
讓我們了解Svelte有缺點(diǎn)的地方。
- Svelte不會(huì)偵聽(tīng)參考更新和陣列變化，這是一個(gè)bummer，開(kāi)發(fā)人員需要積極尋找此問(wèn)題，并確保重新分配陣列，以便更新UI。
- DOM事件的使用風(fēng)格也可能很煩人，因?yàn)槲覀冃枰裱璖velte的特定語(yǔ)法而不是使用預(yù)定義的JS語(yǔ)法。不能直接使用像React中的onclick，而是必須使用特殊語(yǔ)法，例如：on:click。
- Svelte是一個(gè)新的社區(qū)支持的新框架，從而不支持繁重的生產(chǎn)應(yīng)用可能需要的廣泛插件和集成。反應(yīng)是這里有強(qiáng)大的競(jìng)爭(zhēng)者。
- 沒(méi)有額外的改進(jìn)。積極控制您的代碼以及它如何運(yùn)行和嘗試在更新DOM時(shí)優(yōu)化，并且有時(shí)甚至在等待數(shù)據(jù)時(shí)提供自動(dòng)加載旋轉(zhuǎn)器。這些額外的功能和持續(xù)的改進(jìn)在Svelte中相對(duì)較低。
- 某些開(kāi)發(fā)人員可能無(wú)法使用其模板中的特殊語(yǔ)法，例如#IF和#ECHEACH，而是希望使用純粹的JavaScript，這是允許的。這可能會(huì)歸結(jié)為個(gè)人喜好。
結(jié)論
與React相比，Svelte的快速構(gòu)建時(shí)間和微小的打包尺寸非常有吸引力，特別是對(duì)于小日常應(yīng)用。然而，增強(qiáng)的功能(上下文API，懸疑等)，社區(qū)支持，廣泛的插件和集成以及某些語(yǔ)法簡(jiǎn)化確實(shí)渲染也有吸引力。
svelte比react更好，反之亦然?
嗯，與react相比，Svelte確實(shí)在某些特征中提供了明顯的改進(jìn)。但它可能仍然沒(méi)有重要或強(qiáng)大到足以完全取代react。React仍然堅(jiān)固且廣泛采用。Svelte有很多追趕。但是，概念明智，Svelte采取的編譯方法證明了虛擬DOM的差異不是構(gòu)建快速應(yīng)用的唯一方法，并且足夠好的編譯器可以獲得與它獲得的相同的工作。
那么您應(yīng)該使用哪種框架用于您的下一個(gè)應(yīng)用程序?
在我看來(lái)，在我看來(lái)，如果你正在構(gòu)建一個(gè)小應(yīng)用程序，就像一個(gè)簡(jiǎn)單的電子商務(wù)應(yīng)用程序，就推薦Svelte。如果您對(duì)JS，HTML和CSS有了很好的了解，它更容易掌握Svelte。您還可以使用Svelte構(gòu)建一些功能強(qiáng)大的快速和輕量級(jí)應(yīng)用程序。
對(duì)于需要多個(gè)集成和特定插件的巨大生產(chǎn)應(yīng)用程序，那么可能是react仍然可能是最好的方式。然后，很多就像React提供了Next.js，Svelte還提供了它的制作準(zhǔn)備的單頁(yè)應(yīng)用程序框架，稱(chēng)為Sapper，這可能值得研究。
兩位競(jìng)爭(zhēng)者都是建立輝煌的用戶(hù)界面的實(shí)用和有效的工具。截至現(xiàn)在的兩者之間的選擇主要是基于您的場(chǎng)景和偏好。正如我上面提到的那樣，宣布一個(gè)獲勝者挑戰(zhàn)，因?yàn)樗鼈兌急憩F(xiàn)得很精心，以實(shí)現(xiàn)他們的主要目標(biāo)。
我希望這篇文章能夠快速比較React和Svelte。決定哪個(gè)庫(kù)選擇您的下一個(gè)應(yīng)用程序會(huì)有所幫助。干杯!
本文由聞數(shù)起舞翻譯自Keshav Kumaresan的文章《React vs. Svelte: The War Between Virtual and Real DOM》，轉(zhuǎn)載請(qǐng)注明出處，原文鏈接：
https://blog.bitsrc.io/react-vs-sveltejs-the-war-between-virtual-and-real-dom-59cbebbab9e9
網(wǎng)站欄目：ReactvsSvelte：虛擬和真實(shí)DOM之間的戰(zhàn)爭(zhēng)
鏈接分享：http://www.dlmjj.cn/article/copgijd.html
