React、Vue和Angular之後的Svelte前端框架 - Oliver

banq發表於2021-05-16
ReactVueAngular前端框架

Svelte是一個基於元件的前端框架，例似React和Vue：
  • -更少的程式碼
  • -沒有虛擬DOM
  • -真正的反應性/響應性/reactive

該專案已獲得MIT許可，並於2016年11月26日由其建立者Rich Harris釋出。該專案本身是在TypeScript中實現的。目前，它在GitHub上擁有47k星，並且擁有活躍的社群，其中包括391位貢獻者。社群非常活躍，並且與React不同，沒有龐大的公司來支援它。但是不用擔心，斯維爾特不會很快消失！
 

它是如何工作的？
與React或Vue不同，Svelte不使用虛擬DOM或像Angular這樣的變更檢測演算法。相反，它帶有一個編譯器，編譯器解析您的程式碼併發出可精確更新DOM的新程式碼。
這意味著不需要進行任何區分檢查，只進行逐步地更新DOM，瀏覽器這樣處理起來就不吃力。因為Svelte不需要鉤子來更新元件的狀態，編譯器可以做更多的事情。
一條簡單的普通JavaScript語句就足夠了。然後將該語句編譯為理狀態更改的程式碼。
就像React具有* .jsx檔案，Vue具有* .vue單檔案元件一樣，Svelte也具有* .svelte檔案。類似於Vue中的單檔案元件，一個苗條的檔案可以包含HTML，JavaScript和CSS。您可以在下面看到一個示例：

<script>
   const greeting = 'Hello Svelte';
<script>
<style>
   p{ margin:0 auto; }
</style>
<p>{greeting}</p>


下面是另一個Svelte內建反應性的示例，請看一下下面顯示的元件。沒有（React）掛鉤，沒有redux，沒有狀態管理庫。僅純JavaScript和指令。這就是Svelte編譯器的強大功能！

<script>
  let  count = 0;
  function handleClick(){
   count += 1;
  }
</script>
<sytle>
  button {
    ......
  }
</sttyle>
<button on:click={handleClick}>
    Clicked {count}{count ===1 ? 'time':'times'}
</button>

注意到“Clicked {count}{count ===1 ? 'time':'times'}”當變數count值改變時，Svelte會渲染這部分的HTML。
您所看到的是相對平常的程式碼，但這足以使結果完全具有響應性。而React中的相同功能將使您需要編寫更多程式碼，並使更多掛鉤和函式正常工作。
 

是什麼使Svelte如此強大？
Svelte的方法具有簡單性和強大功能，因此功能如此強大。虛擬DOM的實現雖然也可以使單頁應用程式變得引人注目，但這要付出一定的代價。例如，比較虛擬DOM和實際DOM，然後在執行時應用逐步更改也會降低效能，有時會帶來複雜性；將所有這些都移至編譯步驟，然後讓瀏覽器執行其擅長的工作（管理DOM），可以使您的應用程式更快，捆綁包大小更小，交付的前端程式碼中庫/框架的權重大大降低。
您是否還記得所有使許多其他庫與虛擬DOM相容的整合庫？是的，我知道您並不總是需要這些。但是使用Svelte，您將永遠不需要它們，因為沒有虛擬DOM。
官方文件非常棒，其中涵蓋了每個重要功能的精彩教程。它寫得很好，並且很容易跟進。

vscode外掛

相關文章