Question

我一直在玩 svelte，但我很难管理渲染。

我注意到，每当调用商店的 update 方法时，都会触发重新渲染，即使商店没有更改。我想我可能做错了什么，但我不确定是什么。

这是一个简单的例子。我原以为点击按钮不会在控制台中显示任何内容，因为没有实际更改（例如 Redux），但我每次都会收到一条新消息。

App.svelte：

{#each $store as value}
    {value}
{/each}
<button on:click={updateStore} type="button">Click me</button>

<script>
    import { afterUpdate } from 'svelte'
    import { store, updateStore } from './store.js'
    
    afterUpdate(() => console.log('render'))
</script>

store.js：

import { writable } from 'svelte/store'

export const store = writable([])

export const updateStore = () => store.update(s => s)

有问题吗？我是否应该在控制台中包含这些消息，还是应该添加诸如 get(store) 之类的内容来决定是否要实际调用 update？

Answer 1

Svelte 生成的代码对 store 的值一无所知，无论是否更改，每次发生 store 更新时都会呈现。为了实现你想要的，你必须用你自己的实现来包装 writable 来检查对象引用是否改变并取决于它是否发出事件。粗略的实现：

export function customWritable (value, start) {
   const _writable = writable(value, start);
   const set = (newVal) => {
     if (newVal !== value) {
       value = newVal;
       _writable.set(newVal);
     }
   };
   const update = (updateFn) => {
      set(updateFn(value));
   };
   
   return { set, update, subscribe: _writable.subscribe };
}

没有变化的苗条更新总是触发重新渲染

1 个答案: