javascript - Svelte，只重新渲染列表中的一个项目，而不是整个列表

Question

无论是svelte-apollo（https://github.com/timhall/svelte-apollo/issues/19）和@urql-svelte（https://github.com/FormidableLabs/urql/issues/704）我都会重新渲染整个列表只是一个元素重新渲染。

复制步骤：

• 转到 REPL：https ://codesandbox.io/s/urql-svelte-list-rerendering-uwsvn

• 点击一个按钮

• 每个按钮重新渲染；所以整个列表重新渲染自己

• 我希望它只重新呈现我单击的按钮

如果我在这里阅读：https://svelte.dev/tutorial/svelte-options，我可以通过以下方式理解：

immutable={true} - 你从不使用可变数据，因此编译器可以进行简单的引用相等检查以确定值是否已更改

immutable={false} — 默认值。Svelte 对于可变对象是否发生变化会更加保守

如果您看到示例，他们正在更改todos数组，就像我们也在做的那样urql：

let todos = [
  { id: 1, done: true, text: 'wash the car' },
  { id: 2, done: false, text: 'take the dog for a walk' },
  { id: 3, done: false, text: 'mow the lawn' }
];

function toggle(toggled) {
  todos = todos.map(todo => {
    if (todo === toggled) {
      // return a new object
      return {
        id: todo.id,
        text: todo.text,
        done: !todo.done
      };
    }

    // return the same object
    return todo;
  });
}

为什么它不适用于我的 REPLtodos示例？

最后是todos一个新数组吗？

标签： javascriptsveltesvelte-3svelte-componenturql