react和react2
You are probably reading the title and nodding your head “One more framework? No way!!” We already have a war going on between the ones that already exists. Why would I need one more?
您可能正在阅读标题并点头说“另一个框架？ 没门！！” 我们已经存在了一场战争。 我为什么还需要一个？
But hold on, before you move away. what if I told you this is not an actual framework, but a Compiler. WOW..Really ??
但是请稍等，然后再离开。 如果我告诉您这不是一个实际的框架，而是一个编译器，该怎么办？ 哇塞！真的么 ？？
Yes, so what is Svelte basically? What makes it different from other JS frameworks?
是的，那么Card.svelte基本上是什么？ 是什么使其与其他JS框架不同？
Unlike other JS frameworks like, Svelte is a UI framework-as-compiler for creating component based single page applications.
与其他JS框架不同，Svelte是一个UI框架编译器，用于创建基于组件的单页应用程序。
The size of Svelte files, as compared to the other JS frameworks is very less. As we can easily manage it. Also in terms of the lines of code, the Svelte is the winner. It is almost half of the size of React and Vue code. And that is why I think it makes an overall better experience for the developers.
与其他JS框架相比，Svelte文件的大小要小得多。 由于我们可以轻松管理它。 同样在代码方面，Svelte是赢家。 它几乎是React和Vue代码大小的一半。 这就是为什么我认为它为开发人员带来了总体上更好的体验。
The major point is that Svelte is very small and super fast in terms of performance, so as web developers, as programmers, as technical people, our existence is to make processes more efficient, in less time and in an effective manner.
最重要的一点是，Svelte在性能方面非常小且非常快，因此，作为Web开发人员，程序员，技术人员，我们的存在是使流程效率更高，更少的时间和更有效的方式。
Below are reasons why I feel Svelte has an edge over React
以下是我觉得Svelte胜过React的原因
React炒作是真的吗？ (Is the React hype real?)
As we know that Svelte is a compiler, which runs the code at build time. It actually goes over your code in build time and then compiles all of your code in instructions written purely in JS. It has a very lean bundle size and Svelte also takes a reactive approach when rendering into a DOM. It doesn’t have a virtual DOM like React has, instead it watches over the variables that are defined and whenever those get changed it actually re-renders the DOM. But re-rendering the DOM is costly. Unlike react which re-renders only the ‘Virtual DOM’ which is not costly. The real DOM will be updated with what has actually changed. This is very much like applying a patch. But due to this there is an extra pressure on the browser during runtime.
我们知道Svelte是一个编译器，它在构建时运行代码。 实际上，它会在构建时遍历您的代码，然后在纯粹用JS编写的指令中编译所有代码。 它具有非常精简的包大小，并且在渲染为DOM时，Svelte还采用了React式方法。 它没有像React那样的虚拟DOM，而是监视定义的变量，只要更改了这些变量，它就会实际上重新呈现DOM。 但是重新渲染DOM成本很高。 与react不同，React只提供不昂贵的“虚拟DOM”。 实际DOM将使用实际更改的内容进行更新。 这非常类似于应用补丁。 但是由于这个原因，在运行时会对浏览器造成额外的压力。
So basically, there is less number of lines of code in Svelte as compared to React code.
因此，基本上，与React代码相比，Svelte中的代码行数更少。
Svelte在JavaScript本身中带来了React性 (Svelte brings reactivity in Javascript itself)
As we know React (and most other frontend frameworks) requires you to use an API to tell it that data changed ( by calling this.setState or using useState) before it knows to update its virtual DOM, means that the reactivity of your app is now tied to a specific API, without which it would be completely unaware of data changes.
如我们所知，React(和大多数其他前端框架)要求您在知道更新其虚拟DOM之前使用API告诉它数据已更改(通过调用this.setState或使用useState)，这意味着您的应用程序的React性是现在与特定的API绑定在一起，没有它，它将完全不知道数据更改。
If you don’t tell React that your data has changed (i.e., by calling this.setState or the Hooks equivalent), your virtual DOM will not change. This means React isn’t fully reactive.
如果您不告诉React您的数据已更改(即，通过调用this.setState或等效的Hooks)，您的虚拟DOM将不会更改。 这意味着React不是完全React性的。
Svelte 3.0React性 (Svelte 3.0 Reactivity)
Reactivity has been a very important part of JavaScript UI frameworks. Reactivity means that changed values will automatically be reflected in the DOM.
React性一直是JavaScript UI框架的重要组成部分。 React性意味着更改后的值将自动反映在DOM中。
Svelte always keeps the DOM in sync with your application state. This is how Svelte becomes a Powerful system.
Svelte始终使DOM与您的应用程序状态保持同步。 这就是Svelte如何成为强大的系统。
The $ symbol in Svelte stands for Reactive declaration.
Svelte中的$符号表示React式声明。
Character Count: {character_count}
Vowels Count: {vowels_count}
In the above example, we are binding the entered value to input using bind: directive. We have also declared two new variables: character_count and vowels_count, which compute a value based on the value inside of text, which will automatically get recomputed.
在上面的示例中，我们使用bind：指令将输入的值绑定到输入。 我们还声明了两个新变量：character_count和vowels_count，它们根据文本内部的值计算一个值，这些值将自动重新计算。
$: console.log(“Entered Text:”, text);This reactivity using the special label syntax can also be used to execute statements reactively when a value changes.
使用特殊标签语法的这种React性还可以用于在值更改时以React方式执行语句。
多条陈述 (Multiple statements)
You can group multiple statements in a block using curly braces:
您可以使用花括号将一个块中的多个语句分组：
$: {
console.log("---");
console.log("
}苗条的状态管理 (Svelte state Management)
In Javascript frameworks, when the application size gets larger, it becomes very difficult to maintain all the state into an application itself. Here they required the external state management libraries like Redux and Vuex.
在Javascript框架中，当应用程序大小变大时，很难将所有状态维护到应用程序本身中。 在这里，他们需要外部状态管理库，例如Redux和Vuex。
Svelte solved this problem very easily, by eliminating the work of installation of needed libraries.
Svelte通过消除安装所需库的工作，非常轻松地解决了此问题。
Svelte provides the state management feature in the framework itself.
Svelte在框架本身中提供了状态管理功能。
通过Svelte商店实现 (Achieving with Svelte store)
In large scale applications, communication is one of the main task that needs to happen between the components. Svelte provides this mechanism via stores. Store is an object, which holds the value and notifies the components which are interested when it gets changed.
在大规模应用中，通信是组件之间需要发生的主要任务之一。 Svelte通过商店提供此机制。 Store是一个对象，它保存值并在更改时通知感兴趣的组件。
Basically there are two types of stores are present in Svelte: writable stores and readable stores
Svelte基本上有两种存储类型： 可写存储和可读存储
Writable stores:
可写商店：
Writable stores are used to maintain the value and make it available to every component within the application. To access this value we need to export it from the store.
可写存储区用于维护值并使该值可用于应用程序中的每个组件。 要访问此值，我们需要从商店中导出它。
In the example below, we are creating a writable store count with initial value as 0.
在下面的示例中，我们将创建一个初始值为0的可写存储计数。
import { writable } from 'svelte/store';
export const count = writable(0);Then import in components where its needed:
然后在需要的地方导入组件：
There are two methods to update the writable value.
有两种更新可写值的方法。
set() : It used to reset the value of store object.
set()：它 用于重置存储对象的值。
set(value) //syntaxcount.set(0);update(): It alters/updates the count value. Here we need to pass the current value as an argument.
update()：更改/更新计数值。 在这里，我们需要将当前值作为参数传递。
update(callback) //syntaxcount.update(prevCount => prevCount+1)To see all this changes in the components, there is one method subscribe(), which is used to see the updated value of the store.
要查看组件中的所有这些更改，有一个方法subscription() ，用于查看商店的更新值。
subscribe(callback) // syntax Counter value is {counter_value}
You can save the usage of the subscribe function by using the autoSubscription, which have the feature to directly reference a store value by prefixing the store name with $.
您可以使用自动订阅来节省订阅功能的使用，该功能具有通过在商店名称前加上$来直接引用商店值的功能。
Counter value is {$count}
2. Readable stores
2 。 可读的商店
In some cases we just need to read the store value in external components. Where we can not have the access to perform any operations like update or reset the store value. Using readable stores we can achieve this, as they only holds the object but they can not update from outside.
在某些情况下，我们只需要读取外部组件中的存储值即可。 在我们无权执行任何操作(如更新或重置商店价值)的地方。 使用可读存储，我们可以实现这一目标，因为它们仅保存对象，而不能从外部进行更新。
import { readable } from 'svelte/store';export const number = readable(0, set => {
setTimeout(() => {
set(Math.random() * (10 - 1) + 1)
}, 1000)
});The number can be imported into another component.
该号码可以导入到另一个组件中。
Random numbers from 1 to 10 is {$number}
The readable stores are used when store data needs to be immutable.
当存储数据需要不可变时，使用可读存储。
Using the store management functionality of Svelte we can create custom stores as well where we can define operations. Like in Redux, reducers and actions are used to trigger the changes into the state.
使用Svelte的商店管理功能，我们还可以在定义操作的地方创建自定义商店。 与Redux中一样，reduce和action用于触发状态更改。
import { writable } from "svelte/store";function createCount() {
const { subscribe, set, update } = writable(0);
return {
subscribe,
increment: () => update(n => n + 1),
decrement: () => update(n => n - 1),
reset: () => set(0)
};
}export const count = createCount();The count is {$count}
This is how Svelte provides an easy way to create the custom store, which has domain-specific logic in every understandable way.
这就是Svelte如何提供一种创建自定义存储的简便方法，该自定义存储以每种可理解的方式具有特定于域的逻辑。
动画是Svelte的内置功能 (Animation is Svelte’s build-in feature)
Animations in the web application can make it more attractive to users and also do some processes very spontaneously.
Web应用程序中的动画可以使其对用户更具吸引力，并且还非常自发地执行某些过程。
There are many libraries that are present for web frameworks that give animation support. But Svelte has it as a built-in feature. This is most important point of Svelte which was previously not present in any other JS frameworks.
有许多提供动画支持的Web框架库。 但是Svelte将其作为内置功能。 这是Svelte最重要的一点，以前在任何其他JS框架中都没有。
苗条和React受欢迎 (Svelte And React Popularity)
Svelte is a one man show, it was developed by Rich Harris. I highly recommend it to go through this video, not only because it explains what Svelte is doing, its features but also he explains React from a different perspective.
Svelte是一个单人表演，由Rich Harris开发。 我强烈建议您观看本视频，这不仅是因为它解释了Svelte在做什么，其功能，而且还从另一个角度解释了React。
Check out the talk by Rich Harris, Svelte developer: https://youtu.be/AdNJ3fydeao
查看Svelte开发人员Rich Harris的演讲： https : //youtu.be/AdNJ3fydeao
As Svelte is young, it’s gaining popularity and also growing rapidly especially in the last couple of years.
随着Card.svelte(Svelte)的年轻，它变得越来越受欢迎，并且发展Swift，尤其是在最近几年。
Whereas React is a very popular and matured framework, also its highly & actively developed (for example the new feature like react hooks). Also React is used by many big enterprises like Facebook, Netflix and Instagram. React is very stable right now.
尽管React是一个非常流行且成熟的框架，但它也是高度活跃的开发者(例如React挂钩等新功能)。 React也被许多大型企业使用，例如Facebook，Netflix和Instagram。 React现在非常稳定。
总结思想 (Closing thoughts)
Overall, I liked what Svelte is providing, the cleanness of the code, the ability to address in vanilla JavaScript, reactivity, and the use of JS/HTML/CSS. Which makes Svelte a very good competitor in the UI ecosystem.
总的来说，我喜欢Svelte提供的东西，代码的简洁性，使用原始JavaScript寻址的能力，React性以及JS / HTML / CSS的使用。 这使Svelte在UI生态系统中成为非常好的竞争对手。
I hope this gave you a good start with Svelte, and you want to use it and learn more about it. Thank you
我希望这为您提供了Svelte的良好开端，并且您想使用它并了解更多有关它的信息。 谢谢
翻译自: https://medium.com/globant/is-svelte-a-cut-above-react-aa1e4f76b170
react和react2