Svelte 避免多余的反应性变化答案

【问题标题】：Svelte avoid superfluous reactive changesSvelte 避免多余的反应性变化
【发布时间】：2022-08-19 00:24:23
【问题描述】：

我有一段 Svelte 代码应该：

单击“加载”按钮时从外部源加载数字
号码更改时将号码保存到外部源

https://svelte.dev/repl/5d64d5ba6c5e4df6b12cb4c1fb3b716b?version=3.49.0

<script>
    let num
    let msgs = []
    
    const inc = function() {
        num += 1
    }
    
    const load = function() {
        const num_ = 1
        msgs = [...msgs, \'load num \' + num_]
        num = num_
    }
    
    const save = function(num_) {
        msgs = [...msgs, \'save num \' + num_]
    }
    
    $: save(num)
</script>

<button on:click={load}>Load</button>
<button on:click={inc}>Inc</button>

{#each msgs as msg}
    <li>{msg}</li>
{/each}

我的问题是，在加载页面并单击 Load and Inc 一次后，我得到了以下结果：

save num undefined
load num 1
save num 1
save num 2

我有两个多余的保存：

save num undefined
save num 1

我知道我可以使用其他变量手动跟踪这些，但有没有更好的方法来避免这些？

我不建议为此使用响应式语句，它们可能并不真正适用于这种突变。
@HB那我应该如何处理呢？我想我可以手动连接所有东西，但是这样做我基本上不会失去 Svelte 的主要功能吗？

标签： svelte

【解决方案1】：

如果加载/保存是昂贵的操作（例如服务器/数据库调用），它们应该通过使用事件或去抖动更新（更改安排更新，而不是直接执行它们）来控制。

如果加载/保存只是影响本地状态，那么有多余的调用并不重要。 Svelte 相当有选择性地更新 DOM，并且它的更改跟踪不是很昂贵（与其他机制相比，例如脏检查整个模型或虚拟 DOM 协调）。

一般来说，我建议将反应式语句主要用于不依赖于调用次数的简单不变量。

【讨论】：