Vaadin 23大量数据VirtualList刷新后丢失ClickListener问题求助

问题根源分析 #

1. Item类未正确实现hashCode：仅重写equals但未重写hashCode，导致DataProvider在大数据量下无法准确定位要刷新的项，引发刷新逻辑异常。
2. ComponentRenderer使用不当：原代码中每次渲染项都会创建新的Div并绑定点击事件，VirtualList的虚拟滚动复用组件机制会导致刷新时事件绑定丢失，同时未分离组件创建与内容更新逻辑，加剧了状态不一致问题。
3. JS层更新异常：组件复用与刷新逻辑冲突触发了$0.$connector.updateData($1)的JS错误，进一步导致内容不更新、事件失效。

解决方案 #

方案一：修复Item类+优化ComponentRenderer使用

首先修正Item类，确保equals和hashCode逻辑一致：

private static class Item {
    String id;
    int clicked = 0;

    public Item(String id) {
        this.id = id;
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj) return true;
        if (obj == null || getClass() != obj.getClass()) return false;
        Item item = (Item) obj;
        return id.equals(item.id);
    }

    @Override
    public int hashCode() {
        return id.hashCode();
    }

    public String getId() {
        return id;
    }

    public int getClicked() {
        return clicked;
    }

    public void setClicked(int clicked) {
        this.clicked = clicked;
    }
}

然后使用带组件复用+内容更新器的ComponentRenderer，避免重复创建组件和绑定事件：

vlist.setRenderer(new ComponentRenderer<>(
    // 仅在组件首次创建时执行：初始化组件并绑定一次点击事件
    item -> {
        Div div = new Div();
        div.addClickListener(e -> {
            Item clickedItem = (Item) div.getData();
            clickedItem.setClicked(clickedItem.getClicked() + 1);
            System.out.println(clickedItem.getId() + " clicked " + clickedItem.getClicked() + "x");
            dataProvider.refreshItem(clickedItem, true);
        });
        div.setData(item); // 将Item关联到组件，方便事件中获取
        return div;
    },
    // 每次数据刷新时执行：仅更新组件内容，不重建组件
    (div, item) -> {
        div.setText(item.getId() + " " + item.getClicked() + " " + LocalDateTime.now());
    }
));

方案二：改用TemplateRenderer（推荐用于大数据量场景）

TemplateRenderer基于HTML模板绑定数据，事件由框架统一管理，不受虚拟滚动组件复用影响，性能更优：

vlist.setRenderer(TemplateRenderer.<Item>of(
        "<div on-click='handleClick'>[[item.id]] [[item.clicked]] [[item.currentTime]]</div>"
    )
    .withProperty("id", Item::getId)
    .withProperty("clicked", Item::getClicked)
    .withProperty("currentTime", item -> LocalDateTime.now().toString())
    .withEventHandler("handleClick", item -> {
        item.setClicked(item.getClicked() + 1);
        System.out.println(item.getId() + " clicked " + item.getClicked() + "x");
        dataProvider.refreshItem(item, true);
    })
);

注：使用此方案时，同样需要确保Item类有正确的equals、hashCode及属性getter方法。

关键说明 #

• 修复hashCode是基础：确保DataProvider能准确识别并刷新目标项，避免大数据量下的哈希冲突或元素定位错误。
• 组件复用是核心：VirtualList的虚拟滚动依赖组件复用，避免每次刷新重建组件，才能保证事件绑定稳定。
• TemplateRenderer更适合大数据量：框架级的事件管理和模板渲染能有效避免组件复用带来的状态不一致问题，同时提升渲染性能。

内容的提问来源于stack exchange，提问作者sdo