Svelte, повторно отображать только элемент в списке, а не весь список

Оба с 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;
  });
}

Почему не работает с моим REPL todos пример?

Является todos новый массив в конце?

0 ответов

Другие вопросы по тегам