前端框架 React 和 Svelte 的基础比较

翻译 | 红薯

出品 | OSC开源社区（ID：oschina2013）

在 JavaScript 前端开发框架中，Svelte 算是一个新来的搅局者，在网上我们已经听到很多关于 Svelte 的哔哔。因此我决定试试这个家伙，顺便跟 React 做个简单的比较。

本文将展示 Svelte 和 React 在构建一个基础应用的差异，其中涉及到的内容包括：

• 组件结构

• 状态初始化

• 属性传递

• 状态向上传递

• 事件侦听

• 动态样式

还有很多其他方面的内容需要讨论，例如 按需渲染 和 生命周期 等其他炫酷的概念。限于篇幅，这篇文章还是聚焦在基础使用上吧。

准备工作

在继续往下阅读之前，你应该准备好如下环境：

• npm 或者 yarn

• node.js

• 如果你用 Visual Studio Code 开发，可以装一个 Svelte 插件 。

Svelte 和 React.js 两者都是基于组件的 JavaScript 框架，主要用于 Web 应用的开发。最主要的区别是 Svelte 没有使用虚拟 DOM。Svelte 在构建的时候就将代码编译成 Vanilla JS 代码，而 React 在运行时解释代码。

Svelte 文档写道：

‎Svelte 是一种全新的构建 Web 应用的方法。诸如 React 和 Vue 这类传统的框架，它们的大部分工作都在浏览器上执行，而 Svelte 在构建应用的过程做就了大量的工作。 ‎Svelte 没有使用虚拟 DOM 技术，而是当应用状态发生变化时，通过代码如手术般的更新 DOM。‎

酷！但是这些底层的细节对我来说并不重要。我只想从开发人员的角度看看，在使用 Svelte 和 React 开发应用程序时，感觉好吗？有趣吗？直观吗？

开工！

创建应用脚手架

在这篇文章中，我们将创建一个很小的 Web 应用，产品经理给这个应用确定了如下需求：

• 三个组件，分别是：App 、Heading 和 Button

• 当点击 Button 时，Heading 会更新显示点击的次数

• 每次点击 Button 时，Button 自身的颜色会跟着变化

首先使用如下命令在你电脑上创建一个新的目录，暂且命名为 svelte-react：

mkdir svelte-react
cd svelte-react

接着分别创建 Svelte 和 React 的应用模板并运行。这里 Svelte 的初始步骤比 React 多了一步，此外 Svelte 默认端口是 5000 ，而 React 是 3000 。

Svelte

打开终端窗口，运行如下命令：

npx degit sveltejs/template svelte-test
cd svelte-test
npm install
npm run dev React

打开第二个终端窗口，进入刚建好的 svelte-react 目录，运行命令：

npx create-react-app react-test
cd svelte-react
npm start

你会发现 Svelte 的命令运行快得多，因为你不是真正在运行一个工具，而是克隆一个项目模板。

构建应用组件

运行完上述命令后，你会注意到 Svelte 和 React 各自生成很多很多的文件，感兴趣的话，可以随便浏览看看这些生成的文件。

不管是 Svelte 和 React ，都是把组件源码放到 src 文件夹下，Svelte 项目主要是一些扩展名为 svelte 的文件，而 React 项目则是一些 .js 的文件。

两个项目都有一个 App 组件，分别是 App.svelte 和 App.js 。用你喜好的编辑器分别打开这两个文件，清空它们，我们从头开始。

组件结构 Svelte

和 React 组件不同的是，Svelte 的代码更像是以前我们在写 HTML、CSS 和 JavaScript 一样。

所有的 JavaScript 代码都位于 Svelte 文件顶部的 标签当中。

然后是 HTML 代码，你还可以在 标签中编写样式代码。有趣的是，组件中的样式代码只对当前组件有效。这意味着在组件中为

标签编写的样式不会影响到其他组件中的

元素。

接下来我们开始编写 App.svelte，首先删空文件内容，然后添加一个空的