Binding.scala:避免过多dom树更新的策略

Question

在我的项目scala适配器中，我显示通过websocket发送的日志条目。

由于我无法控制有多少条目是发送的，我正在寻找一个策略，以避免屏幕冻结。

我创建了一个ScalaFiddle来模拟：https://scalafiddle.io/sf/kzr28tq

具有这些参数的这个函数工作得很好：

setInterval(1000) { // note the absence of () =>
  entries.value += (0 to 100).map(_.toString).mkString("")
}

如果间隔变小，字符串变长，屏幕就会冻结，例如：

setInterval(100) { // note the absence of () =>
  entries.value += (0 to 10000).map(_.toString).mkString("")
}

在客户端有解决方案吗?还是我必须在服务器端解决这个问题？

Answer 1

你可以试试：

@dom
def render = {
  <div>
  {
    for (entry <- entries) yield {
      entryDiv(entry).bind
    }
  }
  </div>
}

问题是您绑定条目太早了。Binding.scala通过CPS转换实现了它的魔力，每个.bind之后都会触发对所有代码的重新评估，因此您应该尽可能晚地绑定一个变量。

对于Vars，使用理解而不是直接绑定，以避免更新整个列表。当您使用+=修改Vars的内容时，Binding.scala在内部对列表进行“补丁”，但是如果直接在Vars实例上执行.bind以获得整个列表，则框架无法为您进行任何优化。

下面是更新的ScalaFiddle：https://scalafiddle.io/sf/kzr28tq/3