大家好,很高兴又见面了,我是"web 前端分享",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发! 上一篇文章提到了Svelte。
今天一起来看看Svelte到底是什么?Svelte和React对比如何?
当我刚开始阅读 Svelte 文档时,发现它非常鼓舞人心,并打算在 Medium 上写一篇关于它的颂文。但是,在阅读了来自官方博客和社区的几篇文章后,我迟疑了,因为我注意到了 JavaScript 世界中一种常见修辞的迹象,一种让我非常不安的修辞。
嘿,还记得人类强大的头脑 30 年来一直试图解决的那个问题吗? 我刚刚找到了一个通用的解决方案! 为什么它还没有征服世界? 应该是显而易见的。 Facebook 的营销团队正在密谋反对我们。
在我看来,可以说您的工具与现有工具相比具有革命性的进步。 但是,人很难对自己的创作保持完全公正的态度。 举个正面的例子——与其他解决方案比起来,我觉得 Vue 实在是干得漂亮。没错,确实存在一些我不敢苟同的质疑声音,但这些声音都在传达一个建设性的信息:
我们的解决方案是怎样怎样的,还有别的一些现有的解决方案。而且我们坚信我们的方案更优秀,原因是什么什么。一些常见的反对论点是什么什么。
Svelte 的官方博客却正好相反,它通过只显露片面的事实来麻痹读者,甚至有时会宣扬一些关于 Web 技术和其他库(我会着重提到 React,只因我对它的理解更深一些)的不实言论。因此在本文中,我会对 Svelte 调侃一二,平衡一下官方吹斜的天平。话虽如此,我仍认为 Svelte 中还是有闪光点的,我会在文末告诉你原因。
Svelte 是一种用于构建用户界面的工具,与流行的框架(如 React 和 Vue)利用虚拟 DOM 来更高效更新真实 DOM 不同,Svelte 使用静态分析在构建时创建 DOM 更新代码 。 下面是一个 Svelte 组件的示例(App.svelte):
{#each things as thing}
{/each}
Thing.svelte 的内容如下:
current
等效的 React 组件代码如下:
import React, {useState} from 'react'
import styled from 'styled-components';
const things = [
{ id: 1, color: '#0d0887' },
{ id: 2, color: '#6a00a8' },
{ id: 3, color: '#b12a90' },
{ id: 4, color: '#e16462' },
{ id: 5, color: '#fca636' }
];
const Block = styled.span`
display: inline-block;
padding: 0.2em 0.5em;
margin: 0 0.2em 0.2em 0;
width: 4em;
text-align: center;
border-radius: 0.2em;
color: white;
background-color: ${props => props.backgroundColor}
`;
const Thing = ({color}) => {
return (
);
}
export const App = () => {
const [things, setThings] = useState(things);
const removeFirstThing = () => setThings(things.slice(1))
return (
<>
{things.map(thing =>
}
>
);
}
它不只是通过
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号