这是对出版物
“ JS框架的比较：React，Vue和Hyperapp”的简短回应 。 总的来说，我不是这种比较的忠实拥护者。 但是，由于我们在谈论像Hyperapp这样的边际框架，所以与React和Vue这样的按钮相比，我想，为什么不考虑
Svelte上的所有相同示例。 可以这么说，完成图片。 而且，这实际上需要5分钟。 走吧
如果突然之间您不熟悉
Svelte和消失的框架的概念，则可以阅读文章
“ Magical Disappearing JS Framework”和
“ Disappearing Frames” 。
为了方便读者，我在扰流板下复制了
原始文章中的示例，以使比较起来更加方便。 好吧，让我们开始吧。
例1：柜台申请
反应import React from "react"; import ReactDOM from "react-dom"; class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0}; } down(value) { this.setState(state => ({ count: state.count - value })); } up(value) { this.setState(state => ({ count: state.count + value })); } render() { return ( <div> <h1>{this.state.count}</h1> <button onClick = {() => this.down(1)}>-</button> <button onClick = {() => this.up(1)}>+</button> </div> ); } } ReactDOM.render(<Counter />, document.querySelector("#app"));
Vue import Vue from "vue"; new Vue({ data: { count: 0 }, methods: { down: function(value) { this.count -= value; }, up: function(value) { this.count += value; } }, render: function(h) { return( <div> <h1>{this.count}</h1> <button onClick={() => this.down(1)}>-</button> <button onClick={() => this.up(1)}>+</button> </div> ); }, el: "#app" });
超级应用程式 import { h, app } from "hyperapp"; const state = { count: 0 }; const actions = { down: value => state => ({ count: state.count - value}), up: value => state => ({ count: state.count + value}) }; const view = (state, actions) => ( <div> <h1>{state.count}</h1> <button onclick={() => actions.down(1)}>-</button> <button onclick={() => actions.up(1)}>+</button> </div> ); app(state, actions, view, document.querySelector("#app"));
vel苗条
<div> <h1>{count}</h1> <button on:click="set({count: count - 1})">-</button> <button on:click="set({count: count + 1})">+</button> </div>
→一个
工作示例。▍分析
Svelte组件是html文件，具有臭名昭著的Single File Component（SFC）格式（一种或另一种格式），已在
Vue ，
Ractive ，
Riot和其他框架中使用。 除了html模板本身之外，组件还可以具有javascript中描述的行为和逻辑，以及该组件的范围样式。
不需要组件的任何部分，因此计数器的组件只能由计数器本身的html模板组成。 要更改
count变量的值，单击处理程序将使用
文档中介绍的
set（）组件的内置方法。
示例2：使用异步代码
反应 import React from "react"; import ReactDOM from "react-dom"; class PostViewer extends React.Component { constructor(props) { super(props); this.state = { posts: [] }; } getData() { fetch(`https://jsonplaceholder.typicode.com/posts`) .then(response => response.json()) .then(json => { this.setState(state => ({ posts: json})); }); } render() { return ( <div> <button onClick={() => this.getData()}>Get posts</button> {this.state.posts.map(post => ( <div key={post.id}> <h2><font color="#3AC1EF">{post.title}</font></h2> <p>{post.body}</p> </div> ))} </div> ); } } ReactDOM.render(<PostViewer />, document.querySelector("#app"));
Vue import Vue from "vue"; new Vue({ data: { posts: [] }, methods: { getData: function(value) { fetch(`https://jsonplaceholder.typicode.com/posts`) .then(response => response.json()) .then(json => { this.posts = json; }); } }, render: function(h) { return ( <div> <button onClick={() => this.getData()}>Get posts</button> {this.posts.map(post => ( <div key={post.id}> <h2><font color="#3AC1EF">{post.title}</font></h2> <p>{post.body}</p> </div> ))} </div> ); }, el: "#app" });
超级应用程式 import { h, app } from "hyperapp"; const state = { posts: [] }; const actions = { getData: () => (state, actions) => { fetch(`https://jsonplaceholder.typicode.com/posts`) .then(response => response.json()) .then(json => { actions.getDataComplete(json); }); }, getDataComplete: data => state => ({ posts: data }) }; const view = (state, actions) => ( <div> <button onclick={() => actions.getData()}>Get posts</button> {state.posts.map(post => ( <div key={post.id}> <h2><font color="#3AC1EF">{post.title}</font></h2> <p>{post.body}</p> </div> ))} </div> ); app(state, actions, view, document.querySelector("#app"));
vel苗条
<div> <button on:click="getData()">Get posts</button> {#each posts as {title, body}} <div> <h2><font color="#3AC1EF">{title}</font></h2> <p>{body}</p> </div> {/each} </div> <script> export default { methods: { getData() { fetch('https://jsonplaceholder.typicode.com/posts') .then(res => res.json()) .then(posts => this.set({ posts })); } } }; </script>
→一个
工作示例。▍分析
JSX不像JSX，它像原始副本一样，在所有3个框架中都使用，实际上是用类似html的语法扩展了javascript代码，而
Svelte使用了更熟悉的功能-使用
<<将js和css代码嵌入html中
script>和
<style> 。
组件脚本导出一个简单的JS对象，该对象分为几部分。
方法部分描述了可通过组件实例和事件处理程序使用的组件方法。 因此，当您单击按钮时，将
调用getData（）方法，在其中请求数据，并且在操作完成后，将数据简单地安装在组件状态并立即绘制在模板中。
请注意在发布列表迭代的每个步骤中，使用解构发布对象（发布）：
{#each posts as {title, body}}
此技巧可避免模板
{post.title}中的冗余，并使用较短的条目
{title}直观地简化模板。
示例3：待办事项应用程序的列表项组件
React（功能样式） function TodoItem(props) { return ( <li class={props.done ? "done" : ""} onclick={() => props.toggle(props.id)}> {props.value} </li> ); }
反应 class TodoItem extends React.Component { render () { return ( <li class={this.props.done ? "done" : ""} onclick={() => this.props.toggle(this.props.id)}> {this.props.value} </li> ); } }
Vue var TodoItem = Vue.component("todoitem", { props: ["id", "value", "done", "toggle"], template: '<li v-bind:class="{done : done}" v-on:click="toggle(id)">{{value}}</li>' });
超级应用程式 const TodoItem = ({ id, value, done, toggle }) = ( <li class={done ? "done" : ""} onclick={() => toggle(id)}> {value} </li> );
vel苗条
<li class="{done ? 'done' : ''}" on:click="set({done: !done})">{value}</li>
→一个
工作示例。▍分析
这里的一切都很平淡。 我们根据
完成值公开css类，并在单击列表项时将此值更改为相反的值。
组件生命周期方法的比较
免责声明 ：从现在开始，我决定省略与Hyperapp的比较，因为否则表将根本无法读取。▍分析
Svelte非常简约，包括生命周期挂钩。 只有4个钩子：
- onstate-在创建组件之前调用，在DOM更新之前更改每个状态。
- oncreate-创建组件的时刻。
- onupdate-在装入DOM后立即调用，并且在更新DOM后每个状态都会更改。
- ondestroy-在销毁组件并将其从DOM中删除时调用。
框架性能比较
老实说，我不知道该发表什么评论。 基准本身及其执行方式始终会引起很多争议，因此我认为不必要地集中注意力是没有道理的。
但是，我们仍然没有其他数据。
tables使用表格
▍加载，启动，代码大小
memory处理内存
▍分析
从数字来看，
Svelte相当快，“吃”很少的内存（包括因为它不使用VirtualDOM），因此启动速度很快，而且体积很小。
总的来说，我不能说这三个框架的基准测试结果差异很大。 但是，只有
Svelte拥有专门的“绿色”列，即 它在各个方面都非常好，这意味着它是完美平衡的，并且在速度，内存消耗或其他指标上都没有明显的失真。 通常，有了它，您就可以安全地启动任何项目，从普通的Web到移动设备，智能电视以及更多特殊系统。
总结
Svelte是构建几乎所有Web应用程序组件的出色工具。 它具有与React一样强大的功能，尽管社区规模明显较小，但掌握起来所需的精力更少。 像Vue一样，它是灵活的，同时更加简约和经过验证，因为它没有立即掌握现代Web开发的所有思想。
此外，他是唯一使用
濒危框架概念的人。 换句话说，除了浏览器本身，它没有特定的
运行时 。
它的应用程序很快出现，对资源的要求不高，而且尺寸很小。 另外，
Svelte可以“无缝地”用其他框架编写的应用程序中，我计划在下一次编写。
如果您初次遇到这个很棒的框架，则可能有兴趣阅读有关该框架的其他文章：
→
神奇消失的JS框架→
1Kb自动完成→
SvelteJS：发布第二个版本如果您仍然对
Svelte有疑问，请加入俄语
电报频道SvelteJS 。 在这里，您始终可以提出问题并获得建议，查找最新消息，然后享受聊天的乐趣。 我们将很高兴见到您！