后端开发教程 - Java、Spring Boot 实战 - msg200.com
为什么我从 React 转到 Svelte 以及其他人也会效仿
多年来，React 一直是我的首选
然后我了解了 Svelte
Svelte 3.x
让我们重建 React 示例
我还喜欢 Svelte 的什么？
“但是等等，那……”
然后，还有 Sapper 来部署 Svelte 应用程序
结论
这篇文章最初出现在www.mikenikles.com上。
多年来，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——这些 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 = [code that references other variables]。上面，每当 count 发生变化时， doubled 都会自动重新计算，并且 UI 也会更新以反映新值。
商店
对于需要跨组件共享状态的情况，Svelte 提供了 store 的概念。本教程对 store 进行了很好的解释。无需阅读冗长的教程 - store 就是这么简单。
派生商店
通常，一个 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}
看到#awaitHTML 中的代码块了吗？在实际应用中，你会有一个“正在加载”组件、一个“错误”组件，以及一个实际用于渲染 API 响应的组件（在本例中）。尝试在文本框中输入无效的仓库名称来触发错误代码。
“但是等等，那……”
开源组件？
当我向某人介绍 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>
请通过 Twitter @mikenikles向我发送您的反馈。
👋
文章来源：https://dev.to/mikenikles/why-i-moved-from-react-to-svelte-and-others-will-follow-210l