无论是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
一个新数组吗?