翻译 | 红薯
出品 | 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 React
cd svelte-test
npm install
npm run dev
打开第二个终端窗口,进入刚建好的 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,首先删空文件内容,然后添加一个空的
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.