Svelteで反応性を取り扱う方法

Svelteは、ほとんどのフロントエンドフレームワークのように、無効な言語です.それはデータの更新をまっすぐにUIの更新に変換を意味します.Svelteでの反応性の働きを見てみましょう.
あなたがsvelteに新しいならば、私のものを読んでくださいguide on getting started with Svelte here .

スベルトの反応性

最も基本的に、変数はSvelteで一般的に反応します.たとえば、このようなコンポーネントを作成すると、ボタンに表示される有効な更新カウンタが表示されます.

<script>
    let x = 0;
    const addToCounter = function() {
        ++x;
    }
</script>

<button id="counter" on:click="{addToCounter}">{x}</button>

<style>
    button {
        background: #ffb334;
        border-radius: 8px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        padding: 0.5rem 2rem;
        color: white;
        font-size: 1.5rem;
    }
</style>

上で、ボタンがクリックされるたびに、Xは1増加します.これを行うon:click="{addToCounter}" . The {x} カウンターで表示される自動的に増加し、クリックして新しい値が表示されます.
そのように、Svelteは箱の反応性を提供します-それで、直観的に何が起こっているかについて理解することは本当に簡単です.Svelteもいくつかのより高度な反応性機能を提供します.

反応計算

いくつかのシナリオでは、xのような値を更新して計算を行います.その後、私たちのUI内のどこかに表示することがあります.例えば、

<script>
    let x = 0;
    let bigX = x * 2;
    const addToCounter = function() {
        ++x;
    }
</script>

<button id="counter" on:click="{addToCounter}">{bigX}</button>

<style>
    button {
        background: #ffb334;
        border-radius: 8px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        padding: 0.5rem 2rem;
        color: white;
        font-size: 1.5rem;
    }
</style>

上記の計算を表示したいbigX ボタンタグ内の値x * 2 . ボタンをクリックするとx 1つ増加するので、我々は期待するbigX も反応する.
しかし、Svelteでは、このような計算値が本質的に反応しないので、これは動作しません.このように、我々はBigxも反応すべきであるとSvelteに伝える必要があります.それをするためにlet with $: .
以下のコードは、現在のXが更新されるたびにbigXを更新し、私たちのボタンの中に表示されます

<script>
    let x = 0;
    $: bigX = x * 2;
    const addToCounter = function() {
        ++x;
    }
</script>

<button id="counter" on:click="{addToCounter}">{bigX}</button>

<style>
    button {
        background: #ffb334;
        border-radius: 8px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        padding: 0.5rem 2rem;
        color: white;
        font-size: 1.5rem;
    }
</style>

スベルトにおける反応性原理

Svelteはインテリジェントな場合は$: bigX = x * 2 , 我々は欲しいbigX 無効にするには、x が更新される.

Svelteにおける反応性ブロック

私たちが独立変数を作ることができるのと同じように、それらの中の何かが変わるときはいつでも、再び動くことができます.例えば、Xが5に等しいかどうかをチェックしたいとしましょう.次のように書くと、何もしません.

let x = 0;
if(x === 5) {
    console.log(`x is ${x}!`);
}

const addToCounter = function() {
    ++x;
}

これは、開始時にXが0で、if文が1回だけ実行されるからです.Xの更新を毎回実行したい場合は、次のコマンドを実行します.

let x = 0;
$: if(x === 5) {
    console.log(`x is ${x}!`);
}

const addToCounter = function() {
    ++x;
}

Curlyブラケットブロックステートメントだけでも同じことができます.たとえば、以下のコードコンソールは、いつでも変更されます.

let x = 0;
$: {
    console.log(x);
}

const addToCounter = function() {
    ++x;
}

すべてのフロントエンドフレームワークから、Svelteはおそらく反応性を最も容易にします.あなたがこの記事を楽しんだならば、あなたはより多くを見つけることができますSvelte content はい.