原文出處：https://dev.to/mikenikles/why-i-moved-from-react-to-svelte-and-others-will-follow-210l
React 多年來一直是我的首選
2015 年 10 月 14 日，我主持了 首屆 React 溫哥華聚會。當時我在一年中的大部分時間裡都在使用 React，並希望將志同道合的開發人員聚集在一起。
那時的 React，我敢說，是 web 前端世界的革命性的。與 jQuery、Backbone.js 或 Angular 1.x 等替代方案相比，使用 React 進行開發感覺直觀、清新且富有成效。就個人而言，隔離建置塊（又名元件）的想法真的很吸引我，因為它自然會導致結構化、組織良好且更易於維護的程式碼庫。
在接下來的幾年裡，我一直密切關注 Angular 2.x+、Vue 等，但沒有一個是值得跳槽的選擇。
然後我了解了 Svelte
我第一次了解 Svelte 是在 2018 年年中，也就是 3.0 版發布前將近一年（見下文）。 “計算機，為我建置一個應用程式。”Rich Harris 讓我著迷Svelte。
如果您不熟悉 Svelte (https://svelte.dev/)，請存取網站並花 5 分鐘閱讀介紹。
閱讀了嗎？真的？優秀👍
看完影片後，我心中的主要問題是是否值得學習 Svelte 並開始將其用於新專案甚至現有專案。平心而論，Svelte 給我留下了深刻的印象，但仍然不足以讓我完全接受它。
Svelte 3.x
2019 年 4 月 22 日 - Svelte 3：重新思考反應性 是我一直在等待的博文。
請花一些時間閱讀博文並觀看影片 - 這是關於電子表格的，但我保證它很有趣😉
為什麼這是一件大事？首先，Svelte 團隊一直在談論版本 3，我想看看它的實際應用。另一方面，Svelte 及其承諾比我第一次聽說 React 時更讓我興奮。
那時我指導 Web 開發人員，並花了很多時間讓他們加快 React 的速度。為了開發 React 應用程式，需要學習、理解並在一定程度上掌握 JSX、CSS-in-JS、Redux、create-react-app、SSR 和其他概念。
對於 Svelte，這些都不是必需的。
<script>
let name = 'world';
</script>
<style>
h1 {
color: blue;
}
</style>
<h1>Hello {name}!</h1>
夠簡單嗎？我同意。事實上，它非常簡單，我將它推薦給我的 Web 開發新手。
很快，那段程式碼發生了什麼？
script 標籤是元件邏輯所在的位置。
style 標籤定義了這個元件的 CSS - 這些都不會洩漏到元件之外，所以我們可以安全地使用 h1 並且它只適用於這個元件。它是真正的 CSS，而不是偽裝成 CSS 的 Javascript 對像或偽裝成 CSS 的字串文字。
底部是元件的 HTML。使用帶有 {myVariable} 的變數。與 React 的 JSX 相比，Svelte 允許您使用正確的 HTML 標籤，例如 for、class 而不是 forHtml 和 className。請參閱 React 文件中的“屬性差異”以獲取所有非標準 HTML 屬性的列表。
讓我們重建 React 示例
為了讓您了解 Svelte 與 React 的對比，讓我們重新建置 https://reactjs.org/ 上列出的內容。
一個簡單的元件
請參閱上面的程式碼片段。
一個有狀態的元件
<script>
let seconds = 0;
setInterval(() => seconds += 1, 1000);
</script>
Seconds: {seconds}
React：33行
Svelte：6 行
一個應用程式
<script>
/* App.svelte */
import TodoList from './TodoList.svelte';
let items = [];
let text = '';
const handleSubmit = () => {
if (!text.length) {
return
}
const newItem = {
text,
id: Date.now(),
};
items = items.concat(newItem);
}
</script>
<div>
<h3>TODO</h3>
<TodoList {items} />
<form on:submit|preventDefault={handleSubmit}>
<label for="new-todo">
What needs to be done?
</label>
<input
id="new-todo"
bind:value={text}
/>
<button>
Add #{items.length + 1}
</button>
</form>
</div>
<script>
/* TodoList.svelte */
export let items = [];
</script>
<ul>
{#each items as item}
<li key={item.id}>{item.text}</li>
{/each}
</ul>
React：66行
Svelte：43 行
使用外部插件的元件
<script>
const md = new window.remarkable.Remarkable();
let value = 'Hello, **world**!';
</script>
<svelte:head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/2.0.0/remarkable.min.js"></script>
</svelte:head>
<div className="MarkdownEditor">
<h3>Input</h3>
<label htmlFor="markdown-content">
Enter some markdown
</label>
<textarea
id="markdown-content"
bind:value={value}
/>
<h3>Output</h3>
<div
className="content">
{@html md.render(value)}
</div>
</div>
React：42行
Svelte：24 行
更少的程式碼 = 更少的錯誤
更少的程式碼 = 更好的性能 = 更好的用戶體驗
更少的程式碼 = 更少的維護 = 更多的時間來開發功能
我還喜歡 Svelte 什麼？
反應性
另一個強大的功能是 反應式聲明。讓我們從一個例子開始：
<script>
let count = 0;
$: doubled = count * 2;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
<p>{count} doubled is {doubled}</p>
每當你有依賴於其他變數的變數時，用 $: myVariable = [引用其他變數的程式碼] 聲明它們。以上，每當 count 發生變化時，doubled 都會自動重新計算，並且 UI 會更新以反映新值。
Stores
在需要跨元件共享狀態的情況下，Svelte 提供了存儲的概念。 教程很好地解釋了 store。無需閱讀冗長的教程 - store 就這麼簡單。
Derived stores
通常，一家 store 依賴於其他 store。這就是 Svelte 提供 derived() 來組合 store 的地方。 有關詳細訊息，請參閱教程。
作為邏輯塊等待
好吧，這是一個非常優雅的。讓我們從程式碼開始（交互式演示）：
<script>
let githubRepoInfoPromise;
let repoName = 'mikenikles/ghost-v3-google-cloud-storage';
const loadRepoInfo = async () => {
const response = await fetch(`https://api.github.com/repos/${repoName}`);
if (response.status === 200) {
return await response.json();
} else {
throw new Error(response.statusText);
}
}
const handleClick = () => {
githubRepoInfoPromise = loadRepoInfo();
}
</script>
<input type="text" placeholder="user/repo" bind:value={repoName} />
<button on:click={handleClick}>
load Github repo info
</button>
{#await githubRepoInfoPromise}
<p>...loading</p>
{:then apiResponse}
<p>{apiResponse ? `${apiResponse.full_name} is written in ${apiResponse.language}` : ''}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
看到 HTML 中的“#await”塊了嗎？在真實世界的應用程式中，您將有一個加載元件、一個錯誤元件和在這種情況下呈現 API 響應的實際元件。嘗試在文本框中輸入無效的 repo 名稱以觸發錯誤案例。
“等等，那……呢？”
開源元件？
當我向某人介紹 Svelte 時，我得到的主要回應是“但是生態系統、元件、教程、工具等呢？”
是的，開源 Svelte 元件遠不及 React 元件多。話雖如此，您多久使用一個開源 React 元件並在沒有任何問題或不必要的開銷的情況下集成它？我認為我們 Javascript 社區中的許多人已經變得過於依賴 npm install ... 來拼湊一個 web 應用程式。通常建置自己的元件，尤其是在 Svelte 中，可以減少整體花費的時間。我沒有資料可以證明，這是基於我個人的經驗。
不過，與此相關的是，對於任何願意重用開源元件的人來說，Svelte 元件的列表越來越多。
正在找工作？
機會很多，請參閱 https://sveltejobs.dev/。 Apple 的欺詐工程團隊正在尋找 Svelte 開發人員（截至 2019 年 12 月）。
還要記住，與申請需要 React、Vue、Angular 等的工作相比，競爭要小得多。
然後，有 Sapper 來部署 Svelte 應用程式
開發應用程式只是整個蛋糕的一小部分——應用程式還需要部署。為此，Svelte 團隊提供了 Sapper。這本身就是一篇完整的帖子，所以現在請查看網站了解詳細訊息。
結論
每天，新的 Web 開發人員開始他們的旅程，許多人遇到的第一件事就是不確定首先要學什麼。我說未來就是簡單、快速的開發時間，我想不出比這更簡單、更快的事情了：
<script>
let name = 'world';
</script>
<style>
h1 {
color: blue;
}
</style>
<h1>Hello {name}!</h1>
以上分享，希望對您有幫助
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
