如何像useEffect一样监听svelte中的状态变化

Question

我读过一些关于状态更改侦听器的文章，由于我是 svelte 环境的初学者，我无法弄清楚侦听状态更改的最有效方法是什么。

让我们将状态变量视为X和Y

方法一：

$: if (X||Y) {
    console.log("yes");
}

方法二：

afterUpdate使用和的组合onDestroy

REPL：https://svelte.dev/repl/300c16ee38af49e98261eef02a9b04a8 ?version=3.38.2

import { afterUpdate, onDestroy } from 'svelte';

export function useEffect(cb, deps) {
    let cleanup;
    
    function apply() {
        if (cleanup) cleanup();
        cleanup = cb();
    }
    
    if (deps) {
        let values = [];
        afterUpdate(() => {
            const new_values = deps();
            if (new_values.some((value, i) => value !== values[i])) {
                apply();
                values = new_values;
            }
        });
    } else {
        // no deps = always run
        afterUpdate(apply);
    }
    
    onDestroy(() => {
        if (cleanup) cleanup();
    });
}

方法三：

使用writable和subscribe

<script>
import { writable } from 'svelte/store';
const X = writable(0);
const Y = writable(0);


X.subscribe(value => {
    console.log("X was changed", value);
});


Y.subscribe(value => {
      console.log("Y was changed", value);
});

</script>

<button on:click={(e)=>{
    X.update((val)=>val++)
}}>Change X</button>
<button on:click={(e)=>{
    Y.update((val)=>val++)
}}>Change Y</button>

Answer 1

反应性语句

Svelte 没有与 useEffect 等效的功能。相反，Svelte 有反应性语句。

// Svelte
// doubled will always be twice of single. If single updates, doubled will run again.
$: doubled = single * 2

// equivalent to this React

let single = 0
const [doubled, setDoubled] = useState(single * 2)

useEffect(() => {
  setDoubled(single * 2)
}, [single])

这可能看起来很神奇，因为您没有定义依赖项或拆卸函数，但 Svelte 会在幕后处理所有这些事情。Svelte 足够聪明，可以找出依赖关系，并仅根据需要运行每个反应语句。

因此，如果您想在每次值更新时运行回调，则可以简单地执行此操作。

<script>
  let value = ''
  $: console.log(value)
</script>

<input type='text' name='name' bind:value />

简而言之，每次输入值发生变化时，控制台都会记录输入值。

重新创建您的建议

方法一

这已经是尽可能简洁的了，除非我需要更复杂的东西，否则这是我监听状态变化的首选方法。

$: if(x || y) console.log('yes')

但请注意，这里可能存在一个微妙的错误。如果x或y都是真值然后变成假值（例如，它们都变成空字符串），则该语句将不会运行。

方法二

在这里，您基本上重新创建了 React 的useEffect. 这是可行的，但是您可以使用反应式语句来简化 REPL 中的实现。

<script>
    let count = 1;
    $: console.log(count)
</script>

<input type="number" bind:value={count}>

方法三

存储非常适合在组件之间传递数据，而无需使用 props 或 context。查看此答案以了解更多信息：/sf/answers/4737673811/

不过，在这种情况下，我们可以（再次）使用常规反应式上下文来简化一切。

<script>
  let x = 0
  let y = 0

  $: console.log('x was changed', x)
  $: console.log('y was changed', y)
</script>

<button on:click={() => x++}>Change x</button>
<button on:click={() => y++}>Change x</button>

我还在Understanding Context in Svelte (convert from React Context)context中对 React 的/useEffect与 Svelte 的context/ stores/reactive 语句进行了比较的详细答案

/sf/answers/4737673811/