dart - 在 Polymer 中对列表进行分组而不重绘整个 DOM

Question

我正在为一个挑战而苦苦挣扎，这是我认为 Polymer(及其可观察对象)比 React 更困难的那种事情的一个很好的例子。

我正在从 Firebase 检索聊天消息。当他们进来时，我想确保它们按日期排序，并且我希望将来自同一用户的连续消息分组在一起。这样当用户发布连续消息时，我可以只打印一次用户和图片。

-- Load more --
[ ] Dave
  Message
  Message
[ ] Jane
  Message
  Message
[ ] Dave
  Message
[ Add message ]

这需要处理 a) N 个项目的初始页面，b) 进来的新消息和 c) 加载旧项目的“加载更多”。这一切都需要按照正确的顺序和组进行。

经过几次实现尝试，这里有一个，当一个新项目进入时(通过添加新项目或加载更多，没关系)，它 a) 排序 items按日期，然后 b) 按用户的连续消息对所有内容进行分组。

https://dartpad.dartlang.org/3681de332d2e965e2480

问题:因为这会对 @observable 的字段进行排序和重组。例如，在每个新项目上，向聊天中添加一条新消息会导致 Polymer 在 DOM 中重新绘制整个列表。用户图片实际闪烁，UI 卡住了片刻。这是 Not Acceptable 。

这在聊天应用程序之前已经做过无数次了。什么是正确的( polymer 友好型？)方法？

Answer 1

Afaik，只有在每次列表的任何部分更改时都创建一个全新的列表时才会发生这种情况。如果您可以仅使用所需的更改来修改现有列表，则只有修改后的项目应重新呈现。

如果您可以发布指向遇到此问题的示例 polymer 应用程序的链接，那也会有所帮助。

如果有大量项目，您可能应该考虑使用 core-list-dart元素。它将只为您管理渲染当前视口(viewport)和缓冲区。