SvelteReact性简介

We’ve touched on the very first steps to get started with Svelte 3, but in that initial post I purposely omitted to go more in-depth about one of Svelte’s killer features: reactivity.

我们已经触及了开始使用Svelte 3的第一步，但是在那篇最初的文章中，我故意省略了有关Svelte杀手级功能之一的详细介绍：React性。

Reactivity has been all the rage in the past few years for modern JavaScript UI frameworks. Reactivity means that changed values will automatically be reflected in the DOM.

在过去的几年中，对于现代JavaScript UI框架，React性一直风靡一时。 React性意味着更改后的值将自动反映在DOM中。

Angular enables reactive programming thanks to RxJS and observables, and Vue.js allows to reactively recompute values with computed properties. As for Svelte, it makes use of a lesser known JavaScript feature, labels, to allow for reactive declarations and reactive statements. This means that you can have certain values be recomputed automatically when certain other values change. This is really powerful, and as you’ll see, Svelte makes it easy as pie. 🥧

Angular借助RxJS和observables启用了React式编程，而Vue.js允许通过计算属性来React性地重新计算值。 至于Svelte，它利用鲜为人知JavaScript功能labels来允许响应式声明和响应式语句。 这意味着您可以在某些其他值发生更改时自动重新计算某些值。 这确实非常强大，正如您将看到的，Svelte使其像馅饼一样容易。 🥧

字计数器组件 (Word Counter Component)

Let’s see how reactivity in Svelte looks like by building a simple character/word counter example.

让我们通过构建一个简单的字符/单词计数器示例来了解Svelte的React性。

Here’s our barebones component:

这是我们的准系统组件：

WordCounter.js

WordCounter.js

<script>
    let text = '';
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

Nothing too special here, except for the two-way data binding between the value of text and the textarea’s value.

除了text值和textarea值之间的双向数据绑定以外，这里没有什么特别的。

React性声明 (Reactive declarations)

Now let’s add a reactive declaration to automatically compute the number of words and characters when the value of the text variable changes:

现在让我们添加一个React式声明，以在text变量的值更改时自动计算单词和字符的数量：

<script>
  let text = '';

  $: characters = text.length;
  $: words = text.split(' ').length;
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

<p>Character Count: {characters}</p>
<p>Word Count: {words}</p>

We declared two new variables: characters and words, which compute a value based on the value inside of text and which will automatically get recomputed.

我们声明了两个新变量： character和words ，它们根据text内部的值计算一个值，并将自动重新计算。

The $: part is a label and is perfectly valid JavaScript. Chances are you haven’t used labels in JavaScript before, they are used for edge cases with things like nested for loops. Svelte gives those labelled declarations a special meaning and automatically instruments the declaration for reactivity.

$:部分是一个标签，是完全有效JavaScript。 您很有可能以前没有在JavaScript中使用过标签，它们用于带有嵌套for循环之类的边缘情况。 Card.svelte(Svelte)为那些带有标签的声明赋予特殊含义，并自动检测该声明是否具有React性。

React性陈述 (Reactive statements)

This reactivity using the special label syntax is not only valid for declaring new variables, but it can also be used to execute statements reactively when a value changes.

使用特殊标签语法的这种React性不仅对于声明新变量有效，而且还可以用于在值更改时以React方式执行语句。

Let’s log the value of text to the console when it changes:

让我们在更改后将text的值记录到控制台：

<script>
  let text = "";

  $: characters = text.length;
  $: words = text.split(" ").length;

  $: console.log("your text:", text);
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

<p>Character Count: {characters}</p>
<p>Word Count: {words}</p>

Imagine how handy this can be for debugging applications!

想象一下，这对于调试应用程序有多方便！

多条陈述 (Multiple statements)

You can group together multiple statements in a block using curly braces:

您可以使用花括号将多个语句分组在一起：

$: {
  console.log("---");
  console.log("your text:", text);
}

条件语句 (Conditional statements)

And you can even use conditionals as your statement:

您甚至可以使用条件作为语句：

$: if (text.toLowerCase().includes("see you later alligator")) {
  console.log("Not so soon baboon!");
  text = "";
}

Now every time our text variable contains the string “see you later alligator”, a message is logged to the console and we reset the value for the text variable.

现在，每次我们的text变量包含字符串“稍后再见鳄鱼”时，都会在控制台中记录一条消息，然后我们将重置text变量的值。

🎩 With this, you can now go on and make your Svelte apps reactive!

🎩这样，您现在就可以继续进行Svelte应用程序的React了！

翻译自: https://www.digitalocean.com/community/tutorials/svelte-reactivity-intro