React vs Svelte
点击上方 前端Q，关注公众号
回复加群，加入前端Q技术交流群
翻译 | 红薯 出品 | OSC开源社区（ID：oschina2013）
在 JavaScript 前端开发框架中，Svelte 算是一个新来的搅局者，在网上我们已经听到很多关于 Svelte 的哔哔。因此我决定试试这个家伙，顺便跟 React 做个简单的比较。
本文将展示 Svelte 和 React 在构建一个基础应用的差异，其中涉及到的内容包括：
组件结构
状态初始化
属性传递
状态向上传递
事件侦听
动态样式
还有很多其他方面的内容需要讨论，例如 按需渲染 和 生命周期 等其他炫酷的概念。限于篇幅，这篇文章还是聚焦在基础使用上吧。
「准备工作」
在继续往下阅读之前，你应该准备好如下环境：
npm 或者 yarn
node.js
如果你用 Visual Studio Code 开发，可以装一个 Svelte 插件。
「Svelte 与 React」
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，首先删空文件内容，然后添加一个空的
我们将在这个标签中编写大部分组件代码。
「React」
在 React 项目中，打开 App.js 文件，清空所有内容，然后添加如下代码：
function App() {
}
export default App;这几行代码创建并输出了一个最基础的函数式组件，名为 App() 。注意到这里还有另外一个不同之处就是 —— Svelte 无需输出组件。
「Imports」
前面我们介绍过这个应用包含三个组件：App, Heading和Button。不管是 Svelte 还是 React ，Heading 和 Button 组件都被引入到 App 中，这样就可以被当成 App 的子组件使用。我们将在后面继续编写这三个组件的代码，但现在你只需要知道，构建 App 组件时需要引入其他两个组件。
「Svelte」
Svelte 需要在
「React」
React 的 import 语句位于文件的顶部，置于所有的函数或者类定义之前。在 App.js 最顶部，App() 函数之前，添加如下代码：
import Heading from './Heading.js';
import Button from './Button.js';
import { useState } from 'react';在这里，React 同时引入了 userState 钩子，因为 App 是一个有状态的组件。而 Svelte 不需要这个东西。
「状态初始化」
App 是一个有状态的组件，它有两个状态值分别是 color 和 count。
color 表示按钮的颜色，这个值作为一个属性传递给 Button 组件，并且它在每次点击按钮的时候改变。其初始值是 #000000，即为黑色。
count 代表按钮点击的次数，其初始值为 0。
「Svelte」
在 Svelte 中，状态等同于变量赋值，在 import 语句下方，
「React」
回到 App.js, 将如下代码拷贝到你的 App() 函数中状态声明部分的下方：
return (
)该代码从 App() 函数中返回 UI 界面的 JSX。
这里 Svelte 和 React 的做法都很类似，属性的传递也几乎相同。而 Svelte 的模板看起来跟 React 的 JSX 很像。
如果你是一个对 Svelte 充满好奇的 React 开发人员，在属性传递上 Svelte 没有什么新奇之处。而在接收属性时 Svelte 有点点不一样，后面将进行介绍。
「状态向上传递」
为了让这个应用正常工作，每次点击按钮时，必须让 App 组件的 count 状态值增1。因此需要一个机制来将数据从子组件传递给父组件。
前面已经通过将 handleClick() 函数作为属性传递给 Button 组件。
接下来马上要开始编写的这个属于 App 组件的函数。当把它作为属性传递给 Button 子组件，Button 组件就能在每次被点击时调用这个函数。这就是 App 组件能响应其子组件状态变更的原因。
handleClick() 这个函数负责用来更新 App 组件的 count 和 color 状态值。
「Svelte」
在 App.svelte 中编写 handleClick 函数代码如下：
const colors = ['#00ff00', '#ff0000', '#0000ff'];
let handleClick = () => {
count++;
color = colors[Math.floor(Math.random() * 3)];
}「React」
在 App.js 中编写 handleClick 函数代码如下：
const colors = ['#00ff00', '#ff0000', '#0000ff'];
let handleClick = () => {
setCount(count+1);
setColor(colors[Math.floor(Math.random() * 3)]);
}在 React 需要使用早先声明的 setCount() 和 setColor() 方法来更新状态值，而 Svelte 则可以直接更新。
现在我们可以开始编写 Heading 组件了。
「编写 Heading 组件」
Heading 组件显示这个应用的标题以及点击计数器。这不是一个有状态的组件，其接收状态值 count 来显示按钮点击次数。
在 Svelte 项目的 src 文件夹中创建一个名为 Heading.svelte 的文件。
同样的在 React 项目的 src 文件夹中创建新文件 Heading.js.
「接收属性」
「Svelte」
拷贝如下代码到 Heading.svelte 文件：
Hello, I am a Svelte App!
The following button has been clicked {count} times.
请注意看上述代码中
上述代码中两个属性都是在顶部的