Как эффективно визуализировать динамический список субэлементов в Vaadin

Question

Учитывая приложение Vaadin, в котором пользователь может добавлять и удалять элементы списка, который также отображается в браузере, мне интересно, каким был бы наиболее эффективный способ обработки таких манипуляций. В настоящее время я просто использую методы add и remove.

Я имею опыт работы только с Apache Wicket, где следует избегать манипулирования деревом компонентов по соображениям производительности. В документации я нашел только раздел о том, как обрабатывать повторяющиеся элементы в Polymer , но ничего не говорится о том, как это можно сделать с помощью «простого» API.

Я выбираю правильный подход?

Answer 1

Код пользовательского интерфейса Vaadin выполняется на сервере, поэтому операции добавления / удаления не влияют непосредственно на DOM.Когда ответ отправляется обратно в браузер, Vaadin рассмотрит разницу между предыдущим состоянием пользовательского интерфейса и текущим и отправит соответствующие инструкции клиенту браузера для обновления DOM.В этом случае инструкция будет выглядеть как «удалить следующие компоненты: ...».Фактическая манипуляция с DOM выполняется Ваадином, и это не то, на что вы можете повлиять.

Если вы столкнетесь с проблемами производительности, помогите нам, заполнив заявку на GitHub, чтобы мы могли взглянуть на нее https://github.com/vaadin/flow/issues